Next.js (1)

Next.js 좋은 이유?

SEO(Search Engine Optimization)을 위한 SSR(Server-Side Rendering)을 지원:

• 검색 엔진 최적화를 위해 서버 사이드 렌더링 지원

파일 기반 라우팅(File-based Routing):
라우팅을 파일 기반으로 구현하여 쉽게 관리 가능

API 배포 간편화 :
복잡한 서버 설정 없이도 API를 배포 가능

자동 Code Splitting(코드 분할):
초기 로딩 속도 개선을 위한 자동 코드 분할 지원

간편한 개발 환경 설정:
설정이 자동화되어 있어 linting, compiling, bundling, deploying 등 간편함

MPA부터 SSR까지

1. MPA (Multi-Page-Application)

• 원시적인 서버 사이드 렌더링 방식
• 각 페이지에 대응하는 HTML 파일을 생성
• 페이지 이동이나 렌더링 시 깜빡거림이 발생할 수 있어 사용성이 저하될 수 있음

2. SPA (Single-Page-Application)

• React의 도입으로 클라이언트 측에서 렌더링하는 방식
• 페이지 이동이 부드럽지만 초기 로딩 속도가 문제가 됨
• Code Splitting 개념이 도입되어 자바스크립트 파일을 필요할 때 로딩하는 방식이 등장함

3. SSR(Server-Side Rendering) or SSG(Static-Site Generation)

• Next.js와 Nuxt.js 같은 프레임워크의 등장으로 SEO를 위한 SSR이 주목받게 됨
• 검색 엔진은 CSR 방식의 웹 사이트에서 정보를 가져오기 어렵기 때문에 서버에서 렌더링하여 정보를 제공하는 SSR이 중요시됨.

렌더링

1. 렌더링(Rendering):

• JavaScript를 사용하여 HTML을 생성하는 행위
• 주로 SPA에서는 Client-Side Rendering(CSR)에 가깝게 사용

2. 프리 렌더링(Pre-rendering)

• HTML이 클라이언트에 로드되기 전에 JavaScript를 사용하여 HTML을 미리 생성하는 것
• Next.js에서는 모든 코드가 기본적으로 프리 렌더링됨

3. CSR vs SSR vs SSG vs ISR:
4. CSR (Client-Side Rendering)

• 브라우저에서 동적으로 HTML을 렌더링
• 초기 로딩이 빠르지만 SEO에 취약.

2. SSR (Server-Side Rendering)

• 서버에서 매번 HTML을 렌더링하여 전달
• 초기 로딩이 느리지만 SEO에 강점

3. SSG (Static-Site Generation)

• 빌드 시점에 페이지를 렌더링하고, 요청 시점에 이미 렌더링된 페이지를 반환
• 정적인 페이지에 적합

4. ISR (Incremental Static Regeneration)

• SSG의 단점 보완
• 일정 주기마다 페이지를 다시 빌드하여 갱신된 정보를 제공

선택 기준:

• 각 방식은 장단점이 있어 프로젝트 요구사항에 따라 선택
• CSR은 초기 로딩이 빠르지만 SEO 취약, SSR은 초기 로딩이 느리지만 SEO 강점, SSG는 정적인 페이지에, ISR은 주기적인 갱신이 필요한 경우에 적합.

오늘의 한줄평 : 역시 조금 어렵다고 느꼈지만, 곧 극복할 것이다.