Pre-Render

• 브라우저에게 전달하기 전에 HTML을 미리 생성하는 것
• 기본적으로 Next.js는 모든 페이지를 Pre-Render을 수행
• 대부분의 페이지는 Static Generation으로 수행하고 최신 컨텐츠가 필요한 페이지는 Server Side Render으로 수행

Pre-Rendering 과정

1. Initial load html

• js가 로드되기 전 HTML을 미리 보여준다.
• js가 로드되기 전이므로 js 관련 코드는(<Link>) 동작하지 않는 상태

2. Hydration

• js파일을 서버로부터 받고 Initial load html에서 로드된 HTML과 연결 시키는 과정
• React 컴포넌트들이 초기화되고 사용자와 상호작용할 준비를 마친다.

Pre-render가 없다면

• JS가 로드되기 전까지 화면에 나타나는 것이 없으므로 심각한 UX 저하

Pre-Render 방식

• Pre-rendering 방식에는 Server-Side-Rednering과 Static Site Generation이 있다.

Server-Side rendering

• 페이지를 요청받을 때마다 HTML을 새로 생성

Static Site Generation

• 빌드시점에 HTML을 생성하고 이 정적사이트를 유저들에게 제공
• 프론트 서버에서 API 서버 & DataBase에 접근을 줄이기위해 나온 방식
• 빌드할때만 API서버에 접근하기 때문에 CSR 또는 SSR보다 API서버에 대한 부하가 훨씬 줄어듦
• 데이터가 자주 갱신되지 않는 컨텐츠에서 최적

Client-Side Rendering

• 데이터를 미리 렌더링할 필요가 없는 경우 Client-Side-Rendering을 사용할 수도 있다.
• 외부 데이터가 필요하지 않은 페이지 부분을 정적으로 생성(pre-render는 default)
• 페이지가 로드되고나서 JS를 사용하여 클라이언트에서 외부데이터를 가져오고 나머지 부분을 채운다.
• 일반 사용자들에게 노출되지않고 SEO가 필요하지 않은 경우 사용 (관리자페이지)

SWR

• Next.js 개발팀이 만든 데이터를 가져오는 React hook
• 클라이언트 측에서 데이터를 가져오는 경우 적극 권장

Data fetching

getServerSideProps

• 요청마다 데이터를 가져와야 하는 페이지를 pre-render해야 하는 경우에만 getServerSideProps를 사용
• 모든 요청에 대해 결과를 계산해야하고 추가 작업없이 CDN에서 결과를 캐싱할수 없기때문에 getStaticProps보다 느리다.
• getServerSideProps는 요청 시 호출되므로 context라는 요청 특정 매개변수가 포함됨

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

getStaticProps

• 빌드타임에 실행되어 외부 데이터를 호출하고 props로 보낸다.
• 앱 빌드후에 자주 바뀌지 않는 데이터를 사용하는 page에 사용
• 페이지를 요청받을 때마다 매번 데이터 호출이 일어나지 않으므로 성능면에서 좋다.
• 빌드 시간에 실행되도록 되어 있기 때문에 쿼리 매개변수나 HTTP 헤더와 같이 요청 시간에만 사용할 수 있는 데이터는 사용할 수 없다.
• 페이지 컴포넌트에서만 사용 가능 (페이지가 렌더링 되기전에 react에 필요한 모든 데이터가 있어야하기에)
• revalidate: 지정한 sec가 지난 시점부터 접속이 일어나면 파일을 새롭게 생성하는 옵션

export const getStaticProps = async () => {
  const { data } = await axios.get('url');
  
  return {
    props: {
      data
    }
    revalidate: 20 // sec
  }
}