1. 렌더링 방식

• 랜더링 방식은 크게 정적생성(Static Generation), SSR, **CSR**이 있으며, Next.js에서는 보통 정적생성과 SSR을 많이 사용한다.
• pages폴더 밑에 있는 모든 컴포넌트는 빌드시 HTML을 정적으로 생성하거나 요청이 올 때마다 SSR 렌더링(서버에서 html을 생성)을 한다.
• Next.js의 메서드를 통해 3가지 렌더링을 할 수 있다.

2. 정적생성(Static Generation)

• 설명 : 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML파일을 모두 갖고 있는 상태이며, 요청할 때 서버에 있던 해당 페이지의 HTML을 통해서 응답한다.
• 장점 : CDN(content delivery network)이 파일을 캐싱하여 응답하기 때문에 빠르고, 불필요한 서버 요청이 줄어든다.
• 단점
  • 매번 새로운 상품을 보여주기 위하여 상품 목록 api를 호출해서 상품 데이터를 받아와야 하는데, 만약 빌드 시점에 정적으로 HTML을 생성해버리면 유동적으로 데이터를 받아오지 못한다.
  • 빌드시점에 호출해서 가져온 데이터가 고정 되어 HTML파일이 만들어진다. 따라서 회사 소개 페이지, 개인정보처리 방침 같은 설명 페이지, 정적 블로그 페이지 등에 쓰인다.
• 사용하는 메서드
  • **getStaticProps (**데이터를 가져오기)
  • getStaticPaths (데이터를 가져오는 메서드 없이 컴포넌트를 만들기)

SSR(Server Side Rendering)

• 설명
  • SSR은 페이지 요청이 있으면 server side에서 api를 호출하고 데이터를 응답받아서 서버측에서 HTML을 완성시키고 클라이언트에 전달한다.
• 장점
  • SEO에 적합하다.
• 단점
  • 요청을 할 때마다 서버측에서 HTML을 만들 시간이 필요하기 때문에 HTML을 응답하는 시간이 오래걸릴 수 있다
• 사용하는 메서드
  • **getInitialProps**나 **getServerSideProps**메서드 : 페이지를 요청할 때마다 SSR을 하여 데이터를 요청한다.

CSR(Client Side Rendering)