🍎 Next.js

1. SEO(Search Engine Optimization)을 위한 SSR(Server-Side Rendering)을 지원
2. 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있다.
3. 복잡한 Server 구축 없이도 API를 배포할 수 있다.
4. 초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원한다.
5. 개발 환경 설정이 쉽고 간단하다.

• Linting, Compling, Bundling, Deploying을 위한 설정이 자동화 되어있다.
• Router, tailwind, typeScript, lint 등 주요 기능들을 configuration 없이 사용 가능하다.

🌳 MPA부터 SSR까지

MPA (Multi-Page-Application)

/about → about.html
/profile → profile.html

원시적인 서버 사이드 렌더링 방식.
페이지 이동시나 렌더링 시 깜빡거려 유저 사용성 저하하는 경우가 있다.
이를 보완하기 위해서 CSR 방식의 React를 이용해서 SPA를 만들기 시작

🌳 SPA (Single-Page-Application), CSR (Client-Side-Rendering)

React의 SPA 개념을 이용하게 되면서 더 이상 새로고침이나 깜빡거림 없이 유저 사용성이 개선되었으나, 단점도 있었다.
→ 자바스크립트 번들 사이즈가 커짐에 따라 초기 로딩 속도가 증가하는 것.
→ 이를 보완하기 위해서 Code Splitting 개념이 나왔다.

Code Spliting (Lazy-Loading)이란?
현재 꼭 필요한 곳에서만 자바스크립트 파일을 로딩하는 방식.
하나로 번들된 코드를 여러 코드나 컴포넌트로 분리해서, 지금 당장 필요한 코드가 아니라면 나중에 필요할 때 불러와서 사용할 수 있다.

문제점. SEO
검색 엔진에서 웹 사이트의 정보를 가져오기 위해서 사용하는 크롤링 봇은 방문하는 웹 사이트 HTML 정보를 읽고 데이터를 축적하는데, CSR 방식의 웹사이트의 경우 방문하는 시점에는 웹사이트의 정보가 없음.
방문 이후 Javascript를 통해서 현재 페이지에 내용이 나타나는 CSR 형식
→ 서버에서 렌더링해서 클라이언트에 곧바로 보내주는 SSR가 대두됌.

🌳 Rendering이란?

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

Pre-rendering이란?
Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말함.

Next.js는 기본적으로 모든 코드는 Pre-rendering 된다.
언제 HTML을 만드느냐에 따라서,

• Build 할 때 rendering 된다면? Static-Site generation (SSG) 정적 사이트 생성자
• runtime에 rendering 된다면? Server-Side Rendering (SSR)

runtime(실행 시간)이란?
애플리케이션이 빌드 및 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 기간.

• Pages Router : 자동으로 정적으로 렌더링 된다.
• App Router : 기본적으로 서버 컴포넌트로 취급된다.

🌳 CSR vs SSR vs SSG vs ISR

Client-Side Rendering

브라우저에서 HTML file을 로드하면, Javascript를 이용하여 rendering 하는 방식

Server-Side Rendering

브라우저에서 해당하는 페이지를 접속하면 ,그 순간 서버에서 html을 렌더링해서 전달해주는 방식
페이지를 요청할 때마다 렌더링하기 때문에 오래 걸림.

Static-Site Generation

SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링.
정적인 페이지를 제공하려고 할 때는 그럴 필요없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌저링 된 페이지를 반환함.

Incremental Static Regeneration

SSG의 단점은, 컨텐츠가 업데이트 되면 제대로 된 정보를 보여줄 수 없다는 것.
이를 보완하기 위해서 일정 주기마다 페이지를 빌드시켜주는 ISR이라는 방식이 있습니다.