Skip to main content

Pre-rendering types of nextjs

· 2 min read
  • Pages
    • nextjs에서 page는
      • React component이다
      • pages 디렉토리에 존재하는 소스파일명으로 자동 route 설정됨
        • pages/about.js를 만들면 browser에서 /about 이란 경로로 접근된다
        function About() {
    return <div>About</div>
}
export default About
        • pages/posts/[id].js - path parameter도 지원한다
          • 파일명에 [, ]가 들어가는게 생소하지만 된다
    • Pre-rendering
      • 기본적으로 nextjs에선 모든 페이지를 pre-render한다
        • 성능과 SEO 측면에서 좋다
      • 생성된 html은 최소한의 javascript 코드를 담고있다. 브라우져가 로드하고 javascript가 수행되면 fully interactive해 진다(그 전에도 보이긴 함)
        • hydration 과정이라고 칭함
      • 2가지 방식의 pre-rendering
        • Static Generation(추천)
          • build time(by next build)에 html을 생성해 버린다
          • 즉, 매 요청마다 서버에서 뭔가 처리하지 못한다
          • headless CMS나 headful CMS에서 내용을 기반으로 static page 구축
          • getStaticProps, getStaticPaths 사용
        • Server-side Rendering
          • 요청마다 서버에서 작업 결과를 넘겨준다
          • getServerSideProps를 정의하면 된다
      • 대부분의 page는 static generation을 사용하고 불가피한 page만 server-side rendering을 수행하게 만들수 있고 추천한다