[Next.js 14] App Router 로 구현 해보는 SSR, SSG, ISR

houndhollis·2024년 9월 11일

next.js

글을 쓴다는 건 참 힘든 것인거 같다 그래도 이렇게 쓰는 나 강하다는 증거.

언제나 좋은 정보 유용한 글을 쓰고 싶지만 참 힘든거 같습니다.
본론으로 들어가서!

SSR (Server-Side Rendering)

페이지 요청 시 서버에서 HTML을 생성하여 클라이언트에 전달을 해줍니다.

실시간 데이터가 필요하거나 페이지가 요청될 때마다 최신 정보를 반영해야 할 때.

클라이언트 요청 시마다 서버에서 데이터를 가져와 페이지를 렌더링 시킵니다. 데이터가 최신 상태로 유지되지만 서버의 부하가 증가할 수 있으며, 서버 응답 시간이 길어질 수 있습니다.

SSR 구현

export default async function Page() {
  const response = await fetch("https://api.adviceslip.com/advice", {
    cache: "no-store",
  });
  const data = await response.json();

  return (
    <div>
      <h2>SSR 페이지</h2>
      <p>{JSON.stringify(data.slip.advice)}</p>
    </div>
  );
}

cache 옵션을 'no-store' 를 사용하여 매 요청 시 서버에서 데이터를 다시 가져옵니다.

새로고침 할 떄 마다 새로운 advice 를 가지고 오는 모습을 볼 수 있습니다.

SSG (Static-Site Generation)

빌드 시 데이터를 가져와 정적인 HTML 파일을 생성하여 클라이언트에게 제공합니다.
데이터가 자주 변하지 않거나, 페이지가 생성된 후 변동이 적은 경우가 적합하다고 생각합니다. 예를 들어 최근에 학습 강의중 영화 썸네일 페이지가 잇었습니다. 해당 페이지 처럼 크게 변동사항이 없는 경우가 어울리겠습니다.

페이지가 빌드될 때 데이터가 요청되고, 그 데이터를 기반으로 HTML이 생성됩니다.

정적 페이지로 제공되면 사용자는 빠른 응답 속도를 경험할수 있고 서버의 부하가 적고 CDN을 통해 빠르게 서빙할 수 있습니다.

SSG 구현

export default async function Page() {
  const response = await fetch("https://api.adviceslip.com/advice", {
    cache: "force-cache",
  });
  const data = await response.json();

  return (
    <div>
      <h2>SSR 페이지</h2>
      <p>{JSON.stringify(data.slip.advice)}</p>
    </div>
  );
}

코드는 크게 달리지지 않습니다 다만,

force-cache를 사용하여 페이지를 정적으로 생성하고, 이후 요청에 대해서는 캐시된 데이터를 사용합니다.

새로고침을 계속 했음에도,
캐쉬된 데이터만 계속 나오는 것을 볼 수 있습니다.

ISR (incremental Static Regeneration)

SSG와 유사하지만, 페이지를 주기적으로 재생성 하여 최신 데이터를 반영할 수 있습니다.

데이터가 자주 변하지만, 전체 페이지를 매번 최신화 할 필요가 없는 경우

revalidate 옵션을 통해 주기적으로 페이지를 재생성 할 수 있습니다.
빠른 응답 속도와 서버 부하를 유지하면서, 데이터의 최신성을 확보할 수 있고 사용자 요구에 따라 페이지를 자동으로 갱신할 수 있습니다.

ISR 구현

export default async function Page() {
  const response = await fetch("https://api.adviceslip.com/advice", {
    cache: "force-cache",
    next: { revalidate: 5 },
  });
  const data = await response.json();

  return (
    <div>
      <h2>ISR 페이지</h2>
      <p>{JSON.stringify(data.slip.advice)}</p>
    </div>
  );
}

revalidate 를 사용함으로, 5초 이전까지는 캐쉬된 데이터를 사용하고, 이후 에는 설정된 주기에 따라 서버에서 새로운 데이터를 요청하고, HTML 파일을 갱신합니다.
처음 빌드 된 이후
--- 5초후 ---
값이 변화된 것을 볼 수 있습니다.
ISR을 활용하면 실시간으로 자주 업데이트가 필요하지 않지만, 데이터의 최신 상태를 보장해야 하는 페이지에 적합합니다.