• https://nextjs.org/docs/pages/building-your-application/rendering
• https://nextjs.org/docs/app/api-reference/functions/fetch
• https://sollogging.tistory.com/95#Next.js14 App router-1

Next.js는 기본적으로 **사전 렌더링(Pre-Rendering)**을 사용하여 모든 페이지의 HTML을 미리 생성합니다. 이 방식은 성능과 SEO 최적화 측면에서 **클라이언트 사이드 렌더링(CSR)**보다 유리합니다.

Next.js에서 제공하는 주요 렌더링 방식은 다음과 같습니다.

• CSR (Client-Side Rendering): 브라우저에서 데이터를 가져와 렌더링
• SSR (Server-Side Rendering): 요청 시마다 서버에서 HTML을 생성
• SSG (Static Site Generation): 빌드 시 HTML을 미리 생성하여 정적으로 제공
• ISR (Incremental Static Regeneration): SSG에 일정 주기로 데이터를 갱신하는 기능 추가

CSR (Client-Side Rendering)

클라이언트에서 데이터를 가져와 렌더링하는 방식

API 요청 후 데이터가 준비되면 화면을 업데이트합니다.

특징

✅ 초기 로딩이 빠름

✅ 동적 상호작용이 많은 페이지에 적합

❌ SEO 최적화가 어려움

❌ 첫 화면이 비어 있는 상태에서 JavaScript 로딩 필요

코드 예시