Next JS란?💻

React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다.

(React는 라이브러리)

React로 개발할 때 SPA(single Page Application)을 이용하며 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)부분 입니다.

Client side Rendering을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출 될 일이 거의 없습니다.

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

React에서도 SSR(Server Side Rendering)을 구현하기에 굉장히 복잡하기 때문에 Next.js를 통해서 이 문제를 해결해줍니다.
(출처 : 인프런-따라하며 배우는 React A-Z 강의자료)

Server Side Rendering 🛠

• 클라이언트 대신 서버에서 페이지를 준비하는 원리입니다.

• 원래 React에서는 Client Side Rendering을 하기 때문에 서버에 영향을 미치지 않고, 서버에서 클라이언트로 응답을 보낸 html도 거의 비어있습니다.

-> 이 방식은 서버에서 데이터를 가져올 때 지연 시간 발생으로 UX측면에서 좋지 않을 수 있습니다.

-> 검색 엔진에 검색 시 웹크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화에 문제가 됩니다.

Pre-rendering 🛠

NextJS는

모든 페이지를 pre-render합니다. 이 pre-render한다는 의미는 모든 페이지를 위한 HTML을 Client사이드에서 자바스크립트로 처리하기 전 "사전에" 생성한다는 것입니다.
이렇게 처리하기 때문에 SEO 검색엔진 최적화가 좋아집니다.

NextJS 설치 방법 🚩

npx create-next-app@latest 
# or
yarn create next-app

npx create-next-app@latest --typescript 
# or
yarn create next-app --typescript