프리렌더링이란?
프리렌더링(Pre-rendering)은 웹 페이지의 HTML을 미리 생성해두는 기술이다.
주로 SPA의 SEO 문제를 해결하기 위해 사용한다.
- 빌드 시점에 애플리케이션의 각 경로(route)에 대한 HTML을 미리 생성하는 프로세스
- 실제 요청이 들어오기 전에 정적 HTML 파일을 준비해두는 방식
작동 방식
- 빌드 타임에 실행
- 애플리케이션을 빌드할 때 모든 페이지의 HTML을 미리 생성
- 각 라우트별로 별도의 HTML 파일이 만들어짐
- 서버 응답
- 사용자가 페이지를 요청하면 미리 생성된 HTML을 즉시 제공
- 이후 JavaScript가 로드되면 일반적인 SPA처럼 동작
장점
- 더 나은 SEO
- 검색 엔진이 미리 생성된 HTML을 크롤링할 수 있음
- JavaScript 실행 없이도 콘텐츠가 보임
- 빠른 초기 로딩
- 서버에서 처리할 필요 없이 정적 파일을 바로 제공
- First Contentful Paint(FCP) 시간 개선
단점
- 빌드 시간 증가
- 모든 페이지를 미리 생성해야 해서 빌드 시간이 길어짐
- 동적 콘텐츠 한계
- 자주 변경되는 콘텐츠는 적절하지 않음
- 실시간 데이터를 보여주기 어려움
사용 사례
- 블로그, 문서 사이트
- 마케팅 페이지
- 제품 소개 페이지
- 정적인 콘텐츠가 많은 웹사이트
SSR과의 차이점
- SSR : 요청 시점에 HTML 생성
- 프리렌더링 : 빌드 시점에 HTML 생성
➡️ 프리렌더링은 Next.js나 Gatsby 같은 프레임워크에서 기본적으로 지원하며, SPA의 SEO 문제를 해결하면서도 정적 호스팅의 이점을 가져갈 수 있는 좋은 대안이다.
아무튼, 개발자