Next.js_SSR,CSR,ISR_차이

서버 사이드 렌더링(SSR)

서버 사이드 렌더링은 서버에서 페이지를 렌더링하고 완성된 HTML을 클라이언트로 보내는 방식임.

Next.js 14 버전 이상 에서는 서버 컴포넌트를 활용하여 구현할 수 있음.

장점

• SEO 친화적: 서버에서 완성된 HTML을 제공하므로 검색 엔진이 페이지를 쉽게 크롤링할 수 있음.
• 빠른 초기 로딩 시간: 초기 페이지 로드 시 완성된 HTML을 제공하므로 초기 로딩 시간이 빠름.

단점

• 서버 부하 증가: 모든 요청에 대해 서버에서 렌더링을 수행하므로 서버 부하가 증가할 수 있음.
• 느린 인터랙티브성: 클라이언트 측에서 추가적인 자바스크립트를 로드하고 실행해야 하므로 인터랙티브해지기까지 시간이 걸릴 수 있음.

예제 코드 (Next.js 14.2.3):

// app/page.server.js
import React from 'react';

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

const HomePage = async () => {
  const data = await fetchData();

  return (
    <div>
      <h1>SSR Example</h1>
      <p>Data: {data}</p>
    </div>
  );
};

export default HomePage;

클라이언트 사이드 렌더링(CSR)

클라이언트 사이드 렌더링은 브라우저에서 자바스크립트를 실행하여 페이지를 렌더링하는 방식임. 이 방식은 React와 같은 SPA(Single Page Application)에서 일반적으로 사용됨.

장점

• 서버 부하 감소: 초기 로드 후 클라이언트에서 모든 렌더링을 처리하므로 서버 부하가 적음.
• 빠른 인터랙티브성: 초기 로드 후 클라이언트 측에서 모든 것을 처리하므로 빠른 인터랙티브성을 제공함.

단점

• SEO 비친화적: 초기 로드 시 빈 HTML을 제공하고 나중에 자바스크립트로 렌더링하므로 검색 엔진이 페이지를 크롤링하기 어려움.
• 느린 초기 로딩 시간: 초기 로드 시 모든 자바스크립트 파일을 로드하고 실행해야 하므로 초기 로딩 시간이 길어질 수 있음.

예제 코드 (Next.js 14.2.3):

// app/page.client.js
import React, { useEffect, useState } from 'react';

const HomePage = () => {
  const [data, setData] = useState(null);

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

  return (
    <div>
      <h1>CSR Example</h1>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
};

export default HomePage;

증분 정적 재생성(ISR)

증분 정적 재생성은 Next.js에서 제공하는 기능으로, 정적 페이지를 미리 생성하고 필요할 때마다 업데이트하는 방식임. server component를 활용한 데이터 패칭 과 revalidate 옵션을 사용하여 구현할 수 있음.

장점

• SEO 친화적: 정적 페이지를 미리 생성하므로 검색 엔진이 쉽게 크롤링할 수 있음.
• 빠른 로딩 시간: 정적 파일을 제공하므로 빠른 로딩 시간을 제공함.
• 동적 데이터 지원: 특정 시간 간격으로 페이지를 재생성하여 동적 데이터를 반영할 수 있음.

단점

• 복잡한 설정: 페이지의 재생성 주기를 설정하고 관리해야 하므로 설정이 다소 복잡할 수 있음.
• 최신성 문제: 재생성 주기 사이에 데이터가 업데이트되지 않으면 최신 정보를 반영하지 못할 수 있음.

예제 코드 (Next.js 14.2.3):

// app/page.server.js
import React from 'react';

export const revalidate = 10; // 10초마다 페이지를 재생성

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

const HomePage = async () => {
  const data = await fetchData();

  return (
    <div>
      <h1>ISR Example</h1>
      <p>Data: {data}</p>
    </div>
  );
};

export default HomePage;