기존 SPA의 Client-side 랜더링의 문제점
웹 페이지의 랜더링이 클라이언트 = 브라우저 측에서 일어나는 것을 의미한다.
브라우저가 최초 요청 시 html,css,js 확장자 파일을 차례로 다운로드하는데,
최초로 불러온 HTML 파일은 비어있게 된다.
그 후 빈 HTML 파일에 js 파일이 다운로드되면 DOM을 빈 HTML 위에서 그리기 시작한다.
그래서 디버거 모드에서 자바스크립트 사용 중지를 하게 된다면, DOM을 페이지 위에서 그리지 못하므로
빈 페이지가 나오게 된다.
Nextjs의 pre-rendering
Next js는 기본적으로 모든 페이지를 pre-rendering한다.
Next js에서는 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해 pre-rendering을 수행한다.
즉, Next js가 client-side-javascript로 모든 작업을 수행하는 것이 아님을 의미한다.
이렇게 pre-rendering을 수행하면 기존 SPA의 SEO보다 더 좋은 퍼포먼스를 보여줄 수 있다.
pre-rendering vs No-pre-rendering
No -pre-rendering
pre-rendering이 존재하지 않는다면, JS 전체가 로드되어야 하기 떄문에 최초 로드에서 사용자에게
보여지지 않는다.
최종적으로 전체 페이지가 로드되기 전까지 페이지를 볼 수 없게 된다.
Pre-rendering
Initial Load : JS 동작이 없는 HTML을 먼저 화면에 보여준다.
Hydration : Inital Load 이후 JS 파일을 HTML에 연결하는 과정으로 React 컴포넌트들이 초기화 되는 과정이 포함된다.
Pre-rendering의 2가지 모드
Pre-rendering에는 2가지의 모드가 존재한다. Static Generation과 Server-side-Rendering이다.
Static Generation : 정적 사이트 생성
정적 사이트 생성(SSG)는 빌드 시 리액트 앱을 HTML로 미리 랜더링한다.
Next js 내부에 존재하는 pre-rendering 메서드가 최초 HTML을 빌드할 떄 동작한다.
SSG는 동일한 HTML을 매 요청마다 생성하는 SSR의 단점을 보완하기 위해 탄생한 방법이다.
Static Generation으로 생성된 페이지는 CDN에 캐싱되어서 다음 요청 떄 재사용되어진다.
function About() {
return <div>About</div>
}
export default About
위 코드는 외부의 추가적인 데이터가 필요하지 않다.
이런 경우 빌드 시 페이지당 단일 HTML 파일을 만들고, 다음 요청 떄 다시 사용된다.
Server-side Rendering(SSR)
HTML이 매 요청마다 생성되는 SSR방식은 SSG보다 항상 최신 상태를 유지한다는 장점이 있다.
https://nextjs.org/docs/basic-features/pages#static-generation-recommended
Basic Features: Pages | Next.js
Next.js pages are React Components exported in a file in the pages directory. Learn how they work here.
nextjs.org
언제 정적 사이트 생성을 사용하는 것이 좋을까?
페이지를 한번 빌드하고 CDN을 통한 캐싱을 지원하므로 가능한 정적 생성 방식을 사용하는 것이 좋다.
예시)
- 마케팅 페이지
- 블로그 게시물 및 포트폴리오
- 전자상거래 제품 목록
- 도움말 및 설명서
반면 SSR을 사용해야 할 떄는 다음과 같은 경우이다.
- 동적인 데이터가 포함된 페이지 (예: 로그인된 사용자 정보)
- 검색 엔진 최적화(SEO)가 필요한 페이지 (검색 엔진이 자바스크립트를 실행할 수 없는 경우)
- 서버에서 추가 로직을 처리해야 하는 경우 (예: 인증, API 호출)
+ 더 공부할 것들 : Pre-rendering의 메서드들!