Next.js 렌더링 방법

1. 정적 사이트 생성 (SSG)

SSG = Static Site Generation
빌드 시 API 등으로부터 데이터를 얻어, 페이지를 그려 정적 파일로 생성

• 빌드 시 getStaticProps 함수 호출
  -> 그 안에 API 호출 등을 수행하고 필요한 props 반환
• 화면을 그린 결과 = 정적 파일의 형태로 빌드 결과로 저장
• 페이지에 접근 발생
  -> 미리 생성한 정적 파일을 클라이언트에 보내고, 브라우저는 그것을 기반으로 화면을 그림
• 빌드 시에만 데이터를 얻으므로 실시간성 컨텐츠에 적합X

2. 클라이언트 사이드 렌더링 (CSR)

CSR = Client Side Rendering
빌드 시에 데이터를 얻지 않고, 페이지를 화면에 그려 저장

• 브라우저에 초기 화면을 그린 뒤, 비동기로 데이터를 얻어 추가 데이터 표시
• 페이지를 그리기 위해 필요한 데이터는 나중에 얻어 반영
• 초기 화면을 그리는 것이 중요X, 실시간성이 중요한 페이지에 적합

3. 서버 사이드 렌더링 (SSR)

SSR = Server Side Rendering

• 페이지 접근이 발생할 때마다 getServerSideProps를 호출하고, 그 결과 props를 기반으로 페이지를 서버 측에서 그려 클라이언트에 전달
• 접근 시마다 서버에서 데이터를 얻어 화면을 그림
  -> 항상 최신 데이터를 기반으로 페이지 초기 화면을 그림
• 서버에서 어느 정도의 처리를 해야 하므로, 다른 방법에 비해 지연이 높아질 가능성↑

4. 점진적 정적 재생성 (ISR)

ISR = Incremental Static Regeneration
사전에 페이지를 생성해서 전송하면서, 동시에 접근이 발생함에 따라 페이지를 다시 생성해 새로운 페이지 전송 가능

• 페이지 접근이 발생하면 사전에 렌더링해서 서버에 저장한 페이지의 데이터를 클라이언트에 전달
• 데이터에 유효 기간 설정 가능
• 유효 기간이 지난 상태에서 접근 발생
  -> 백그라운드에서 다시 getStaticProps를 실행해 화면을 그리고, 서버에 저장된 페이지 데이터를 업데이트
• SSR와 달리 요청 시 서버 측에서 처리를 하지 않으므로, SSG와 마찬가지로 지연을 짧게 유지할 수 있고, 최신 기반의 페이지를 초기에 그릴 수 있음