SSR(Server Side Rendering)과 CSR(Client Side Rendering)
SSR(Server Side Rendering)
SSR은 서버에서 데이터를 먼저 가져와서 사용자에게 제공하는 방식
Next.js에서는 getServerSideProps를 사용하여 구현
작동 방식
사용자가 페이지를 요청하면 서버가 해당 페이지에 필요한 데이터를 가져오고, 그 데이터를 포함한 HTML을 생성하여 브라우저로 전송
특징
서버에서 미리 데이터를 가져오기 때문에 사용자가 페이지를 열 때 바로 데이터가 로드된 상태로 보인다.
SEO에 유리. (검색 엔진이 데이터를 포함한 완전한 HTML을 크롤링)
매번 페이지 요청 시 서버에 요청하므로, 실시간 데이터를 제공해야 할 때 유용하다.
단점
모든 요청마다 서버에서 데이터를 가져오기 때문에 요청이 많아지면 서버 부하가 커질 수 있다.
사용자와의 상호작용이 필요한 경우 추가적인 클라이언트 사이드 작업이 필요할 수 있다.
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}CSR(Client Side Rendering)
클라이언트사이드 페칭은 페이지가 로드된 후, 브라우저에서 직접 데이터를 가져오는 방식
React에서는 useEffect와 같은 훅을 사용해 구현 가능하다.
작동 방식
초기 페이지 로드 시에는 HTML만 렌더링되고, 브라우저가 자바스크립트를 실행하여 필요한 데이터를 API로부터 가져온다.
특징
초기 로딩이 빠르다. HTML을 먼저 렌더링하고 데이터를 비동기적으로 가져오기 때문에 사용자 경험이 매끄러워진다.
서버 부하가 적다. 서버는 HTML만 제공하며, 데이터는 클라이언트에서 요청하기 때문
사용자와 상호작용이 많거나, 특정 이벤트에 따라 데이터를 가져와야 할 때 유리하다.
단점
검색엔진 최적화(SEO)가 어렵다.
초기 HTML에 데이터가 포함되지 않아 검색 엔진이 데이터를 제대로 크롤링하지 못할 수 있다.
초기 로드 후 데이터를 가져오기 때문에 페이지가 순간적으로 비어 보일 수 있다.
import { useEffect, useState } from 'react';
function Page() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const res = await fetch('https://api.example.com/data');
const result = await res.json();
setData(result);
}
fetchData();
}, []);
return (
<div>
{data ? (
<div>{data.content}</div>
) : (
<div>Loading...</div>
)}
</div>
);
}