📑 Next.js 소개 - https://nextjs.org/
Next.js는 React를 기반으로 하는 풀스택 웹 개발 프레임워크입니다. 웹 애플리케이션 개발에 필요한 틀을 제공하며, 서버 사이드 렌더링(SSR), 정적 웹사이트 생성, API 라우팅 등 다양한 기능을 지원하여 개발 생산성을 높입니다. 또한 Next.js는 번들링, 컴파일 등의 작업을 추상화하고 자동으로 처리해, 개발자가 설정에 시간을 들이지 않고 애플리케이션 개발에 집중할 수 있도록 돕는다.
- 페이지 라우팅 (Page Routing): 별도의 설정 없이 간단하게 페이지 간 이동을 구현할 수 있다.
- 빌트인 성능 최적화: Next.js는 자동으로 성능을 최적화하여 빠른 페이지 로딩을 지원한다.
- 동적 HTML 스트리밍: 서버에서 HTML을 스트리밍하여 더 빠르게 콘텐츠를 전달할 수 있다.
프레임워크는 소프트웨어 개발의 '뼈대' 역할을 하는 도구 모음으로, 애플리케이션 개발을 효율적으로 진행하도록 표준화된 구조와 자주 사용되는 기능들을 제공합니다. (주도권이 개발자에게 없습니다.)
프레임워크를 사용하면 개발 시간 단축, 코드 품질 향상, 유지보수 용이성 증대 등 여러 이점이 있습니다.
※ Next.js 한글 문서 번역 - https://nextjs-ko.org/
👍특징
1. React 기반
React를 사용해 사용자 인터페이스를 구축하고, Next.js는 React 개발에 필요한 번들링, 컴파일링 등 도구를 내부적으로 제공합니다.
2. 풀스택 개발
프론트엔드 개발뿐만 아니라 백엔드 기능(API 라우팅 등)까지 제공하여 프레임워크 하나로 전체 애플리케이션을 구축할 수 있습니다.
3. 다양한 렌더링 방식 지원
✅ 서버 사이드 렌더링 ( SSR - Server Side Rendering )
요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 서버에서 완성된 HTML을 생성하여 브라우저로 반환한다.
SSR을 사용하면 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링이 빠르며 필요한 모든 데이터와 마크업(최적화(SEO))을 포함할 수 있다.
✅ 클라이언트 사이드 렌더링 ( CSR - Client Side Rendering )
React, Vue, Angular 같은 SPA(Single Page Application)방식으로 브라우저에서 자바스크립트 파일을 다운로드한 후, 클라이언트 측에서 렌더링을 수행하는 방식입니다.
사용자 상호작용이 많은 페이지나 실시간 데이터가 필요한 경우 사용하면 유용합니다.
※ SPA(Single Page Application) - 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션
✅ 정적 사이트 생성 ( SSG - Static Site Generation )
HTML을 빌드 타임에 미리 생성하고 요청이 올 경우 이미 생성된 HTML 문서를 반환한다. SSG를 사용하면 HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 된다.
SSG는 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합하며, 빠른 로딩 시간과 효율적인 캐싱을 가능하게 한다.
✅ 증분 정적 재생성 ( ISR - Incremental Static Regeneration )
기존의 정적 사이트 생성(SSG)을 보다 동적으로 사용할 수 있도록 더욱 확장해 주는 개념으로 볼 수 있습니다.
증분 정적 재생성(ISR)을 사용하면 정적 페이지를 런타임에서도 주기적으로 업데이트할 수 있으며, 초기 빌드 타임 이후에도 전체 사이트를 다시 빌드 할 필요 없이 원하는 페이지만 새 데이터로 갱신하고 업데이트하면서도 성능에 대한 최적화를 할 수 있는 현대적 웹 개발 기술입니다.
https://sinwon-fe.tistory.com/44
[렌더링] SSR, CSR, SSG, ISR
✅ 서버 사이드 렌더링 ( SSR - Server Side Rendering )요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 서버에서 완성된 HTML을 생성하여 브라우저로 반환한다.SSR을 사용하면 각 요청에 대해 서버에서
sinwon-fe.tistory.com
4. 파일 기반 라우팅
pages나 app 디렉터리의 파일 구조만으로 라우팅이 자동으로 설정됩니다.
5. 자동 최적화
코드 분할, 이미지 최적화 등 다양한 성능 최적화 기능이 기본적으로 제공됩니다.
👊 Server Component vs Client Component
서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)를 구분해 코드 일부가 서버 혹은 클라이언트에서 출력될 수 있도록 만들 수 있습니다. 기본적으로 생성하는 모든 컴포넌트는 서버 컴포넌트입니다!
클라이언트 컴포넌트로 변경/사용하려면 다음과 같이 컴포넌트 최상단에 'use client' 선언이 필요하고, 해당 선언이 없으면 서버 컴포넌트입니다.
✅ 서버 컴포넌트만 사용
cookies, headers, redirect, generateMetadata, revalidatePath 등...
✅ 클라이언트 컴포넌트만 사용
useState, useEffect, onClick, onChange, useRoute, ruseParams, useSearchParams , useFormState, useOptimistic 등...