Next.js는 웹 어플리케이션을 만들기 위한 React Framework 입니다.
Next.js를 사용하는 가장 큰 이유는 SSR을 쉽게 구현하기 위함입니다.
SSR에 대한 내용은 ~에서 정리하였습니다.
Next.js의 동작
Next.js는 다음과 같이 동작합니다.
-
브라우저를 통해 앱에 접속
-
서버에서 Pre-rendering
-
Pre-rendering을 통해 HTML Document를 브라우저에 전달
이 때, 메타태그들이 미리 정의된 HTML Document를 받기 때문에 SEO에 유리합니다.
-
브라우저에 초기화면을 렌더링
-
브라우저에서 JavaScript를 다운 및 실행
5번 과정을 거치면 hydration을 통해 앱이 상호작용하게 됩니다.
hydration
Pre-rendering된 정적 HTML 웹 페이지의 요소에 이벤트 핸들러를 첨부하여 동적 페이지로 변환하는 과정입니다.
Next.js의 장점
Next.js는 SEO에 있어서 가장 큰 강점을 가집니다.
물론 React만 사용해서 SSR을 구현할 수도 있습니다.
React로 Next.js 처럼 Server-side-rendering 구현하기에서 이를 구현하는 내용에 대한 설명이 자세하게 되어 있습니다.
이 외에 Next.js가 지원하는 장점들도 있습니다.
-
Automatic Routing
pages 디렉토리 하위에 있는 디렉토리나 파일이 자동으로 라우팅 처리가 됩니다.
ex)
/pages/index.ts->/,/pages/main/cabinet->/main/cabinet -
Automatic Code Splitting
첫 페이지 로딩 시, 번들 중 필요한 라이브러리와 js 코드만 전송하여 빠른 로드
하지만 페이지의 절반 이상에서 사용되는 import는 main JS bundle에 포함됩니다.
이 외 장점들에 대해서는 아래 링크에 잘 정리되어 있습니다.
https://www.freecodecamp.org/news/the-next-js-handbook/#the-main-features-provided-by-next-js
