Next.js 렌더링 과정

bebrain·2023년 1월 31일
0

React.js는 Client-Side-Rendering방식으로 텅 비어있는 HTML<div>root</div>를 우선 불러오고 뒤에 자바스크립트파일을 불러오기 때문에 인터넷이 느린 경우 유저가 빈 화면만 보게 된다.

CSR

브라우저가 유저가 보는 Ui를 만든다.
브라우저가 HTML을 가져올 때 비어있는 div만을 가져오고 모든 javascript파일을 요청하면 js가 실행, 비로소 Ui가 완성되어 유저에게 보여 진다.

그에 반해 Next.js는 백엔드에서 React.js를 동작시켜 HTML로 페이지를 우선 만들어 주는 React framework이다.

Next.js가 HTML로만 구성된 페이지를 우선 그려주면 유저는 빈 화면이 아닌 HTML 페이지를 보게 되고, 그 동안 브라우저가 모든 js파일을 다운로드하여 React.js가 그때부터 중점적으로 돌아가는 방식이다.


Next.js는 SSR, CSR 둘다 사용가능

0개의 댓글