next.js는 React로 만드는 서버사이드 렌더링 프레임 워크다.

Next.js란

Next는 React 웹 프레임 워크중 하나다. 서버사이드렌더링 방식으로 리액트 기반 이며 Node.js위에서 빌드된 오픈 소스 웹 개발 프레임워크다. Node.js로 서버 렌더링 되는 웹사이트를 빌드하는 해결책의 하나이기도 하다. Next.js는 SSR방식으로 서버에서 사용자에게 보여줄 페이지를 모두 미리 그린 뒤 페이지를 렌더링 하는 방식이다. 

 

리액트에서 추천하는 방법

- React를 배우고 있거나 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App

- 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js

 

 

CSR vs SSR

CSR은 클라이언트사이드렌더링(Client-Side-Rendering), SSR은 서버사이드렌더링(Server-Side-Rendering)이다.

이것은 사용자가 브라우저에서 보는 UI를 어디서 만들어 주는지에 따라 구분한다. CSR은 클라이언트(프론트)에서, SSR은 서버(백)에서 화면을 구성한다. 

 

next.js를 이해하기 위해선 react.js동작 방식 또한 알아야 한다. 먼저,

 

React는  CSR 방식으로 동작한다.

사용자가 브러우저를 통해 앱에 접속 →  

앱은 브라우저에게 JavaScript정보가 들어있는 빈 html 문서를 전달한다. →

브라우저는 JavaScript파일을 다운로드하고 동시에 사용자는 빈 화면을 보게된다. →

브라우저에 있는 리액트 코드가 UI를 렌더링한다. →

사용자는 UI가 그려진 화면을 보게 된다.

 

즉, 브라우저가 JavaScript코드를 가지고 있지 않거나, 요청 중인 상태라면 UI를 구성할 수 없기 때문에 사용자는 빈 화면을 보게 된다. 

리액트 코드가 실행되기전까지는 사용자가 보는 화면에 아무것도 보이지 않는것이다. 이렇게 클라이언트 측에서 UI를 빌드하는것이 CSR 방식이다.

 

장점

로드가 완료된 이후엔 렌더링이 빨라 부드러운 화면전환이 가능하다.

서버에 많이 요청하지 않기 때문에 서버에 부담이 적다.

 

단점

SEO에 좋지 않다. 초기 html에는 파일이 비어있기 때문에 검색엔진이 데이터를 수집하기 어렵기 때문이다.

초기로드는 오래 걸린다.

 

 

Next는  SSR 방식으로 동작한다.

사용자가 브라우저를 통해 앱에 접속한다. →  

서버에서 리액트를 실행한다. →

리액트는 UI를 렌더링한다.  →

렌더링된 결과를 브라우저에게 html을 보내주게 되고 사용자는 앱의 초기화면을 보게 된다. →

이후 브라우저는 리액트 코드가 있는 JavaScript파일을 다운받고 실행시키는데, 이때부터는 일반적인 리액트 앱과 같이 CSR의 동작을 하게 된다. 이 과정을 hydration이라고 한다.

 

즉, 서버에서 UI를 모두 그려 사용자에게 화면을 보여주는 방식으로 화면이 pre-rendering되어 사용자는 인터넷 속도에 상관없이 화면에 뭔가 나오는 것을 볼 수 있다. 이렇게 Next.js는 서버측에서 UI를 렌더링 하고 이를 SSR방식이라고 한다.

 

장점

html 파일에 모든 정보가 포함되어 있기 때문에 검색엔진이 데이터를 수집할 수 있어 SEO에 좋다.

한꺼번에 모두 다운받고 실행시키는 방식이 아니기 때문에 초기 로딩 속도가 빠르다.

 

단점

서버에서 전체앱을 미리 렌더링하기 떄문에 컨포넌트 로딩이 오래 걸리면 사용자는 빈화면을 보게 될 수 도 있다.

서버에 매번 요청해야하므로 서버에 부담이 크다. 

 

 

 

결론은 Next를 쓰는 가장 큰 이유는 SSR때문이다.

그렇다면 왜 검색엔진 최적화가 중요한것일까? 우리 사이트에 사용자가 많이 접근해야만 홍보가 되고 또 수익창출을 할 수 있을 것이다. 그러기 위해선 브라우저에 우리 사이트가 검색이 되고 노출 되어야 접근하는 사람의 확률이 높아진다. 이렇게 검색엔진 최적화는 서비스나 마케팅적인 부분에서 특히 필요성이 중요하므로 어떤 서비스냐에 따라 중요하게 고려해야할 부분이다.

 

 

또, Next의 장점은 SSR방식이지만 CSR방식과 같게 동작 하기도 한다는것이다.

Next.js는 Server에서 받은 사용자의 접속 요청을 초기에 SSR방식으로 렌더링 될 html을 보내고, 브라우저에서 JavaScript를 다운로드 하고 React를 실행하기 때문에 SEO가 가능하다.

또한 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리함으로서 SPA장점도 유지할 수 있다.

 

 

 

Next.js 개인쩍으로 아주 맘에 든다.

Next.js를 활용한 프로젝트를 앞두고 있는데 기대가 된다.