[Next.js] Next.js 란?

1. Next.js?

Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다. 

따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다.

 

2. 사용하는 이유

1. SSR 

Next.js를 사용하는 가장 큰 이유로 SSR이 있다. 

 

React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우 

전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다. 

 

SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다. 

 

CSR은 Client Side Rendering이고 작동 순서는 

1. 서버에서 브라우저로 응답을 보낸다. 
2. 브라우저에서 JS를 다운로드한다. 
3. 브라우저가 React를 실행시킨다. 
4. 페이지가 보이고 상호작용이 가능하다. 

CSR의 장점은 

1. 컴포넌트 단위로 UI를 구성하기 때문에 재사용이 용이하고 중복을 줄일 수 있다. 
2. 사용자가 페이지 전환 시 부드럽게 전환된다. 
3. 변경된 사항만 Server에 요청을 보내면 되기 때문에 비용적 측면이 효율적이다. 

하지만 단점도 가지고 있는데, 

1. 초기 페이지 로딩이 오래 걸린다.
2. SEO가 어렵다.

SSR은 바로 CSR의 단점인 초기 페이지 로딩 속도와 SEO의 단점을 개선하였다. 

 

※ 여기서 말하는 초기 페이지 로딩 속도란?

CSR이 초기에 전송되는 페이지의 로딩 속도 자체는 빠르지만, 서비스에 필요한 데이터를 추가로 요청해서 

재구성하기 때문에 전체적인 완료 시점이 SSR보다 느리다.

 

SSR의 작동 순서로는 

1. 서버가 렌더링 할 준비된 HTML을 응답할 브라우저에게 보낸다. 
2. 브라우저는 페이지를 렌더링하고 이때, 페이지를 볼 수 있다.
3. 브라우저가 JS를 다운로드한다. 
4. 브라우저가 React를 실행한다. 
5. 페이지 상호작용이 가능하다. 

장점으로는 당연히

1. 초기 페이지 렌더링 속도가 빨라 사용자가 기다리는 시간이 짧다.
2. SEO, 즉 검색엔진 최적화가 쉽다.

하지만 단점 역시 존재하는데, 

1. CSR에 비해 서버 부하가 많다. 
2. 사용자가 페이지를 전환 시 화면이 깜빡거린다는 느낌을 받을 수 있다. 

 

정리하자면, 

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을 사용하는 방식을 사용할 수 있는 것이다. 

 

작동 방식으로

1. 사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR 방식으로 렌더링 될 HTML을 보낸다. 
2. 브라우저에서 JS를 다운로드하고 React를 실행한다. 
3. 사용자가 페이지와 상호작용하며 다른 페이지로 이동할 경우 CSR 방식으로 Server가 아닌 브라우저가 처리한다. 

4. 정리하자면,

Next는 SSR과 SEO 등을 하기 위한 React 프레임워크이다. 

사용자가 초기에 페이지 접속을 요청한 경우 SSR 방식으로 렌더링 될 HTML을 보내줘 SEO 최적화가 쉽게 이루어지고, 

이후 사용자가 페이지 내에서 상호작용을 할 경우, CSR 방식으로 브라우저에서 처리해서 SPA 장점을 가지고 있다.