[Next.js] Next Overview

pre-rendering

기본적으로 Next.js는 모든 페이지를 pre-render한다.

즉, React CSR 방식과 같이 클라이언트에서 javascript 모든 코드를 읽고, 페이지를 만드는 대신에 미리 각 페이지에 대한 HTML파일을 만든다.

브라우저에서 js가 비활성화 되어있다면, CSR로 개발한 앱은 동작하지 않을 것이고, 또한 불러올 리소스가 많거나 네트워크 상태가 느릴 경우 아무것도 보이지 않는 흰 화면이 상태가 오래 지속되어 사용성이 저하된다.

pre-rendering은 이것을 개선해 더 나은 성능, SEO 최적화를 도와준다.

Two Forms of Pre-Rendering

1. Static Generation

Pre-generate a page(with data prepared on the server-side) during build time.

빌드(배포 전 어플리케이션을 구축할 때)되는 동안 모든 페이지(모든 HTML 코드와 데이터)가 사전에 생성된다.

배포되고 나면 생성된 페이지는 서버나 앱을 실행시키는 CDN을 통해서 캐시로 저장된다.

사전에 생성할 페이지에 포함될 데이터는 해당 페이지의 폴더 내에서 getStaticProps 비동기 함수를 통해 가져올 수 있다.

해당 함수는 컴포넌트 함수보다 먼저 실행된다.

실제로 빌드를 하게 되면 다음과 같은 메세지로 SSG를 확인할 수 있다.

getStaticProps 동작 확인

또한, 빌드 이후 .next/server/pages 경로에서 사전에 생성된 HTML 파일을 확인할 수 있다.

.next/server/pages

1.1 ISR(Incremental Static Genaration)

증분 정적 생성

페이지를 사전 생성하긴 하지만, 최대 x초 마다 들어오는 요청에 대해 주어진 페이지를 재생성할 수 있다.

getStaticProps 함수에서 revalidate 값으로 설정한 초 이전에는 기존의 페이지를 보여주고,

이후에는 서버에서 다시 페이지를 생성하고 기존 페이지를 대체하여 캐시되며 향후 사용자는 재생성된 페이지를 보게 된다.

ISR 주기를 10초로 설정하고 빌드 이후, 메시지를 통해 적용된 부분을 확인할 수 있다.

ISR:10 Seconds

1.2 getStaticPaths

동적으로 생성되는 페이지 ( ex) '/id'와 같이 아이템 별 id로 이동하는 상세 페이지)는 사전 렌더링 되지 않고, 서버에서 그때마다 생성한다.

getStaticPaths 함수를 통해 Next.js에 이것을 알려줄 수 있다.

해당 함수는 getStaticProps와 같이 pages 폴더 내의 컴포넌트 파일에만 추가할 수 있다.

export async function getStaticPaths() {
  return {
    paths: [{ params: { pid: "p1" } }, { params: { pid: "p2" } },..]
    fallback : ...
  };

paths

어떤 path의 페이지를 빌드 타임에 생성할지 정하는 배열이다.

• 파일명이 /[pid].js 이라면, params 객체도 {pid : '..'} 값을 가져야 한다.
• 파일명이 /[...slug].js 와 같이 catch-all 라우트인 경우 params 객체는 slug 배열을 가져야 한다.

fallback

빌드 타임에 생성해놓지 않은 path 요청이 들어온 경우 boolean, 'blocking' 값으로 설정하여 동작방식을 정해준다.

• false
  paths 배열에 없는 path에 대해 404 페이지를 보여준다.
• true
  모든 페이지를 사전에 생성하기에 오랜 시간이 소요될 경우 사용할 수 있다.
• 1. paths 배열에 없는 path에 대해 fallback 컨텐츠를 먼저 보여준다.
  2. 백그라운드에서 Next js가 요청된 path에 대해서 getStaticProps 함수를 이용하여 HTML 파일과 JSON 파일을 만들어낸다
  3. 백그라운드 작업이 끝나면, 요청된 path에 해당하는 JSON 파일을 받아서 새롭게 페이지를 렌더링한다. 사용자 입장에서는 [ fallback → 풀 페이지]와 같은 순서로 화면이 변하게된다.
  4. 새롭게 생성된 페이지를 기존의 빌드시 프리렌더링 된 페이지 리스트에 추가한다. 같은 path로 온 이후 요청들에 대해서는 이때 생성한 페이지를 반환하게된다.
• blocking
  true인 경우와 비슷하게 동작하지만, fallback 컨텐츠를 보여주지 않고 SSR처럼 동작한다.
  이후, true 옵션과 같이 기존의 정적 페이지 리스트에 새로 생성한 페이지를 추가한다.

2. Server-side Rendering

컴포넌트에서 사용되는 데이터를 서버측에서 미리 생성하고, 클라이언트에게 완성된 페이지를 제공한다.

2.1 getServerSideProps

빌드 타임에 페이지를 생성하지 않고, 서버 측에서 렌더링한다.

/[uid].js

function UserIdPage(props) {
  return <h1>{props.id}</h1>;
}

export default UserIdPage;

export async function getServerSideProps(context) {
  const { params } = context;
  const userId = params.uid;
  return {
    props: { id: "userid-" + userId },
  };
}

/user-profile.js

function UserProfilePage(props) {
  return <h1>{props.username}</h1>;
}

export default UserProfilePage;

export async function getServerSideProps(context) {
  const { params, req, res } = context;
  return {
    props: { username: "MAX" },
  };
}

위의 두 개 페이지에서 getServerSideProps를 통해 서버사이드 렌더링을 수행했고, 빌드 후 메세지로 람다 표시된 페이지가 서버측 렌더를 실행했다는 내용을 확인할 수 있다.

 

getServerSideProps

hydration

생성된 HTML에 필요한 js코드를 입혀 동적으로 동작할 수 있도록 해주는 과정을 말한다.