[Next.js] Next.js?

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
1.1) Next.js를 소개합니다.
1.2) Next.js 사전렌더링 이해하기
1.3) 실습용 백엔드 서버 세팅하기
1.4) 본격적인 학습에 앞서

Next.js 라는 기술은 어떤 특징을 가지고 있는가?

Next.js

- Next.js : 리액트만을 위한 리액트 전용의 웹 개발 프레임워크
   기존의 리액트 기술 + 페이지 라우팅 + 다양한 최적화 기능 등등의 추가 기능들을 몇 개 덧붙여 놓은 리액트의 확장판

   vercel에서 개발

Framework vs Library

Next.js는 리액트 전용의 웹 개발 프레임워크이지만, React는 UI 개발을 위한 라이브러리이다.

 

1. 기능 구현의 주도권이 누구에게 있는가

Framework : 주도권을 Framework가 가진다 -> 자유도가 낮다

Library : 주도권을 개발자가 가진다. -> 자유도가 높다

 

프로그래밍에서 이런 자유도가 너무 높아도 문제가 될 수 있다.

리액트와 같이 자유도가 낮은 라이브러리들은 주요 기능을 제외한 모든 기능들을 직접 만들어야 한다.

하지만 자유도가 높다면 웹 개발에 있어서 거의 모든 필수적인 기능들을 기본적으로 제공해준다.

 

따라서 Next가 주는 장점은?

페이지 라우팅, 최적화, 서버 사이드 렌더링과 같은 기능을 사용하여 간단하게 해결할 수 있다는 점에서

라이브러리보다 훨씬 더 편하고 빠르게 웹서비스를 구축할 수 있다.

---

Next.js의 사전렌더링

리액트의 클라이언트 사이드 랜더링이란?

클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식

1. 유저가 브라우저를 통해 초기 접속 요청을 웹서버에게 보낸다.

2. 웹서버는 빈 껍데기 html 파일인 index.html을 브라우저에게 보낸다.

3. 브라우저는 서버로부터 받은 html 파일을 렌더링한다.

4. 웹서버는 모든 자바스크립트 코드(리액트 앱)를 하나의 자바스크립트 파일로 묶어 번들링하여 브라우저에게 보낸다.

5. 브라우저는 번들링된 자바스크립트 파일을 직접 실행하고 화면에 렌더링한다.

7. 이때가 되면 유저는 자신이 요청한 웹페이지를 볼 수 있다. --- FCP

 

클라이언트 사이드 랜더링의 장점과 단점

장점 : 초기 접속 이후에 발생하는 페이지 이동들을 매우 빠른 속도로 처리할 수 있다. 

- 왜냐하면 리액트앱을 모두 번들링했을 때 모든 페이지에 필요한 컴포넌트가 다 들어있게 되기 때문이다.

- 따라서 초기 접속 이후로는 서버에게 새로운 페이지를 요청할 필요가 없다.

단점 : 초기 접속 속도가 좀 느려진다. FCP가 느리다.

 

FCP (First Contentful Paint) - 웹페이지의 성능을 대표할 정도로 중요한 지표. 오래 걸릴수록 이탈률이 심함

 

Next의 사전 렌더링이란?

React.js의 단점을 해결한 Next.js를 대표하는 기능 중 하나

1. 유저가 브라우저를 통해 초기 접속 요청을 서버에게 보낸다.

2. 넥스트 서버가 서버 측에서 직접 자바스크립트 코드(리액트 앱)를 실행시켜 모든 리액트 컴포넌트들을 HTML로 변환(렌더링)한다.

3. 완성된 HTML을 브라우저에게 보낸다.

4.  브라우저는 HTML을 그대로 화면에 렌더링한다. ---FCP

- 자바스크립트를 HTML로 변환하는 작업 역시 렌더링이라고 하고, 브라우저가 컨텐츠를 화면에 그리는 과정도 렌더링이라고 한다.
- 헷갈릴 수 있지만 렌더링이 두 개의 뜻을 가지고 있기 때문에 어쩔 수 없다.

 

화면에 컨텐츠들이 다 보이긴 하지만 아직 클릭과 같은 웹페이지의 상호작용은 불가능한 상태이다. 

5. 넥스트 서버가 브라우저에게 자바스크립트 코드(리액트 앱)를 번들링하여 브라우저에게 보낸다.

6. 브라우저는 이 번들링한 파일을 현재 화면에 렌더링 되어있는 HTML 요소들과 연결을 한다. (Hydration)

hydration(수화) : HTML과 자바스크립트 연결하는 과정. 메말라 있던 HTML 요소들에 자바스크립트라는 물을 뿌려주는 것과 비슷하다고 해서 수화(hydration)라고 한다. 

 

7. 상호작용 가능 --- TTI

TTI(Time to Interactive) : 상호작용까지 가능해진 시점

 

8. 이후 페이지 이동은 CSR과 동일한 방식으로 진행한다. 브라우저가 서버에게 별도의 페이지를 추가로 요청하지 않고 브라우저 측에서 자바스크립트 코드를 실행해서 컴포넌트를 교체한다.

 

따라서 Next.js의 사전 렌더링을 통해 리액트의 느린 FCP를 개선하고 CSR의 장점은 그대로 계승한 방식이다.

---

 

실습용 서버 실행

빌드 : npm run build

실행 : npm run start

로컬주소 : localhost:12345

api : localhost:12345/api

데이터 조회 : npx prisma studio