Next.js

Next.js?

Next.js는 SSR, SEO 등 생산에 필요한 기능을 제공하는 React 프레임워크이다.

Vercel에서 만들어졌다.

---

Next.js의 작동방식

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

Next.js의 작동 방식을 이해하기 위해 CSR과 SSR의 뜻을 알아보자.

 

---

CSR이란?

사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.

우리가 사용하는 라이브러리, 프레임워크인 React, Vue, Angular들은 SPA방식을 사용한다.

SPA는 기본 렌더링 방식을 CSR(Client Side Rendering)방식으로 채택했다.

CSR는 서버에서 처리 없이 클라이언트로 보내준다.

 

CSR의 작동 방식을 살펴보자.

CSR 작동 방식

1. 서버에서 브라우저로 응답을 보냅니다.
2. 브라우저에서 JS를 다운로드합니다.
3. 브라우저가 React를 실행합니다.
4. 페이지가 보이고 상호작용 할 수 있습니다.

 

CSR이 작동되는 방식을 통해 아래와 같은 장점과 단점을 살펴볼 수 있다.

장점

- 사용자가 페이지를 전환할 때 부드럽다.
- 변경된 사항만 Server에 요청을 보내면 되기 때문에 비용적인 측면에서 효율적이다.

단점

- 초기 페이지 로딩이 오래 걸린다.
- SEO에 불리하다.

선택 기준

개인 정보 데이터기준으로 구성된다면?
사용자 경험이 중요하다면?
상위 노출(SEO)보다 고객 데이터 보호가 우선이라면?

---

SSR이란?

SSR(Sever Side Rendering)은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.

SSR의 작동 방식을 살펴보자.

SSR 작동 방식

1. 사이트에 접속
2. 서버에서 완전하게 만들어진 인덱스 파일을 받아옴 (data까지) > TTI,TTV간에 시간 간격 발생(분홍 동그라미)
3. 서버에서 자바스크립트를 받아옴
4. 사용자 클릭이 가능해짐

위처럼 SSR를 사용하면 서버에서 페이지를 구성하기 때문에 CSR보다 페이지를 구성하는 속도(부분 렌더링)는 느려진다.
하지만, 모든 데이터가 매핑된 서비스 페이지를 브라우저에 바로 보여줄 수 있다.
때문에 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다. 또한, SEO 또한 쉽게 구성할 수 있다는 장점이 있다.

 

장점

- SEO에 유리
- 빠른 초기 로딩

단점

- 요청 시마다 새로고침 ( 비용 올라갈 수..)
- 서버 부하  
- TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 존재 
=> html 파일은 다운로드 되어 페이지는 보이지만 js파일은 다운로드 되지 않아 사용자가 화면을 클릭하여도 응답이 없다.

선택 기준

상위 노출 필요하다면?
누구에게나 동일한 내용 노출된다면?
페이지마다 데이터가 변경된다면?

---

렌더링 방식 선택 기준

---

Next.js를 왜 사용할까?

CSR과 SSR의 방식을 둘 다 사용할 수 있다. => Universal Rendering

SPA의 CSR 방식과 MPA의 SSR 방식을 둘 다 사용할 수 있다.
Node.js 기반의 SSR은 대중적인 언어인 JavaScript를 활용할 수 있었고 React 생태계를 이용 가능한다는 장점이 존재한다.