Next.js의 핵심 개념 이해하기: 리액트를 기반으로 한 웹 개발 프레임워크

Next.js란?

Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크입니다.

React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현합니다.

후드 아래에서 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 툴링을 추상화하고 자동으로 구성합니다.

서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR) 설명

웹 개발에서 페이지를 렌더링하는 방식은 크게 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)으로 나뉩니다.

서버 사이드 렌더링은 서버에서 HTML을 생성하여 클라이언트로 전송하는 방식이며

클라이언트 사이드 렌더링은 클라이언트에서 JavaScript를 사용하여 동적으로 HTML을 생성하는 방식입니다.

Next.js의 프리랜더링 방식

프리렌더링이란?

프리렌더링(Pre-rendering)은 웹 페이지의 HTML을 서버에서 미리 생성하는 작업을 말합니다.
이를 통해 브라우저에서 페이지를 렌더링하는 시점에 이미 필요한 HTML이 준비되어 있게 되므로
사용자에게 웹 페이지의 내용을 빠르게 제공할 수 있게 됩니다.
React 프로젝트를 Next.js를 통해 프리렌더링을 하면 빈 HTML 대신 프리렌더링된 HTML 파일을 제공하므로 검색엔진 최적화가 가능합니다.

프리렌더링 방식

• 정적 생성(Static Generation): 이 방식은 빌드 타임에 모든 필요한 HTML을 미리 생성합니다.
  각 페이지는 빌드 타임에 콘텐츠를 불러와 HTML을 생성하며, 이 HTML은 사용자가 페이지를 요청할 때마다 재사용됩니다. 이 방식은 콘텐츠가 사용자에 따라 달라지지 않는 사이트에 적합합니다.
• 서버-사이드 렌더링 (Server-Side Rendering, SSR): 이 방식은 사용자가 페이지를 요청할 때마다 HTML을
  생성합니다. 이는 콘텐츠가 자주 업데이트되거나 각 사용자에게 개별적으로 맞춤화된 콘텐츠를 제공해야 하는 사이트에 적합합니다.