Next.js?

seul gi lee·2021년 3월 11일

CSR SSR next.js

0

SSR은 어디서 나온거지? 🤔

SPA(Single Page Application)가 등장하며 페이지를 직접 이동하는 것이 아닌 라우팅을 적용하며 url에 맞는 페이지를 부분적으로 보여지도록 구성을 할 수 있게 되었다.

이렇게 SPA로 구성을 하게 되면 페이지 이동 시 변화가 빠르기 때문에 사용자 입장에서 렌더링이 더 빠르게 느껴질 수 있다.

하지만 SPA로 구성하다 규모가 커지게 되면 페이지를 초기에 로딩 시 느려지는 단점이 생긴다. 이때 SPA를 빠르게 빌드해주는 녀석이 바로 SSR(Server Side Rendering)이다.

브라우저의 초기 로딩 속도를 줄이는 방법은 SSR 말고도 여러가지가 있다! (코드 스플리팅.. 등)

SSR? CSR? 🤯

그렇다면 SSR은 뭘까?

SSR(Server Side Rendering)

클라이언트에서 요청한 페이지를 서버에서 구성하여 보여주는 방식이다.

즉 서버에서 렌더링이 되는 것이라고 볼 수 있다.

페이지를 이동할 때 마다 새로운 페이지에 계속 요청이 필요하다.

그래서 초기 렌더링이 빠를 수 있지만 페이지를 이동할 때 모든것을 매번 다운로드 해야한다.

출처 - The Benefits of Server Side Rendering Over Client Side Rendering

CSR(Client Side Rendering)

브라우저에서 페이지를 직접 렌더링 하는 것을 CSR(Client Side Rendering)이라고 한다.

초기 페이지 로딩에 모든걸 다운로드 해야해서 느리지만(javascript의 양이 증가하게 되면) 그 이후에는 빠르게 로딩이 된다.

또 SEO(검색 엔진 최적화)문제가 발생할 수 있다. ⇒ 검색 엔진이 크롤링을 하는데 CSR은 초기엔 HTML 파일이 비어있어 검색 내용에 알맞는 태그나 콘텐츠 내용을 찾기 어렵다.

출처 - The Benefits of Server Side Rendering Over Client Side Rendering

SSR과 CSR은 웹 사이트를 렌더링하는 접근 방식이다.

두 접근 방식을 혼합할 수 있다. ⇒ 혼합해서 사용하면 초기 렌더링 시에는 SSR을 적용하고 페이지 간 이동은 CSR을 적용하여 최상의 로딩 속도를 구현할 수 있다.

즉 두 접근법의 차이는 화면을 어디서 만들어서 보여주느냐이다.

~~SSR을 적용하기로 하였고 Next.js 프레임워크를 사용하기로 했다!~~

💡 Next.js란?

Production, SSR, SEO, Static Web, Enterprise Electron, lightweight, desktop, mobile 을 위한 리액트 프레임워크이다.

~~Vue는 Nuxt.js!~~

왜 Next.js에요?

SSR + React Framework

React로 프로젝트를 구성할 때 간단하게 SSR을 적용하는 방법은 Next.js로 구성하는 것이다.
SSR을 구성할 때 장점들이 많다!

React 공식 홈페이지에서도 권장하고있다.

Next.js를 사용하지 않아도 SSR을 구현할 수 있지만 생각보다 복잡하다..(라우팅, 코드 스플리팅...)

Next.js 특징

장점
1. 코드 스플리팅 자동화
2. Babel, Webpack 커스터마이징 가능
3. 간단한 클라이언트 라우팅(pages 폴더로 간단히 구현)
4. 장점이 많다! (위의 장점들 말고도 더 있다..)
단점
1. 페이지 이동을 할 때 지속적으로 서버에 요청

Reference

백설 집사의 개발블로그입니다. :D

이전 포스트

HTML semantic tag

다음 포스트

긴 3개월의 시간

0개의 댓글