SSR의 특징을 가진 Next.js를 왜 사용해요?

목차

· Next.js 란?

· Next.js는 어떻게 동작할까?

· Next.js와 SEO(Search Engine Optimization)

· Code Splitting  자동화

· 정리

---

저번 포스팅에서 CSR과 SSR에 관련된 내용으로 포스팅을 진행했다. 여기서 든 의문점은 아직 Next.js를 배우지 않았기 때문에 단순히 SEO라는 장점하나 때문에 SSR의 단점 중 하나인 서버로 부터 새로운 UI 정보를 받아올 때 새로고침을 하게 되면 대체 SSR의 특징을 가진 Next.js를 왜 사용하는것일까? 라는 점이었다.

 

Next.js 란?

SSR을 쉽게 구현하도록 도와주는 React 프레임워크이다.

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 프레임워크이고, React에서의 SSR 자체구현이 불가능한 것은 아니지만, 굉장히 복잡한 개발 환경을 구현해야하기 때문에 Next.js 프레임워크를 사용하는 것이 바람직하다.

 

과거 대부분의 웹페이지는 SSR로 동작되어 왔다. 하지만 스마트폰이 등장하게 되면서 모바일로 웹페이지를 확인하는 일이 잦아졌는데, 당시의 웹페이지들은 모바일에 최적화되지 않아 사용하는데 커다란 불편함이 있었다. 이런 불편함을 개선하고자 모바일에서도 사용자 인터페이스를 적용하기 위해 React나 Vue.js 등 여러 라이브러리와 프레임워크가 등장하였고, CSR이 가능한 SPA(Single Page Application)가 등장하게 되었다.

 

SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 검색 엔진 최적화(SEO)에 유리하다. CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원을 먼저 다운로드 후에 브라우저에 렌더링하는 방식이다. SSR보다 초기 로딩 속도는 느리지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드 하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다.

 

Next.js는 어떻게 동작할까?

1. 초기에 사용자가 서버에 페이지 접속을 요청하면 SSR 방식으로 렌더링 될 HTML을 클라이언트에 보낸다.

- next.js에 경우 자동으로 code splitting을 해주는 기능을 제공한다. 이는 해당 페이지에서 필요한 부분만 페이지가 렌더링될 때 로드하며, 이로 인해 수백개의 페이지가 있는 경우에도 페이지가 빠르게 보여진다.

2. 브라우저에서 자바스크립트를 다운로드하고 React를 실행한다.

- React를 로딩하는 동안 사용자는 pre-rendering된 페이지를 보게 되고, React가 로딩이 되면 pre-rendering된 페이지와 연결되어 일반적인 React App처럼 작동하게 된다. 이를 hydration이라고 한다.

3. 사용자, 페이지가 서로 상호작용하며 다른 페이지로 이동할 땐, 서버가 아닌 CSR 방식으로 브라우저에서 처리한다.

Next.js와 SEO(Search Engine Optimization)

Next.js를 사용하는 가장 큰 이유는 SSR이다. SSR을 통해 서버에서 모든 콘텐츠 정보가 담긴 html을 넘겨받기 때문에 이는 검색 엔진 최적화(SEO)에 유용하기 때문이다. 

 

검색 엔진 최적화가 필요한 이유는 생각보다 단순하다. 우리가 온라인 쇼핑몰을 운영한다고 생각해볼 때, 이 쇼핑몰 사이트에서 수익을 올리기 위해선 가장 먼저 사용자들이 우리의 사이트에 접근해야만 수익 창출을 기대할 수 있을 것이다. 그러러면 브라우저에 쇼핑몰이 검색되고 노출되어야 접근하는 사용자 수가 증가하고 판매량의 증가를 기대할 수 있다. 이렇듯 검색 엔진 최적화는 서비스나 마케팅적인 부분에서 필요성이 증대되고 있으므로 우리가 어떤 서비스를 개발할 때 반드시 고려해야할 대상이다.

 

Next.js는 React를 기반으로 한 프레임워크이며, SSR을 구현하고 SEO에 유리하기 때문에 사용한다. 서버에서 받은 사용자의 접속 요청을 초기에 SSR 방식으로 렌더링 될 HTML을 보내고, 브라우저에서 자바스크립트를 다운로드하고 React를 실행하기 때문에 SEO가 가능하다. 또한 다른 페이지로 이동할 경우 CSR 방식으로 Server가 아닌 브라우저에서 처리함으로써 SPA 장점도 유지할 수 있다.

Code Splitting 자동화

보통 개발을 진행할 때, 속도가 느리거나 혹은 메모리가 낮은 기기를 활용할 경우 여러가지 불편함이 생길 수 있다. 이런 문제들을 사전에 방지하고자 자바스크립트 프로젝트를 생성할 때, 모든 코드를 하나의 Bundle(묶음)으로 만든다. 이러한 과정을 Bundling(번들링)이라고 한다. 이러한 Bundling 과정을 거친 후, 비교적 간단한 어플리케이션 프로젝트만을 개발하면 문제가 되진 않지만, 프로젝트 규모가 커지면 이야기가 다르다. 사람이 두꺼운 백과사전을 한 번에 암기할 수 없는 것처럼 전달해야하는 파일도 커지고 브라우저가 Parsing(파싱) 해야하는 정보도 많아지기 때문에 앱 초기 구동 속도가 느려지게 된다.

 

이렇듯 Bundle 사이즈가 거대해지는 것을 방지하기 위해 React에서 여러 Bundle을 동적으로 생성하고 불러오는 '코드 분할 (Code Splitting)'을 지원한다. 이런 코드 분할은 Lazy Lodaing(지연 로딩)을 할 수 있게 도와주고, 코드 양을 줄이지 않고도 필요하지 않은 코드를 불러오지 않게 하여 초기 로딩에 필요한 자원을 줄여준다. 쉽게 정리하면 Bundling 된 파일을 분할해서 로드하여 초기 구동 속도를 빠르게 하고 사용자들에게도 눈에 띄는 성능 향상을 제공한다고 생각하면 편하다.

정리

- Next.js를 사용하는 주된 이유는 SEO를 위한 SSR을 구현하기 위함이다.

- 초기에는 SSR로 렌더링한 HTML을 보내기에 SEO에 유리해지고, 페이지를 변경할 때마다 CSR 방식으로 처리하기 때문에 SPA 장점도 유지할 수 있다.

- 코드 분할을 통해 초기 구동 속도를 빠르게 할 수 있다.

---

레퍼런스

Next.js를 사용하는 이유

 

Next.js - SSR, CSR, Next.js를 사용하는 이유