TIL 65 | Pre-rendering

Pre-rendering

• NEXT-js를 사용하게 되면 기본적으로 모든 페이지마다 Pre-rendering을 하게 된다. CRA를 통해 구현한 SPA의 Client-side Rendering과 다르게 렌더링의 주체가 client가 아닌 server이며, 이는 성능 개선 및 보다 향샹된 SEO를 제공한다. (비교 글은 여기 작성해놓았다.)

• Pre-rendering은 정적 요소가 먼저 그려진 후 사용자에게 보여지며, JS 로딩 후 정적 문서를 데이터 변경 및 사용자에게 반응할 수 있는 동적 형태로 변환하는 과정이 이루어진다. (이를 hydration이라고 한다.)

• NEXT는 두 가지 형태의 Pre-rendering가 존재하는데, 이는 다음과 같다.

Static Generation

• DOM 요소들이 build가 될때 생성이 되며 사용자의 요청마다 재사용된다.

• 공식문서에서는 이 Static-Generation을 추천한다. 그 이유는 페이지가 1번 build가 되고 CDN에 의해 제공이 되는데, 이는 server가 사용자의 요청마다 render하는 것보다 빠르기 때문이다.

• 마케팅 페이지, 블로그 포스트, e-commerce 상품 리스트, help and documentation 페이지에 사용할 수 있다. (즉 데이터가 동적이며 수시로 변경하지 않는 페이지들)

• 사용자의 요청에 앞서 페이지를 pre-render를 하고 싶다면, Static-Generation을 선택해야한다.

Static Generation without data

export default function About() {
  return <div>About</div>;
}

Static Generation with data

export default function Blog({ posts }) {
  return <ul>
    {posts.map(post) => (<li>{post.title}</li>)}
  </ul>;
}
//
  export async function getStaticProps(){
      const res = await fetch('http.../posts');
      const posts = await res.json();
      return {
          props: {
              posts,
          }
      }
  }

• data fetch가 있을 경우, getStaticProps라는 함수를 사용한다.

• 웹이 build될 때 함수가 실행되며, 함수가 속한 페이지 컴포넌트에 props로 데이터를 전달할 수 있다.

• getStaticProps의 리턴값은 항상 props: {}의 형태이다.

• development 모드에서는 매 요청마다 실행이 되는 것을 참고하도록 하자.

• props 자리에는 또다른 매개변수를 사용할 수 있으며, 이는 공식문서를 참고하면 된다.

Server-side Rendering

• Static-Generation과 같이 pre-render를 하지만 사용자의 요청 혹은 수시로 변하는 데이터 변동을 보여주는 페이지를 구현하고자 할 경우 Server-side Rendering을 사용한다.

• 렌더링 속도는 느리지만, 동적인 데이터 변동을 보여주기에 적합하다.

• Static-Generation보다 느린 성능을 보이기 때문에 절대적으로 필요한 경우에만 사용하는 것을 권장한다.

Server-side Rendering with data

export default function Blog({ posts }) {
  return <ul>
    {posts.map(post) => (<li>{post.title}</li>)}
  </ul>;
}
//
 export async function getServerSideProps(){
      const res = await fetch('http.../posts');
      const posts = await res.json();
      return {
          props: {
              posts,
          }
      }
  }

• getStaticProps와 동일한 형태로 작성한다.

Reference

NEXTjs 공식문서