[TIL] 3/11 next.js(2) 4가지 렌더링

1. 클라이언트 사이드 렌더링 CSR(Client Side Rendering)

 - 페이지의 정적인 부분만 서버에서 생성하고, 데이터는 클라이언트에서 자바스크립트를 통해 동적으로 렌더링

 

장점 :

  - 서버의 부담 감소

  - 최초 한번 로드가 끝나면 사용자와 빠르게 상호작용 가능

  - 서버에게 추가적인 요청을 보낼 필요가 없어 사용자 경험이 좋다

 

단점 :

  - 첫 페이지 로딩시간(Time To View)이 길 수 있다

  - js가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리하다

 

'use client';
import { useEffect, useState } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://api.example.com/data');
      const result = await res.json();
      setData(result);
    }

    fetchData();
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

 

2. 정적 사이트 생성 SSG(Static Site Generation)

 - 서버에서 페이지를 렌더링하여 정적인 HTML을 미리 만들어 놓고 이를 사용자에게 제공

 - 최초 빌드시에만 생성됨

 - 사전에 미리 정적 페이지 여러개 만들어놓음 -> 클라이언트가 홈페이지 요청하면 서버에서는 이미 만들어져있는 사이트 바로 제공
    -> 클라이언트는 표기만 함

 

장점 :

  - 첫 페이지 로딩 시간이 매우 짧아서 사용자가 빠르게 페이지 볼 수 있음

  - SEO에 효과적
  - CDN(Content Delivery Network) 캐싱 가능

 

단점 :

  - 데이터가 변경되지 않는 정적 컨텐츠에만 적합

  - 사용자와의 상호작용이 서버 통신에 의존하기 때문에, CSR보다 상호작용이 느릴 수 있다
  - 서버 부하가 클 수 있다

// page.jsx
export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: 'force-cache' });
  const data = await res.json();

  return <div>{data.message}</div>;
}

 

3. 부분 정적 재생성 ISR(Incremental Static Regeneration)

 - 설정한 주기만큼 페이지를 다시 생성하여 캐시된 정적인 페이지 제공 -> SSR과 SSG의 중간 상태
 - 정적 페이지를 먼저 보여주고, 필요에 따라 서버에서 페이지 재생성하는 방식

 

장점 :

  - 정적 페이지를 먼저 제공하기 때문에 사용자 경험이 좋다
  - 컨텐츠가 변경되었을 때 서버에서 페이지를 재생성하여 최신 상태를(어느정도) 유지할 수 있다
  - CDN 캐싱 가능

 

단점 :

  - 동적인 컨텐츠를 다루기에 한계가 있다(실시간 페이지 아님)

  - 마이페이지처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

// page.jsx
export default async function Page() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 } });
  const data = await res.json();

  return <div>{data.message}</div>;
}

 

4. 서버 사이드 렌더링 SSR(Server Side Rendering)

 - SSG, ISR처럼 렌더링 주체가 서버이다

 - 서버가 클라이언트의 요청 시마다 데이터를 가져와 HTML을 생성하여 응답하는 방식

 - 최신 데이터를 가져오지만 요청할 때마다 데이터를 가져오기 때문에 서버 부담이 클 수 있다

 

장점 :

  - 항상 최신 데이터 표시 가능

  - 빠른 로딩 속도(TTV)와 높은 보안성 제공

  - SEO 최적화 좋음

  - 마이페이지처럼 데이터에 의존한 페이지 구성 가능

  - CDN 캐싱 불가

 

단점 :

  - 사이트의 컨텐츠가 변경되면 전체 사이트를 다시 빌드해야하는데 이 과정이 시간이 오래 걸릴 수 있다 -> 서버 과부하

  - 요청할 때마다 페이지 만들어야 함

// page.jsx
export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await res.json();

  return <div>{data.message}</div>;
}

렌더링 방식	응답 시간	데이터 최신성	빌드 시간	성능	SEO	추천 사용 사례
SSR	길다	높음	짧다	중간	좋음	자주 바뀌는 실시간 데이터
CSR	보통	높음	짧다	높음	나쁨	즉각 로딩이 느려도 되는 데이터
ISR	짧다	중간	길다	높음	좋음	블로그나 뉴스 사이트
SSG	짧다	낮음	길다	매우 높음	좋음	거의 바뀌지 않는 마케팅 페이지