Next.js

1. Next.js란?

• SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원
• 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있음
• 복잡한 Server 구축 없이도 API를 배포할 수 있음
• 초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원
• 개발 환경 설정이 쉽고 간단함
  => 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크!!

2. Pre-rendering이란?

• Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말함
• 언제 HTML을 만드느냐에 따라서, Server-Side Rendering과 Static-Site generation으로 나뉨 (Build할 때 렌더링 -> SSG, runtime에 렌더링 -> SSR)
• Next.js는 기본적으로 모든 코드는 Pre-rendering됨

<CSR SSR SSG ISR>

• CSR (Client-Side Rendering)
  브라우저에서 HTML file을 로드하면, Javascript를 이용하여 렌더링
• SSR (Server-Side Rendering)
  브라우저에서 해당하는 페이지에 접속하면, 그 순간 서버에서 html을 렌더링해서 전달해주는 방식, 페이지를 요청할 때마다 렌더링하기 때문에 오래걸림
• SSG (Static-Site Generation)
  페이지를 요청할 때마다 서버에서 렌더링, 정적인 페이지를 제공하려고 할 때는 그럴 필요없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌더링 된 페이지를 반환
• ISR (Incremental Static Regeneration)
  SSG는 컨텐츠가 업데이트 되면 제대로 된 정보를 보여줄 수 없다는 단점이 있는데 이를 보완하기 위해 일정 주기마다 페이지를 빌드시켜주는 ISR방식
• 비교