
- Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.
Pre-rendering 이란?
: Next.js에서는 Client-side로 페이지를 로드하기 전, 각 페이지에서 Pre-rendering을 한다.
이를 통해 얻을 수 있는 이점
- 초기 로딩이 빨라짐 (성능 향상)
- 검색 엔진에 최적화가 됨
React의 렌더링 방식
텅 빈 HTML을 받아와서 추후에 javascript로 페이지 컴포넌트를 생성
Next.js의 렌더링 방식
- 사전에 각 페이지를 만들어놓음 -> 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어 있음
- 정적 페이지에서 hydration이라는 프로세스를 거치며 인터렉티브한 페이지가 됨
프리렌더링의 방식
- 정적 생성 (Static Generation)
: 빌드하는 시점에 HTML을 렌더링 하는 방식
: 소스코드를 빌드하면서 파일로 미리 만들어놓았다가, HTML을 로드할 때 만들어둔 페이지를 보여줌
- 서버 사이드 렌더링 (Server-side-rendering)
: 웹 브라우저가 GET 리퀘스트를 보낼 때마다, 사이트를 렌더링 함 (리퀘스트가 들어오면 렌더링)
서버 사이드 렌더링을 고려하는 상황
- 항상 최신 데이터를 보여줘야 하는 경우
- 데이터가 자주 바뀌는 경우
- 리퀘스트의 데이터를 사용해야하는 경우
그 외에 특별한 이유가 없다면, 정적 생성을 하는 것이 좋다.
hydration이란?
서버에서 렌더링 된 HTML에 기반하여, 클라이언트에서 JavaScript 이벤트와 상태를 연결하는 과정
출처
프리렌더링
코드잇 Next.js로 웹사이트 만들기 강좌
'🗂️ 개발 이모저모' 카테고리의 다른 글
| [CSS] Box Model (2) | 2024.05.29 |
|---|---|
| Redux의 기본 구조와 사용법을 익혀보자! (1) | 2024.05.06 |
| TypeScript의 동작원리 & Next.js를 사용하는 이유 (1) | 2024.03.24 |
| Git merge의 방법 & Git Flow Branch전략 (1) | 2024.03.22 |
| Sementic Tag & Position (0) | 2024.03.14 |