[ Next.js ] Pre-rendering 방식
"긍까 굳이 왜 Next.js를 쓰는건데?"
이게 내가 next.js라는 걸 처음 들었을 때 들었던 궁금증이었다. 당시에 나는 이제 막 바닐라 자바스크립트로 웹사이트를 만들고 배포해보는 몇번의 경험을 지낸 후, 리액트를 조금씩 공부하면서 내 포트폴리오 웹사이트를 만들고 있는 중이었다.
('당시'라고 하지만, 이건 고작 몇주전의 일이다.)
물론 next.js를 이제 막 공부하는 시점이기 때문에, 모르는 것 투성이이고 배워야할 개념들이 아주 많다. next.js 뿐만이 아니라 그냥 난 웹 개발 자체에 아직 많이 무지하다.
여튼, next.js를 처음 듣고, '이건 리액트를 사용하여 Server-side Rendering (SSR)을 가능하게 해주는 프레임워크임!'라는 내용을 보긴 봤는데, 그래서 Server-side Rendering을 하면 뭐가 좋은건데? 굳이 왜 하는건데? 라는 궁금증이 많이 생겼다.
SSR의 이점은 여러가지가 있겠지만, 오늘 공부한 내용은 SEO (Serch Engine Optimization), 즉, 검색엔진 최적화와 관련된 내용이다.
SEO는 누군가가 어떤 내용을 검색했을 때, 우리가 제작한 웹사이트 및 컨텐츠가 잘 노출될 수 있도록 하는데, 이 원리는 HTML 안의 내용을 브라우저가 읽어서 관련된 내용이 있으면 더 잘 띄워주는 그런 방식이라고 볼 수 있다.
그런데 문제는 이거다.
Client-side Rendering (CSR) 의 방식으로 웹페이지를 만들면, 브라우저가 처음에 빈 HTML파일을 가지고 와서, 사용자의 컴퓨터 상에서 자바스크립트를 통해 여러 요소를 로딩하는 방식으로 동작하게 된다.
그러니까, 브라우저가 검색 엔진에 컨텐츠를 노출시키게끔 하기 위해서는, 브라우저가 HTML을 읽는 시점에 HTML 안에 관련된 내용들이 들어가 있어야 하는데, CSR의 경우에 브라우저가 HTML을 읽는 시점에 HTML은 텅 빈 녀석이라는 것이다.
즉, 검색 엔진에 노출될 가능성이 훨씬 적어진다.
리액트는 CSR방식으로 동작한다.
그래서, 리액트로 만든 웹페이지는 SEO에 취약하다고 볼 수 있다.
그렇게 우리는 next.js에 관심을 가지게 된다.
next.js는 SSR방식으로 동작한다.
next.js는 SSR의 방식을 사용하여 렌더링을 진행하기 때문에, 브라우저가 읽는 시점 이전에 미리 서버에서 HTML의 내용물을 구성한다.
이로 인해, 브라우저가 HTML을 읽는 시점에 검색 엔진에 노출될 수 있는 여러 내용들을 읽어낼 수 있는 것이다.
첫단계에서 미리 필요한 HTML을 모두 로드한 이후에, Hydration이라는 과정에 진입하는데, 이때는 자바스크립트상에서 구현된 여러 사용자 인터랙션과 관련된 기능들을 구현한다. 이러한 과정을 거쳐서 사용자는 next.js로 만들어진 웹사이트를 볼 수 있다.
<보너스 내용>
우리는 이걸 직관적으로 체험해볼 수 있는데, 바로 disable javascript를 통해서이다.
크롬에서 disable javascript를 검색하면, 웹페이지에서 자바스크립트 기능을 꺼버릴 수 있다.
https://developer.chrome.com/docs/devtools/javascript/disable/ (이곳에 가면 끄는 방법을 알 수 있다.)
이때, react.js로 구현된 웹사이트에 가서 자바스크립트를 꺼보자. 아마도 내용이 안보일 거다.
하지만, next.js 구현된 웹사이트에 가서 자바스크립트를 꺼보면, 그럼에도 불구하고 내용이 보인다.
이 내용을 공부하면서, 나는 SSR과 CSR의 차이에 대해 좀 더 알 수 있었고, 왜 굳이 SSR을 써야하는지에 대해 알 수 있었다.
혹시 나와 같은 궁금증을 가진 분이 있다면, 이 글을 참고해주시기를 바란다.