Next.js?
- Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다.
- 따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다.
Next.js를 사용하는 이유
1. SSR
- Next.js를 사용하는 가장 큰 이유로 SSR이 있다.
React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우
전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다.
SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다.
CSR은 Client Side Rendering이고 작동 순서는
- 서버에서 브라우저로 응답을 보낸다.
- 브라우저에서 JS를 다운로드한다.
- 브라우저가 React를 실행시킨다.
- 페이지가 보이고 상호작용이 가능하다.
CSR의 장점
- 컴포넌트 단위로 UI를 구성하기 때문에 재사용이 용이하고 중복을 줄일 수 있다.
- 사용자가 페이지 전환 시 부드럽게 전환된다.
- 변경된 사항만 Server에 요청을 보내면 되기 때문에 비용적 측면이 효율적이다.
CSR의 단점
- 초기 페이지 로딩이 오래 걸린다.
- SEO가 어렵다.
SSR은 바로 CSR의 단점인 초기 페이지 로딩 속도와 SEO의 단점을 개선하였다.
※ 여기서 말하는 초기 페이지 로딩 속도란?
CSR이 초기에 전송되는 페이지의 로딩 속도 자체는 빠르지만, 서비스에 필요한 데이터를 추가로 요청해서
재구성하기 때문에 전체적인 완료 시점이 SSR보다 느리다.
SSR의 작동 순서로는
- 서버가 렌더링 할 준비된 HTML을 응답할 브라우저에게 보낸다.
- 브라우저는 페이지를 렌더링하고 이때, 페이지를 볼 수 있다.
- 브라우저가 JS를 다운로드한다.
- 브라우저가 React를 실행한다.
- 페이지 상호작용이 가능하다.
SSR 장점
- 초기 페이지 렌더링 속도가 빨라 사용자가 기다리는 시간이 짧다.
- SEO, 즉 검색엔진 최적화가 쉽다.
SSR 단점
- CSR에 비해 서버 부하가 많다.
- 사용자가 페이지를 전환 시 화면이 깜빡거린다는 느낌을 받을 수 있다.
정리하자면, CSR에 비해 SSR은 사용자에게 보이는 페이지가 더 빨리 로딩된다.
CSR은 Client가 HTML, JS, React를 모두 로딩하고 페이지가 보이지만, SSR은 Server가 렌더링 될 HTML을 먼저 보내주기 때문에 더 빨리 보인다.
2. SEO
- SEO, 검색엔진 최적화이다.
Google의 경우 브라우저 내에 JS 엔진이 있어 CSR을 사용해도 검색엔진 봇들이 JavaScript를 해석할 수 있지만,
대부분의 엔진의 경우 JS 엔진이 없기 때문에 페이지를 구성하기 전에 HTML에 아무것도 없으므로 검색엔진 노출이
어렵다.
하지만, Next.js는 서버가 HTML을 먼저 보내주기 때문에 SEO 최적화가 더 쉽게 이루어진다.
3. Next.js의 작동방식
- Next.js는 SSR을 지원하는 React 프레임워크이다.
즉, SPA를 사용하면서, 같이 SSR을 사용하는 방식을 사용할 수 있는 것이다.
작동 방식으로
사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR 방식으로 렌더링 될 HTML을 보낸다.
브라우저에서 JS를 다운로드하고 React를 실행한다.
사용자가 페이지와 상호작용하며 다른 페이지로 이동할 경우 CSR 방식으로 Server가 아닌 브라우저가 처리한다.
4. 요약
-
Next는 SSR과 SEO 등을 하기 위한 React 프레임워크이다.
-
사용자가 초기에 페이지 접속을 요청한 경우 SSR 방식으로 렌더링 될 HTML을 보내줘 SEO 최적화가 쉽게 이루어지고, 이후 사용자가 페이지 내에서 상호작용을 할 경우, CSR 방식으로 브라우저에서 처리해서 SPA 장점을 가지고 있다.
