Published on

Next.js의 렌더링 방식

기본적으로 Next.js는 모든 페이지를 미리 렌더링한다. 클라이언트 측에서 요청하기 전에 우선 각 페이지의 HTML을 미리 생성시켜 놓는다는 의미이다. 이 과정을 Pre-rendering이라고 하는데, 이를 통해 성능 향상과 SEO를 최적화 시킬 수 있다는 장점이 있다.

Pre-rendering

Pre-rendering에는 SSG, SSR 두 가지 방식이 있다. 차이점은 언제 HTML 페이지를 생성하느냐에 있다.

  • Static Site Generation (SSG)
    • SSG는 빌드 시점에 HTML이 생성되고, 모든 요청에 재사용 될 수 있는 렌더링 방식을 말한다. 즉 HTML 파일을 서버 측에서 미리 만들어 놓는 것이다.
  • 장점
    • TTV가 빠름
    • 자바스크립트가 필요없음
    • SEO 최적화가 좋음 (웹크롤러가 아주 빠르고 효율적)
    • 보안이 필요함
    • CDN에 캐시가 됨
  • 단점
    • 데이터가 정적임 (가변적으로 계속 변하는 사이트와는 맞지 않음)
    • 사용자별 정보 제공의 어려움
    • 모든 사용자들에게 동일한 데이터가 정적일 때는 유용할 수 있으나 그 외의 상황에서는 맞지 않을 수 있음 → 이런 문제점을 해결하기 위해 나온 것이 ISR과 SSR

CDN이란?

Content Delivery Network의 약자로, 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다. 즉, CDN은 콘텐츠 전송 시간을 줄여주는 네트워크이다.

Next.js는 SSG를 위해 getStaticProps 함수를 제공한다. 예시를 살펴보도록 하자!

  export default function Blog({ posts }) {
    // 렌더링 포스트
  }
  
  // 서버 빌드 시에 실행되는 함수 getStaticProps()
  export async function getStaticProps() {
    // API로 데이터 Fetch하기
    const res = await fetch('https://.../posts')
    const posts = await res.json()
  
    // { props: { posts } }을 리턴해 주면서
    // 블로그 컴포넌트는 빌드 타임에 `posts`를 prop으로 받게 된다
    return {
      props: {
        posts,
      },
    }
  }
  • Server-side Rendering (SSR)
    • 요청 발생 시 HTML을 생성한다. 클라이언트가 요청을 할 때마다 렌더링 한다는 의미이다.
  • 장점
    • TTV가 빠름
    • 자바스크립트 필요 없음
    • SEO 최적화
    • 보안 향상
    • 실시간 데이터 사용
  • 단점
    • SSG와 ISR과 비교했을 때 상대적으로 느림
    • 서버의 과부화 (overhead)
    • CND에 캐시가 안 됨

SSR을 사용하기 위해서 Next.js는 getServerSideProps 함수를 제공하고 있다. 모든 요청 시 해당 함수가 실행되며, 예시는 아래와 같다.

  export default function Page({ data }) {
    // 데이터 렌더링
  }
  
  // 모든 요청 시에 수행되는 function
  export async function getServerSideProps() {
    // API로 데이터 Fetch하기
    const res = await fetch(`https://.../data`)
    const data = await res.json()
  
    // Prop을 통해 해당 페이지에 데이터 전달하기
    return { props: { data } }
  }

또 다른 렌더링 방식으로는 뭐가 있을까? 🤔

  • Client Side Rendering (CSR)
    • 렌더링하는 주체가 클라이언트(브라우저)이다.
  • 장점
    • 한 번만 로딩되면 빠른 UX 제공
    • 서버의 부하가 적음
  • 단점
    • 페이지 로딩 시간(Time To View)이 길다 / FCP(First Contentful Paint)
    • 자바스크립트 활성화 필수
    • SEO 최적화(검색 엔진 최적화)가 힘듦
    • 보안에 취약함
    • CDN에 캐시가 되지 않음
  • Incremental Static Regenration (ISR)
    • 렌더링 주체자는 서버, 하지만 주기적으로 렌더링 (5분, 10분, 1시간…)
  • 장점
    • SSG의 모든 장점 + 데이터가 주기적으로 업데이트 된다는 것
  • 단점
    • 실시간 데이터가 아니라는 것 (렌더링 주기가 5분이라면, 5분 후에 확인 가능)

Next.js는 SSR 방식보다 SSG 방식을 사용하는 것을 권고한다. Next.js의 구현 특징 중 하나인 hybrid로 대부분의 페이지를 정적으로 생성하고, 나머지는 SSR을 사용하도록 말이다. 정적으로 생성된 페이지는 CDN에 캐시될 수 있고, 부가 설정이 필요없이 성능을 향상시킬 수 있기 때문이다.

하지만 웹앱 개발 시 특정 하나의 렌더링 방식만 사용되는 경우는 거의 없을 것이고, 각 페이지별 특징에 따라서 웹 어플리케이션의 성능을 높이기 위해 적절한 렌더링 방식(CSR, SSG, ISR, SSR)을 선택하는 것이 좋다.