[Next] Data Fetching

프리렌더링(Pre-rendering)

앞서 공부한 것처럼 Next는 프리렌더링(pre-rendering) 기능을 제공한다.

말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다.

html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지 자바스크립트를 불러와 화면에 렌더링 시켜주는 것이다.

프리렌더링을 하면 렌더링 성능과 SEO가 향상된다.

Plain React App
Pre-rendering을 하지 않으면, 초기에는 렌더링이 되지 않았다가 자바스크립트가 로드되면 페이지 요소들이 채워진다.

Using Next.js App
Pre-rendering을 한다면 사전에 만들어진 HTML 파일을 보여주고 이후 자바스크립트가 로드되면 Hydration이 실행된다.
*Hydration이란, 브라우저가 모두 로드되었을 때 사용자와 상호작용할 수 있는 상태를 의미한다.

Pre-rendering의 종류

Pre-rendering은 Static Generation과 Server-side Rendering 두 가지 종류가 있다.

둘의 차이점은 "언제 HTML 파일이만들어지는가?" 이다.

HTML 생성 시점

Static Generation

사용자의 요청과는 별개로 페이지를 미리 만들어 놓고,한 번 만들어놓으면 CDN을 통해 재사용하기 때문에 서버에서 매번 요청하는 것보다 빠르다.

공식 문서에 나와있는 Static Generation 페이지 사용 예시

• Marketing pages - 마케팅 페이지
• Blog posts - 블로그 포스트
• E-commerce product listings - 제품 목록
• Help and documentation - 도움말, 문서

Server Side Rendering

페이지 로딩 속도는 느릴 수 있지만 매번 서버에 요청을 하여 렌더링 하기 때문에 해당 페이지는 항상 최신 상태를 유지할 수 있다.

Next는 기존에 data fetching에 있어 getInitialProps를 사용하였지만 9.3 버전부터는 getStaticProps, getStaticPaths, getServerSideProp 세 가지로 나뉘었다.

getServerSideProps / getStaticProps / getStaticPaths

getStaticProps

Data Fetching: getStaticProps | Next.js

• 빌드 시에만 서버에서 데이터를 가져와 html과 json 파일을 미리 만든다.
• 이후에 서버에서 데이터가 바뀌어도 다시 통신을 하지 않기 때문에 데이터가 실시간으로 업데이트 되지 않는다는 것을 주의해야한다.
• html, json 파일 모두 퍼포먼스 향상을 위해 CDN에 캐싱한다.

const Detail = ({ data }) => {
  return <></>;
};

export async function getStaticProps(context) {
  const data = await fetch('--');
  return {
    props: { data }, // 페이지 컴포넌트에 props로 넘길 것
  };
}

export default Detail;

getStaticPaths

Data Fetching: getStaticPaths | Next.js

• getStaticProps와 동일하게 빌드 시에 서버에서 데이터를 받아온다.
• 차이점이 있다면 getStaticPaths는 Dynamic Routes에서 사용된다.

const Detail = ({ data }) => {
  return <></>;
};

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '100' } },
      { params: { id: '200' } },
      { params: { id: '300' } }
    ],
    fallback: true, // false or 'blocking'
  };
}

export async function getStaticProps(context) {
  const data = await fetch('--');
  return {
    props: { data }, // 페이지 컴포넌트에 props로 넘길 것
  };
}

export default Detail;

getStaticProps와 반드시 같이 사용해야하며 getServerSideProps와는 같이 사용할 수 없다.

예시 설명

• path로 설정된 경로들은 빌드 시 미리 만들어진다.
• id값이 100, 200, 300인 페이지를 미리 생성한다.
• fallback이 false일 경우 path에서 설정하지 않은 경로들은 대응하지 않는다. 즉 404페이지가 나온다.
• fallback이 true일 경우에는 백그라운드에서 정적 파일로 htm과 json을 생성하여 pre-render목록에 추가한다.
• 따라서 처음 페이지가 로드될 때는 느리며 이후부터는 빠르게 로드된다.

getServerSideProps

Data Fetching: getServerSideProps | Next.js

• 서버 측에서 프리렌더를 하여 반환 데이터를 getServerSideProps로 페이지에 전달한다.
• 빌드와 상관없이 매 요청마다 서버에서 데이터를 가져온다.
• 서버에서 계속 데이터를 가져오기 때문에 정보들은 항상 최신 상태로 유지된다.
• 따라서 제품 상세 페이지, 관리자 페이지와 같은 곳들에서 사용된다.

const Detail = ({ data }) => {
  return <></>;
};

export async function getServerSideProps(context) {
  const data = await fetch('url');
  return {
    props: { data }, // 페이지 컴포넌트에 props로 넘길 것
  };
}

export default Detail;

🔄 Return

returngetServerSideProps는 세 가지의 반환 값을 가진다.

ℹ️ Context

contextcontext 객체를 인자로 받으며 아래 정보들을 담고 있다.

언제 getServerSideProps를 사용해야 하는가?

request time에 반드시 데이터를 fetch해야 하는 페이지를 pre-render해야 하는 경우에만 getServerSideProps를 사용해야한다.
데이터를 pre-render할 필요가 없다면 클라이언트에서 데이터를 가져오는 것을 고려해야한다.

클라이언트 측에서 데이터 가져오는 과정 (Fetching data on the client side)

페이지에 자주 업데이트되는 데이터가 포함되어 있고 데이터를 pre-render할 필요가 없는 경우 사용한다.

• 데이터가 없는 페이지를 즉시 표시한다.
• 페이지의 일부는 Static Generation을 사용해 pre-render할 수 있습니다.
• 빈 데이터를 위해 Loading 상태를 표시할 수 있다.
• 클라이언트 측에서 데이터를 가져와 준비가 되면 브라우저에 표시한다.

getServerSideProps가 오류 페이지를 렌더링 할 수 있는가?

• getServerSideProps 내부에서 오류가 발생하면 pages/500.js 파일이 표시된다.
• 500 page(서버 렌더링 오류 페이지)는 사용자가 커스터 마이징 할 수 있다.
• 개발 중에는 이 파일이 사용되지 않고 개발 오버레이가 표시된다.

반응형