#01 Next.js (Pages Router) 개념, 렌더링 방식 4가지

1. 넥스트 장점

> SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원

> 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현 가능 (react-router-dom 설치 x)

> 복잡한 Server 구축 없이도 API를 배포

> 최적화 (lazy loading / 코드 split / 이미지 최적화 / 웹폰트 최적화) => 자동으로 지원

> 웹팩이나 바벨 신경 x

> 개발자 리액트에만 집중할 수 있게 도와주는 프레임워

 

[둘 다 배워야함]

넥스트 13 : App Router => 아직은 불안정한 이슈도 있음 

넥스트 13 이전 : Pages Router => 6년간 많이 사용되고 있음 

 

[MPA에서 SSR까지 흐름]

 

* MPA : 페이지 이동시, 깜빡거림 발생

 

(CSR: Client Side Rendering) : 원리_ 비어있는 html 파일에 JS 파일로 채워줌 

* SPA : 리액트 라이브러리를 사용하면서 유저사용성 개선됨

* Code Splitting : SPA의 초기 로딩 속도 개선을 위해서 (꼭 필요한 곳에서만 JS 로딩하는 방법)

=> 문제점 : SEO가 좋지 않음 => SSR을 사용하게 

 

(SSR: Server Side Rendering)

* SSR (runtime에 빌드)

* SSG (buildtime에 빌드)

 

 

2. Rendering 이란?

> JS를 이용해서 HTML을 만드는 행위

> 기존 SPA를 사용하던 CSR의 렌더링 

 

> Pre-rendering 이란? 

: Client에 HTML이 이미 로드된 후가 아닌, 이전에 JS를 이용해서 HTML 만드는 것

: 언제 HTML 만드는지에 따라 SSR (런타임때) / SSG (빌드할때) : yarn build 로 나뉨

★ Next.js는 기본적으로 모든 코드가 Pre-rendering 됨

★ Pages Router : 자동으로 정적 렌더링  / App Router : 서버 컴포넌트로 취급

 

> runtime (실행시간) 이란?

: 애플리케이션이 빌드/배포된 후 에 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 시간

 

> Next.js에서 사용되는 4가지 랜더링 방법

(1) CSR : Client-Side Rendering

> 브라우저에서 HTML file을 로드하면, JS를 이용해서 랜더링하는 방식 

> ReactDom.render 함

 

 

(2) SSR : Server-Side Rendering

> 브라우저에서 해당 페이지를 접속하면, 그 순간 서버에서 html을 렌더링해서 전달

> 페이지를 요청할 때마다 렌더링하기 때문에 오래 걸

 

 

(3) SSG : Static-Site Generation

> 정적인 페이지 제공시, 빌드할때 렌더링하고 페이지를 요청할 때 이미 렌더링 된 페이지 반

> yarn build 하는 즉시, 페이지를 미리 서버에 저장함

 

(4) ISR : Incremental Static Regenration

> SSG의 단점: 컨텐츠가 업데이트 되면 제대로 된 정보를 보여주기 불가능

=> 이를 보완하기 위해 일정 주기마다 새롭게 페이지를 빌드해주는 ISR 방식이 있음

 

끝