[ Next.js ] 사전 렌더링 이해하기

세감 서비스에서 Next.js14를 사용하기 때문에 Nextjs 공부를 진행하려 한다.

감자 탈출기 On ...

 

인프런에서 이정환 님의 <한 입 크기로 잘라먹는 Next.js(v15) 강의를 결제했다!

2024년 8월 기준으로 제작된 강의다!

Next.js란?

: React.js 전용 웹 개발 프레임워크(라이브러리X)로 react.js보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공한다. 예를 들어, 페이지 라우팅, 빌트인 최적화 기능, 다이나믹 HTML 스트리밍 등의 기능이 추가되었다.

: 리엑트에 비해 자유도는 낮지만 그만큼 웹개발에 있어 필요한 거의 모든 기능들을 제공한다.

 

---

렌더링

1. JS 실행 : 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정을 의미

2. 화면에 렌더링 : HTML 코드를 브라우저가 화면에 그려내는 작업을 의미

 

사전 렌더링(Pre Rendering)

: 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식 / CSR(Client Side Rendering)의 단점을 효율적으로 해결하는 기술

 

 

*CSR = react.js의 기본적인 렌더링 방식으로 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식이다.

 

	Pre-rendering	CSR(Client Side Rendering)
렌더링 과정	유저가 브라우저(클라이언트)를 통해 서버로 초기 접속 요청을 보내면, 서버는 js로 작성된 모든 react 컴포넌트들을 html로 변환(렌더링) 후 렌더링 된 HTML을 브라우저에 응답함.(화면 보임!)  이후 클릭이나 페이지 이동 등의 인터렉션(상호작용)이 작동하도록 하기 위해 서버에서 JS Bundle을 브라우저로 보내고 브라우저는 JS를 실행시킨다(html과 연결). 이 작업을 Hydration이라 하고 상호작용까지 가능해진 이 시점을 TTI(Time To Interactive)라 한다. 페이지의 이동은 CSR 방식으로 처리된다. (유저에서 브라우저로 페이지 이동 요청 -> 브라우저에서 js 실행(컴포넌트 교체) -> 브라우저에서 유저로 페이지 교체)	유저가 브라우저(클라이언트)를 통해 서버로 초기 접속 요청을 보내면, 서버는 빈껍데기 파일인 index.html을 브라우저로 보내고 브라우저는 유저에게 빈 화면을 렌더링 시킨다. 그리고 서버는 js 코드들을 하나의 js 파일로 묶어서 (JS Bundling) 후속으로 브라우저에 보내고, 브라우저는 JS를 실행해 컨텐츠를 렌더링 해 유저로 보낸다.
장점	기존 React App의 초기 접속 속도가 느리다는 단점을 해결해 빠른 FCP를 달성했고 페이지 이동에는 React App의 장점을 승계해 빠른 페이지 이동이 가능하다.	초기 접속 이후 페이지 이동이 매우 빠르고 쾌적함 - JS Bundle에 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재하기 때문에 새로운 페이지를 요청할 필요가 없음. 유저에게서 페이지 이동 요청이 오면 브라우저에서 js를 실행시켜 컨텐츠를 렌더링 해 유저에게로 보낸다.
단점	제약 사항 : 콘턴체가 자주 변경되는 경우 실시간 업데이트의 어려움이 있을 수 있음.	초기 접속 속도가 느리다 (치명적 단점) - 요청의 시작 시점부터 브라우저가 화면에 컨텐츠가 처음 나타나는데 걸리는 시간(FCP : First Contentful Paint)이 렌더링 과정을 보면 오래 걸릴 수 밖에.

=> 사전 렌더링과 클라이언트 사이드 렌더링 비교

https://digitalbourgeois.tistory.com/382 << CSR vs SSR vs Pre-rendering 비교 블로그로 잘 정리되어 있어서 참고하면 좋을듯하답!