웹 애플리케이션을 개발할 때, 성능과 사용자 경험을 최적화하기 위해 올바른 렌더링 전략을 선택하는 것이 중요합니다. Server-Side Rendering(SSR)과 Client-Side Rendering(CSR)의 차이점을 설명하고, 프로젝트에 어떤 접근 방식이 더 적합한지 설명드리겠습니다.
Server-Side Rendering(SSR)이란?
Server-Side Rendering(SSR)은 웹 페이지를 브라우저가 아닌 서버에서 렌더링하는 방법입니다. 사용자가 페이지를 요청하면 서버가 완전한 HTML을 생성하여 클라이언트에 보냅니다.
-
SEO 향상: 검색 엔진이 완전히 렌더링된 HTML 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있습니다.
-
빠른 초기 로드: HTML이 미리 렌더링되어 사용자에게 더 빠르게 표시됩니다.
-
저사양 장치에서의 성능 향상: 렌더링이 서버에서 이루어져 클라이언트 장치의 부하가 줄어듭니다.
Next.js 14 App Directory SSR 예시)
// app/page.js
import { Suspense } from 'react';
async function fetchData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}
export default async function Page() {
const data = await fetchData();
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}
Client-Side Rendering(CSR)이란?
Client-Side Rendering(CSR)은 브라우저에서 JavaScript를 사용하여 웹 페이지를 렌더링하는 방법입니다. 서버가 보내는 초기 HTML은 최소한이며, JavaScript가 콘텐츠를 동적으로 로드하고 렌더링합니다.
-
풍부한 인터랙티브성: CSR은 매우 인터랙티브한 사용자 인터페이스를 가능하게 합니다.
-
서버 부하 감소: 서버는 정적 자산만 제공하면 되므로 렌더링 작업이 클라이언트로 오프로드됩니다.
-
매끄러운 전환: CSR은 전체 페이지를 다시 로드하지 않고도 부드럽고 빠른 페이지 전환을 제공합니다.
Next.js 14 App Directory를 사용하는 CSR 예시
// app/page.js
'use client';
import { useEffect, useState } from 'react';
export default function Page() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
if (!data) return <div>Loading...</div>;
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}주요 차이점
-
SEO: SSR은 SEO에 더 유리합니다.
-
성능: SSR은 초기 로드 시간이 더 빠르고, CSR은 후속 상호작용에서 더 나은 성능을 제공합니다.
-
복잡성: SSR 설정은 서버 구성 및 관리를 필요로 하기 때문에 더 복잡할 수 있습니다.