Pre-rendering
사전 렌더링 (Pre-Rendering)
사전 렌더링은 브라우저의 요청 이전에, 서버에서 미리 HTML을 만들어 응답하는 방식이다.
- React 앱의 느린 초기 렌더링(FCP)을 보완하고
- 사용자가 화면을 더 빠르게 확인할 수 있게 한다.
즉, JS가 실행되기 전에 HTML로 먼저 화면을 보여준다.
🧩 FCP (First Contentful Paint)
"요청 시작" 시점으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간
→ 사용자가 처음으로 화면을 인식하는 시점
⚛ React의 기존 렌더링 방식: CSR
React 앱은 기본적으로 Client Side Rendering(CSR) 방식이다.
브라우저가 JavaScript를 다운로드하고 실행한 뒤, 그 결과로 화면을 렌더링한다.
- 서버에서 거의 비어 있는 HTML 응답
- 브라우저에서 JS 번들 다운로드
- React가 실행되며 DOM 생성
- 화면 렌더링
- 장점: 초기 로딩 이후 페이지 이동이 빠르다 (SPA의 장점)
- 단점: 첫 화면을 보기까지 오래 걸린다 (FCP 지연)
React의 데이터 페칭 (CSR)
React에서는 컴포넌트가 마운트된 이후에 데이터를 가져온다.
즉, 렌더링 이후에 데이터 요청이 발생하는 구조다.
export default function Page() {
// 1. 불러온 데이터를 보관할 State 생성
const [state, setState] = useState();
// 2. 데이터 페칭 함수 생성
const fetchData = async () => {
const response = await fetch('...');
const data = await response.json();
setState(data);
};
// 3. 컴포넌트 마운트 시점에 fetchData 호출
useEffect(() => {
fetchData();
}, []);
// 4. 데이터 로딩중일때의 예외처리
if (!state) return 'Loading...';
return <div>...</div>;
}특징
- 최초 렌더링 시에는 데이터가 없는 상태
useEffect실행 후 데이터 요청 발생- 로딩 UI가 반드시 필요
한계
- 화면이 먼저 뜨고, 데이터는 나중에 도착
- 초기 UX가 느릴 수 있음
- 검색 엔진이 완성된 HTML을 바로 받지 못함
즉, 보여주고 → 가져오는 구조다.
Next.js의 사전 렌더링
Next.js에서는 렌더링 이전에 데이터를 가져올 수 있다.
이를 사전 렌더링(Pre-rendering)이라고 한다.
특징
- 서버에서 데이터를 미리 가져옴
- 데이터가 포함된 완성된 HTML을 생성
- 브라우저는 완성된 페이지를 바로 받음
장점
- 첫 화면이 빠르게 보임
- SEO에 유리
- 로딩 UI가 필요 없는 경우도 많음
단점
- 데이터가 자주 바뀌는 경우에는 적합하지 않을 수 있음
즉, 가져오고 → 보여주는 구조다.
Next.js는 이러한 사전 렌더링 전략을 상황에 맞게 선택할 수 있도록 세 가지 렌더링 방식을 제공한다.
🧩 사전 렌더링 방식 요약
| 방식 | 렌더링 시점 | 데이터 최신성 | 응답 속도 |
|---|---|---|---|
| SSR | 요청 시 | 항상 최신 | API 의존 |
| SSG | 빌드 시 | 빌드 시점 고정 | 가장 빠름 |
| ISR | 빌드 시 + 주기적 재생성 | 주기적 갱신 | 빠름 |
SSR (Server-Side Rendering)
SSR은 요청 시점마다 서버에서 HTML을 생성하는 렌더링 방식이다.
실시간 데이터가 필요한 페이지, 사용자별 개인화 페이지에 적합하다.
특징
- 매 요청마다 최신 데이터 보장
- 사용자별 맞춤 데이터 처리 가능
단점
- 요청마다 서버 부하 발생
- 응답 속도가 API 성능에 의존
- 트래픽이 많을 경우 서버 비용이 빠르게 증가할 수 있음
SSG (Static Site Generation)
SSG는 빌드 시점에 서버가 HTML을 미리 생성하는 렌더링 방식이다.
블로그, 마케팅 페이지, 문서 사이트 등 변경이 적은 콘텐츠에 적합하다.
특징
- 빌드 시 서버에서 API 요청 후 HTML 생성
- 요청 시 서버 연산 없이 바로 응답
- 가장 빠른 응답 속도
단점
- 빌드 이후 데이터 변경 반영 불가
- 데이터가 크거나 API가 느리면 빌드 시간 증가
ISR (Incremental Static Regeneration)
ISR은 정적 페이지를 유지하면서 일정 주기로 HTML을 재생성하는 방식이다. 완전히 실시간일 필요는 없지만, 최신에 가까운 데이터를 보여줘야 하는 콘텐츠에 적합하다.
특징
- 빌드 타임에 정적 페이지 생성
- 설정한 주기마다 백그라운드에서 페이지 재생성
- 정적 페이지의 성능을 유지하면서도 일정 수준의 데이터 최신성을 확보할 수 있음