SWR은 vercel에서 제작한 React Hooks로, 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. 이름은 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다. 공식사이트 전체적인 기능은 React Query와...

Next.js의 컴파일러는 바벨 대신에 Rust 기반의 SWC를 JS 번들링에 사용한다. 이는 바벨보다 17배 빠르며, Next.js 12부터 디폴트로 쓰인다. 만약 바벨을 사용하고 싶다면, 다음을 참고하면 된다. Next.js Compiler의 자세한 내용은 공식 가이드에 나와있다. 이 글에서는 주로 사용할만한 요소만 요약하여 정리하였다. S...

next.js는 빌드 시 자동으로 모든 페이지와 그 의존성을 트랙킹하여 배포시 필요한 파일을 알아낸다. 이렇게 함으로써 배포될 파일의 크기를 줄일 수 있다. 이전에 도커로 배포할 땐, 모든 의존성을 가져온 후 next start를 실행해야했다. 하지만 next.js 12부터는 Output File Tracing을 통해 .next/ 디렉터리만 있으면 ...

Next build API next build를 실행하면, 작성한 소스코드가 최적화된 상태도 빌드된다. 빌드된 결과물 .next 아래에 위치하며 구조는 다음과 같다. .next/static/chunks/pages : 라우트되는 이름 그대로 생성된 js 파일이 위치한다. (/about –> .next/static/chunks/pages/a...

next.js로 만든 앱을 배포하기 전 체크리스트 가능한만큼 캐싱을 적용했는가? 데이터베이스와 백엔드가 같은 region에 배포되어있는가? 가능한 최소한의 Javascript를 사용하는 것을 목표로 해라 Javascript 로딩을 가능한 연기하라 logging이 구현되어 있는가? errorHandling이 설정되어있는가? ...

next.js 에서는 페이지 성능 개선을 위해 서드파티 script를 가져올 수 있는 next/script 컴포넌트를 제공한다. 사용법 import import Script from 'next/script' Page script 페이지 컴포넌트에서 사용될 수 있으며, 페이지가 브라우저에 로드되면 script를 fetch하고 실행한다. im...

next export 명령어를 통해 next.js 어플리케이션을 static HTML으로 만들 수 있다. 이렇게 만들어진 Static HTML은 Node.js 서버없이 운영이 가능하다. 다음과 같은 기능이 필요없다면, next export를 사용하는 것이 권장된다. Image Optimization (default loader) Intern...

next.js에서는 어떤 페이지가 getServerSideProps 또는 getInitialProps를 가지고 있지 않다면, static 페이지로 결정한다. 이렇게 static 페이지로 결정되면, 빌드시 그 페이지는 static 페이지로 빌드된다. static 페이지는 서버사이드에서 렌더되지 않고 바로 유저에게 전달된다. end-user와 서버 사이...

next.js에서는 next/image로 자체적인 이미지 컴포넌트를 제공한다. 일반적인 img 태그와는 달리 여러 성능 최적화기법이 내장되어있다. 기본적으로 다음과 같은 기능을 제공한다. 성능 향상 : 각 디바이스에 정확히 맞는 이미지를 모던 웹 포맷에 맞게 제공한다. Visual Stability : Cumulative Layout Shi...

next.js는 기본적으로 node.js runtime에서 작동된다. 하지만 node.js 는 싱글 스레드 기반이고, 따라서 트래픽이 많은 환경에서 multi-core를 사용하여 node.js 앱을 구동하기 위해선 다음과 같은 방법이 있다. worker thread child process cluster 필자는 next.js에서 가장...