Next.js 14로 알아보는 SSR, CSR, ISR 렌더링 전략 정리

Ryomi·2025년 4월 2일

React next.js

“React는 왜 SEO에 약할까?
그 단점을 보완하기 위해 등장한 Next.js,
그리고 그 핵심인 SSR, CSR, ISR!
이 글 하나로 완벽하게 정리해드립니다. ✨”

🐣 React에서 시작된 이야기

React는 빠르고 유연한 UI 라이브러리지만 초기에는 오직 CSR(Client Side Rendering)만 지원했어요.

📉 그로 인해 생긴 문제들:

검색 엔진이 콘텐츠를 제대로 인식하지 못함 (SEO 약함)
첫 화면 렌더링까지 시간이 오래 걸림
JS가 비활성화된 브라우저에선 화면이 보이지 않음

이러한 한계를 극복하기 위해 등장한 것이 바로…

🚀 Next.js — React의 서버사이드 렌더링을 가능하게!

Next.js는 React 기반의 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 다양한 렌더링 방식을 지원합니다.

✅ React + SSR = Next.js
✅ React의 SEO 문제 해결
✅ 초기 로딩 속도 개선
✅ 파일 기반 라우팅, 이미지 최적화, App Router 등 강력한 기능!
✅ SSG, ISR 등 정적 생성 기능 제공

⚔️ SSR vs CSR, 렌더링 방식 비교

Next.js는 다양한 렌더링 방식을 지원하는 하이브리드 프레임워크입니다.
그 중 가장 대표적인 두 가지 방식은 SSR과 CSR입니다.

항목	SSR (Server Side Rendering)	CSR (Client Side Rendering)
렌더링 위치	서버에서 HTML 생성	브라우저에서 JS로 렌더링
초기 속도	빠름 ⚡	JS 실행 이후 렌더링됨 🐢
SEO	HTML 기반 → 우수함 👍	JS 기반 → 제한적 👎
UX 반응성	다소 느릴 수 있음	매우 빠름
코드 예시	`getServerSideProps`	`useEffect`, `"use client"`

🌐 SSR (서버 사이드 렌더링)

Next.js 14에서도 SSR은 getServerSideProps로 처리할 수 있어요.

// pages/news.tsx
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/news");
  const data = await res.json();

  return { props: { data } };
}

장점:

검색 엔진이 쉽게 콘텐츠를 크롤링함 (SEO에 유리)
초기 페이지 로딩이 빠름

단점:

서버에 부담이 큼
트래픽이 많을수록 성능 저하 가능성 존재

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

초기엔 HTML + JS만 받고, 브라우저가 JS를 실행해서 화면을 구성합니다.

// app/page.tsx
"use client";

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("/api/news")
      .then((res) => res.json())
      .then(setData);
  }, []);

  return <div>{JSON.stringify(data)}</div>;
}

장점:

인터랙티브한 앱 구현에 유리
상태 기반 렌더링이 유연하게 가능

단점:

초기 로딩이 느릴 수 있음
JS 실행 전까지 빈 화면 → SEO에 불리함

🆕 더 다양해진 렌더링 전략 (SSG, ISR 포함)

Next.js는 SSR과 CSR 외에도
정적인 콘텐츠를 사전에 생성해두는 SSG (Static Site Generation),
정적 페이지를 일정 시간마다 재생성하는 ISR (Incremental Static Regeneration)
전략도 제공합니다.

이러한 방식은 성능 최적화와 데이터 최신성을 동시에 만족시킬 수 있습니다.

✅ 서버 컴포넌트 예시 (기본값이 SSR)

// app/posts/page.tsx
export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts", {
    cache: "no-store",
  });
  const data = await res.json();

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

✅ 클라이언트 컴포넌트 예시 (CSR 방식)

// app/profile/page.tsx
"use client";

import { useState, useEffect } from "react";

export default function ProfilePage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then(setUser);
  }, []);

  return <div>{user?.name}</div>;
}

🔁 ISR (Incremental Static Regeneration)

정적으로 생성한 페이지를 주기적으로 갱신하는 방식입니다.
정적인 속도 + 최신 데이터를 동시에 얻을 수 있어 제품 목록 페이지, 블로그 등에 자주 쓰입니다.

처음 요청 시에는 기존 HTML을 빠르게 전달하고,
백그라운드에서 새로운 버전의 HTML을 생성합니다.
revalidate 속성으로 재생성 주기를 설정할 수 있어요.
예: export const revalidate = 60; → 60초마다 페이지 갱신

// ISR: revalidate 예시
export const revalidate = 60; // 60초마다 재생성

ISR이 유리한 예시

콘텐츠는 자주 바뀌지만 실시간일 필요는 없는 경우
인기 글 목록, 상품 목록 등

💡 언제 SSR, CSR, ISR을 쓰면 좋을까?

상황	추천 렌더링 방식	이유
블로그, 뉴스, 상품 상세 페이지	SSR 또는 SSG 또는 ISR	콘텐츠 위주, SEO 중요
관리자 대시보드, 채팅, 마이페이지	CSR	인터랙션 많음, 빠른 UX
로그인 후 사용자 정보 표시	SSR + CSR 조합	인증 체크 → 클라이언트 렌더링
상품 목록, 인기 포스트 리스트	ISR	빠른 로딩 + 주기적 갱신