[넥스트(Next.JS) CSR, SSR, SSG, ISR의 정리

주요 렌더링 기법

1. CSR(Client Side Rendering)

• 특징
  • 순수 리액트 사용했을 때 100%
  • 브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링 하는 방식
  • 렌더링의 주체 : 클라이언트
• 장점
  • (최초 한번 로드가 끝나면) 사용자와의 상호작용이 빠르고 부드럽다.
  • 서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋다.
  • 서버 부하가 적음
• 단점
  • 첫 페이지 로딩 시간(Time To View)이 길 수 있음.
  • JavaScript가 로딩되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리.
• 코드

'use client';

import React, { useEffect, useState } from 'react';

const CSRPage = () => {
  const [data, setData] = useState();
  useEffect(() => {
    const fetchData = async () => {
      const req = await fetch(`https://catfact.ninja/fact`);
      const res = await req.json();
      setData(res.fact);
    };

    fetchData();
  }, []);

// UX 처리
  if (!data) {
    return <div>로딩중이에요/........</div>;
  }

 

2. SSG(Static Site Generation)

• 서버에서 페이지를 렌더링 하여 클라이언트에게 HTML을 전달하는 방식.
• 최초 빌드 시에만 생성이 됨
• 사전에 미리 정적페이지를 여러 개 만들어놓음 → 클라이언트가 홈페이지 요청을 하면, 서버에서는 이미 만들어져 있는 사이트를 바로 제공! → 클라이언트는 표기만 함
• 장점
  • 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있습니다. 또한, SEO에 유리합니다.
  • CDN(Content Delivery Network) 캐싱 가능
• 단점
  • 정적인 데이터에만 사용할 수 있음
  • 사용자와의 상호작용이 서버와의 통신에 의존하므로, 클라이언트 사이드 렌더링보다 상호작용이 느릴 수 있습니다. 또한, 서버 부하가 클 수 있다.
  • 마이페이지처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가
• 코드

// server에서 page를 그리기 때문에 컴포넌트 자체에 비동기 처리 가능 (async)
const SSGPage = async () => {
  const req = await fetch(`https://catfact.ninja/fact`);
  const res = await req.json();

 

3. ISR(Incremental Static Regeneration)

• 특징
  • SSG처럼 정적 페이지를 제공
  • 설정한 주기만큼 페이지를 계속 생성해 줌
    • ex : 주기가 10분이라면? → 10분마다 데이터베이스 또는 외부 영향 때문에 변경된 사항을 반영하는 역할
  • 정적 페이지를 먼저 보여주고, 필요에 따라 서버에서 페이지를 재생성하는 방식.
• 장점
  • 정적 페이지를 먼저 제공하므로 사용자 경험이 좋으며, 콘텐츠가 변경되었을 때 서버에서 페이지를 재생성하므로 최신 상태를 (그나마) 유지할 수 있다.
  • CDN 캐싱 가능
• 단점
  • 동적인 콘텐츠를 다루기에 한계가 있을 수 있습니다. 실시간 페이지 아님
  • 마이페이지처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가
• 코드

const ISRPage = async () => {
  const req = await fetch('https://catfact.ninja/fact', {
    next: {
      revalidate: 5,
    },
  });
  const res = await req.json();

 

4. SSR(Server side Rendering)

• 특징
  • 빌드 시점에 모든 페이지를 미리 생성하여 서버 부하를 줄이는 방식.
  • SSG, ISR처럼 렌더링 주체가 서버!
  • 클라이언트의 요청 시 렌더링
    • C → S : 이 페이지 줘!
    • S → C : (데이터베이스 읽고 등등한 후) html 파일을 제공
• 장점
  • 빠른 로딩 속도(TTV)와 높은 보안성을 제공합니다.
  • SEO 최적화 좋음
  • 실시간 데이터를 사용
  • 마이페이지처럼 데이터에 의존한 페이지 구성 가능
  • CDN 캐싱 불가
• 단점
  • 사이트의 콘텐츠가 변경되면 전체 사이트를 다시 빌드해야 하는데, 이 과정이 시간이 오래 걸릴 수 있다. → 서버 과부하
  • 요청할 때마다 페이지를 만들어야 함
• 코드

const SSRPage = async () => {
  const req = await fetch('https://catfact.ninja/fact', {
    cache: 'no-cache',
  });
  const res = await req.json();

 

4. 종합