pre rendering

NextJS의 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것이라고 한다. 이것들이 정적(static)으로 생성된다고하는데, 뭔지 알아보자.

먼저 create react app 은 client side render을 하는 앱을 만드는데, csr이란 내 브라우저가 user가 보는 UI를 만드는 모든 것을 한다는 것을 의미한다. 즉, 브라우저가 react.js를 다운받고, 코드를 다운받고, 거기에 js만 동작하면서 데이터를 주고 받아서 렌더링을 진행한다.

정리해보면, 브라우저가 html을 가져올 때, 빈div로 가져오고, 거기에 js가 동작해서 브라우저를 채운다.! 즉 , js가 꺼져있으면 웹이 뜨지 않고, js가 켜져 있을 때, 초기에 모든걸 다 불러오기에 첫 구동속도가 느릴 수 있다. 그래서 사람들은 흰 화면만 보다가 나중에 loading이 돌아가는걸 보게 될 수 있다.

 

그렇지만, next.js는 html이 들어가 있어서 js가 꺼져있거나, 인터넷이 느려도 기본적인 구조는 눈에 보이고 그 다음, 데이터를 받아오는 loading이 보이니 사람들은 흰화면만 볼 필요가 없어진다.

 

또, next.js의 장점은 hydrate인데, pre - rendering된 웹페이지를 보여주곤, react.js가 전송됐을 때, 거기에 js들이 각자 자리에 맞게 들어가서 hydrate라고 부른다.