React / Next.js

Next.js

React를 기반으로 하는 풀스택 웹 애플리케이션 프레임워크. 리액트에서는 구현하기 힘든 SSR을 보다 쉽게 구현할 수 있다.

 

/*

SSR(Server Side Rendering) : 화면을 구성하는 주체가 서버로, 클라이언트가 페이지를 요청하면 HTML 문서 전체를 보내주는 방식 

MPA(Multi Page Application) : 여러 개의 페이지로 구성된 애플리케이션, 페이지 전환 시 플리커 현상 발생

 

CSR(Client Side Rendering) : 화면을 구성하는 주체가 클라이언트로, 서버는 빈 html만 보내주며 클라이언트 쪽에서 js파일을 보내며 빈 html을 채워줌, 페이지가 전환되며 화면에 변경사항이 생기면 그 부분만 js로 변화시킴

SPA(Single Page Application) : 한 페이지로 구성된 애플리케이션

*/

 

즉 SPA 방식과 MPA 방식 둘다 사용하고 있는데, 둘다 가능한 이유는 Next.js의 프리 렌더링 방식 때문이다.

 

 

프리렌더링

 

 

기존 방식 (순수 React 앱)

• 비어있는 HTML파일을 불러와 초기 렌더링
• 자바스크립트 파일을 불러와 그 파일로 돔을 조작해 화면을 구성

Next.js 방식 (프리렌더링)

• 브라우저는 서버에서 미리 만들어진 HTML 페이지를 먼저 받아 화면을 즉시 렌더링
• 자바스크립트 파일이 로드돼 화면을 구성 

 

렌더링 전략

SSR (Server Side Rendering) : 요청이 들어오면 HTML 생성, 매번 만들어 사용

SSG (Static Site Generation) : 정적 페이지 생성, 빌드할 때 HTML 생성, 저장해뒀다가 재사용

ISR (Incremental Static Regeneration) : 증분 정적 재생성, SSG 방식 기반으로, 일정한 주기마다 페이지를 자동으로 재생성해 최신 데이터 반영

 

 

 

버전 차이

	12 Version	13 Version	14 Version
라우팅 방식	페이지 라우팅 (파일 기반 페이지 라우팅)	앱 라우팅	앱 라우팅 (파일 기반 라우팅 강화)
Data Fetching	getStaticProps getStaticPaths getServerSideProps	Server Component Client Component	force-cache Server Actions(클라이언트에서 서버 함수를 직접 호출할 수 있는 방식)
서버 작성 방법	index.js	route.js	route.js
레이아웃 작성 방법	_app.js	layout.js	layout.js

 

 

12버전 / 13버전의 라우팅 방식

 

14버전 이후로는 공식 블로그에서..