김민태의 데브캠프 2기 - Next JS란?

 

정의 : React의 SSR(Server Side Rendering)을 쉽게 구현할 수있게 도와주는 프레임워크

 

리액트로 개발할 때 SPA를 이용하여 CSR(Client Side Rendering)을 하기 때문에 검색엔진 최적화(SEO)부분에서의 단점이 발생한다.

 

이는, CSR을 하면 첫 페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출될 일이 없다.

 

하지만 Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하여 완성된 HTML을 가져오기에, 사용자와 검색 엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있게 한다.

 

Server Side Rendering

 

- 클라이언트 대신 서버에서 페이지를 준비하는 원리

 

NextJS는 모든 페이지를 pre-render한다.

pre-render란 모든 페이지를 위한 HTML을 Client 사이드에서 자바스크립트로 처리하기 전에 "사전에" 생성하는 것이고, 이를 통해 SEO 검색엔진 최적화가 좋아진다.