Next.js?
NextJS 공식 문서에서는 다음과 같이 설명하고 있습니다. "NextJS는 배포(Production)"을 위한 리액트 프레임워크입니다".
NexJS는 큰 규모의 리액트 애플리케이션을 더 쉽게 생산하도록 여러 가지 기능들을 제공해줍니다. 예를 들어, Routing을 위해 react-router-dom 패키지를 사용하지 않고 NextJS가 자체적으로 Routing 기능을 제공해줍니다. 또한 자체적으로 Server-side Rendering을 지원합니다.
본격적으로 NextJS를 설명하기에 앞서 용어에 대한 설명을 하겠습니다.
Libarary vs Framwork
-
라이브러리(libarary)
: react와 같은 라이브러리는 어떤 기능을 하는 도구 또는 함수를 갖는 집합입니다. react의 경우 사용자 인터페이와 관련된 도구나 함수들의 집합을 의미합니다. 이때 라이브러리는 우리가 불러와서 사용하고 싶은 기능을 추출하여 사용합니다. 즉, 주도권이 라이브러리가 아닌 개발자에게 있습니다. -
프레임워크(Framework)
: 프레임워크란 애플리케이션의 구조, 틀, 뼈대를 의미하며 개발자는 프레임워크가 제공하는 구조에 맞춰 코드를 작성해야 합니다. 즉, 주도권이 프레임워크에게 있으며 프레임워크가 제시하는 틀에 맞추어 코드를 작성해야 합니다.
MPA vs SPA
-
MPA(Multi Page Application)
: MPA란 여러 개의 페이지(HTML)로 이루어진 애플리케이션을 의미합니다. 즉, 사용자가 새로운 URL 경로를 요청하면 그에 맞는 HTML 파일을 새롭게 렌더링합니다. -
SPA(Single Page Application)
: MPA의 반대되는 개념으로 하나의 페이지(HTML)로 이루어진 애플리케이션을 의미합니다. 사용자가 새로운 URL 경로를 요청하더라고 기존 HTML을 벗어나지 않고 하나의 HTML 문서만을 사용합니다.
CSR vs SSR
-
CSR(Client-side Rendering)
: CSR이란 서버측에서 전달한 "빈 HTML 문서"를 응답받고 script태그로 외부 자바스크립트 코드를 로드하고 실행합니다. 이때 화면에 렌더링하는 작업은 클라이언트측에서 자바스크립트 코드를 실행하여 렌더링 작업을 하게됩니다. 이는 자바스크립트 코드가 모두 다운로드될 때까지 사용자는 빈 화면을 보게 될 것입니다. -
SSR(Server-side Rendering)
: SSR이란 서버측에서 사용자에게 보여질 콘텐츠를 포함하는, 즉시 렌더링이 가능한 HTML 문서를 브라우저에게 응답해주는 방식입니다. 즉, 클라이언트 측에서 빈 HTML 문서를 전달받고 자바스크립트 코드로 렌더링작업을 하는 것이 아니라 "서버측에서 완성된(화면에 표시될 콘텐츠가 포함된) HTML 문서"를 브라우저에게 응답으로 전달해줍니다.
React App vs Next App
-
React App의 경우 SPA이면서 CSR로 동작합니다. 즉, "하나의 빈 HTML 파일"을 사용하며, "클라이언트 측에서 자바스크립트 코드"를 사용하여 렌더링 작업을 합니다. 이는 초기에 자바스크립트 코드를 다운받을 때까지 빈 화면이 보여지게 되며, 서버에게 응답받은 HTML 문서는 빈 HTML 문서이므로 SEO 대응이 어렵다는 단점을 갖고 있습니다.
-
Next App의 경우 SPA이면서 SSR과 CSR의 장점을 모두 갖고 있습니다. 브라우저가 요청을 보내면 서버측에서 요청된 URL 경로일 때 렌더링되어야할 "콘텐츠를 포함하고 있는 HTML 문서"를 브라우저에게 응답으로 전달해주고, 브라우저는 응답받은 HTML을 계속 사용하면서 "클라이언트측에서 자바스크립트 코드"를 통해 브라우저 화면의 View를 조작합니다.
정리하자면
-
NextJS를 사용하면 서버측에서 이미 사용자에게 보여질 콘텐츠를 포함하고 있는 HTML 문서를 응답으로 전달하기 때문에 사용자는 자바스크립트 코드가 모두 로드될 때까지 빈 화면을 보지 않아도 됩니다.
-
콘텐츠가 포함된 HTML 문서를 응답으로 전달받기 때문에 웹 크롤러 봇은 HTML 문서의 콘텐츠를 수집하여 CSR 방식 보다는 SEO에 대응하기가 쉽습니다.
-
매번 새로운 요청을 보내는 것이 아니라 초기에 전달은 HTML 문서 하나만을 사용하며, 자바스크립트 코드의 로드가 완료되면 HTML 문서와 연결되어 자바스크립트 코드를 통해 View를 동적으로 조작하는 것도 가능하다.
