[React🌀] Next JS middleware / 미들웨어 / (Next JS 12.0.0)
Next JS 12 next js 12버전이 공개되었습니다. 이번 업데이트는 'rust 컴파일러로 변경' , '리액트 서버컴포넌트' 등 이전 버전들보다 더 혁신적인 기능들이 많은 것으로 보이는데요, 그 중에 눈에 띄는 부분인 미들웨어 부분을 소개드리고자 합니다. Edge Function Middleware는 Edge Function 을 런타임으로 해서 사용이 됩니다. Vercel은 Edge Function 을 설명하기 위해 이런 스토리를 설명하고 있는데요, 속도가 빠르지만 정적인 컨텐츠만을 제공할 수 있는 CDN, 동적으로 매 요청마다 랜더링이 가능하지만 속도가 느린 동적 서버, 항상 양자 택일의 기로에 서있었다구요. Edge Function을 이용한다면 이런 두가지 단점들을 극복할 수 있다고 합니다. ..
2021. 11. 21.
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
2021. 3. 8.
[React🌀] Next JS middleware / 미들웨어 / (Next JS 12.0.0)
Next JS 12 next js 12버전이 공개되었습니다. 이번 업데이트는 'rust 컴파일러로 변경' , '리액트 서버컴포넌트' 등 이전 버전들보다 더 혁신적인 기능들이 많은 것으로 보이는데요, 그 중에 눈에 띄는 부분인 미들웨어 부분을 소개드리고자 합니다. Edge Function Middleware는 Edge Function 을 런타임으로 해서 사용이 됩니다. Vercel은 Edge Function 을 설명하기 위해 이런 스토리를 설명하고 있는데요, 속도가 빠르지만 정적인 컨텐츠만을 제공할 수 있는 CDN, 동적으로 매 요청마다 랜더링이 가능하지만 속도가 느린 동적 서버, 항상 양자 택일의 기로에 서있었다구요. Edge Function을 이용한다면 이런 두가지 단점들을 극복할 수 있다고 합니다. ..
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..