24.09.25 nextjs의 4가지 주요 렌더링 기법

Nextjs의 4가지 주요 렌더링 기법은 CSR(Client Side Rendering), SSG(Static SIte Generation), ISR(Incremental Static Regeneration), SSR(Server Side Rendering)이 있다.

먼저 CSR부터 알아보자.

 

CSR

Client Side Rendering, 말 그대로 클라이언트 단에서 렌더링을 진행하는 것이다. 

특징	장점	단점
순수 리액트 사용했을 때	(최초 로드 후) 사용자와의 상호작용이 빠르고 부드러움	첫 페이지 로딩시간이 길 수 있다. TTV(Time To View)
브라우저에서 JS를 이용해 동적으로 페이지를 렌더링하는 방식	서버에게 추가 요청을 보내지 않아 사용자 경험이 좋음	JS가 로딩되고 실행될 때까지 페이지가 비어있어 SEO에 불리하다.
렌더링 주체: 클라이언트	서버 부하가 적음	-

/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";

import { PostListType } from "@/types/postTypes";
import { useEffect, useState } from "react";

const CSRPage = () => {
    const getPosts = async () => {
        const res = await fetch("http://localhost:4000/posts");
        const data = await res.json();
        return data;
    };
    console.log("rendered!");
    const [posts, setPosts] = useState<PostListType>([]);
    useEffect(() => {
        getPosts().then((res) => {
            setPosts(res);
        });
    }, []);
    return (
        <div>
            <h1>CSR PAGE</h1>
            <p>{JSON.stringify(posts)}</p>
        </div>
    );
};

export default CSRPage;

 

---

SSG

Static Side Generation, 서버에서 빌드 시 렌더링해두고 클라이언트에게 HTML을 전달하는 방식이다.

특징	장점	단점
서버에서 페이지를 렌더링하여 클라이언트에게 HTML을 전달함	첫 페이지 로딩시간이 매우 짧음(TTV) 사용자가 빨리 볼 수 있으며 SEO에 유리	정적 데이터만 사용가능
최초 빌드시에만 생성이 됨 단,revalidatePath나 revalidateTag를 사용하여 캐시를 최신화시킬 수 있음	CDN 캐싱 가능	사용자와의 상호작용이 서버와의 통신에 의존하므로 CSR보다 상호작용이 느릴 수 있음, 서버부하 커짐
-	-	마이페이지처럼 데이터에 의존하여 화면을 그려줄 경우 사용 불가함

const SSGPage = async () => {
    const res = await fetch("http://localhost:4000/posts", { cache: "force-cache" });
    const posts = await res.json();
    console.log("rendered!");
    return (
        <div>
            <h1>SSG PAGE</h1>
            <p>{JSON.stringify(posts)}</p>
        </div>
    );
};

export default SSGPage;

---

ISR

Incremental Static Regeneration, SSG처럼 정적 페이지를 제공하나, 설정된 주기마다 페이지를 계속 생성해줌

특징	장점	단점
SSG처럼 정적 페이지 제공	정적 페이지를 먼저 제공하므로 UX상승 콘텐츠가 변경되었을 때 서버에서 페이지를 재생성하여 최신상태를 그나마 유지가능	동적인 콘텐츠를 다루기에 한계가 있음 (항상 실시간이 아니기 때문)
설정한 주기마다 페이지를 계속 생성	CDN 캐싱 가능	마이페이지처럼 데이터의 의존하여 화면을 그려주는경우 사용 불가
정적 페이지를 먼저 보여주고 필요에 따라 서버에서 페이지를 재생성	-	-

import { PostListType } from "@/types/postTypes";

const ISRPage = async () => {
    const res = await fetch("http://localhost:4000/posts", {
        next: {
            revalidate: 300,
        },
    });
    const posts: PostListType = await res.json();
    console.log("rendered!");
    return (
        <div>
            <h1>ISR PAGE</h1>
            <p>{JSON.stringify(posts)}</p>
        </div>
    );
};

export default ISRPage;

---

SSR

Server Side Rendering, SSG, ISR처럼 렌더링 주체가 서버이지만, 클라이언트 요청시 렌더링을 한다.

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

const SSRPage = async () => {
    const res = await fetch("http://localhost:4000/posts", { cache: "no-store" });
    const posts = await res.json();
    console.log("rendered!");
    return (
        <div>
            <h1>SSR PAGE</h1>
            <p>{JSON.stringify(posts)}</p>
        </div>
    );
};

export default SSRPage;

---

	CSR	SSG	ISR	SSR
빌드 시간	짧다	길다	길다	짧다
SEO	나쁨	좋음	좋음	좋음
페이지 요청에 따른 응답 시간	보통	짧다	짧다	길다
최신 정보인가?	맞음	아님	아닐 수 있음	맞음