📌Next.js란?
- SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
- 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있다.
- 복잡한 Server 구축 없이도 API를 배포할 수 있다.
- 초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원한다.
- 개발 환경 설정이 쉽고 간단하다.
- Linting, Compling, Bundling, Deploying을 위한 설정이 자동화 되어있다.
- Router, tailwind, typescript, lint 등 주요 기능들을 configuration 없이 사용 가능하다.
next.js는 웹 개발자에게 필요한 다양한 기능을 제공해주는 "리액트 프레임워크"
📌Pre-rendering이란?
Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말한다. 언제 HTML을 만드느냐에 따라서 Server-Side Rendering과 Static-Site generation으로 나뉜다.
기본적으로 Next.js의 모든 코드는 Pre-rendering 된다.
- Build할 때 rendering 된다면? Static-Site generation (SSG)
- runtime에 rendering 된다면? Server-Side Rendering (SSR)
- Client-Side Rendering
- 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 rendering 하는 방식
- Server-Side Rendering
- 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 렌더링해서 전달해주는 방식으로 페이지를 요청할 때마다 렌더링하기 때문에 오래걸린다.
- Static-Site Generation
- 페이지를 요청할 때마다 서버에서 렌더링 한다. 정적인 페이지를 제공하려고 할 때는 그럴 필요없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌더링 된 페이지를 반환한다.
- Incremental Static Regeneration
- SSG의 단점은, 컨텐츠가 업데이트 되면 제대로 된 정보를 보여줄 수 없다는 것. 이를 보완하기 위해서 일정 주기마다 페이지를 빌드시켜주는 ISR이라는 방식이 있다.
| CSR | SSR | SSG | ISR | |
|---|---|---|---|---|
| 빌드시간 | 짧다 | 짧다 | 길다 | 길다 |
| SEO | 나쁨 | 좋음 | 좋음 | 좋음 |
| 페이지 요청에 따른 응답 시간 | 보통 | 길다 | 짧다 | 짧다 |
| 최신 정보인가? | 맞음 | 맞음 | 아님 | 아닐 수 있음 |
