Pages

• 각 파일 이름을 기반으로 하는 라우트와 연결된다.
• .js, .jsx, .ts, .tsx 확장자 사용 가능
• Dynamic route 작성이 가능하다
  • pages/posts/[id].js -> posts/1

Pre-rendering

• 기본적으로 모든 페이지에서 Pre-rendering 이 가능하다.
• Next.js는 Client-side에서 JS 작업을 수행하는 대신에, 페이지에 대한 HTML을 미리 생성한다.
• 그렇기 때문에 좋은 성능과 SEO 향상이 가능하다.
• 미리 생성된 HTML은 해당 페이지가 필요한 최소한의 JS 코드와 연결된다.
• 브라우저에서 페이지가 로드되면, JS 코드가 실행되면서 페이지를 완전하게 파싱하는 데, 이를 hydration이라고 한다.
  • 렌더링한 결과물이 어떠한 컴포넌트인지를 확인하고, 각 컴포넌트의 걸린 이벤트들을 실제 DOM에 걸어주는 동작을 한다.
• Pre-rendering에는 Static Generation 과 Server-side Rendering 두 가지 종류가 있다.
• SSG는 html를 build 시점에 생성하고 각 요청에 따라 재사용하는 방법이다.
• SSR은 html을 각 request가 일어날 때마다 생성하는 방법이다.
• 페이지마다 SSG, SSR 방식을 혼용할 수 있다.
• 단 SSG 방식을 추천하는 이유는 퍼포먼스가 더 좋기 때문이다. (성능 향상을 위한 추가적인 구성이 필요없이 CDN으로 캐싱 가능)

Static Generation

• HTML이 build 시점에 모두 생성된다.
• 그렇기 때문에 각 요청에 따라서 HTML이 재사용되며 CDN으로 캐싱된다.