위클리페이퍼 13.

❓리액트만 사용할 때와 비교해 Next.js를 사용하는 이유

✅1. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)

• React: 기본적으로 클라이언트 사이드에서 렌더링됩니다. 즉, JavaScript가 브라우저에서 실행된 후에야 페이지가 완전히 렌더링되므로 초기 로딩이 느릴 수 있고, 검색 엔진 최적화(SEO)에 불리할 수 있습니다.
• Next.js: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. SSR은 페이지를 서버에서 미리 렌더링하여 초기 로딩 속도를 개선하고, SEO에 유리한 환경을 제공합니다. SSG는 빌드 시점에 정적 HTML을 생성하여 더욱 빠른 페이지 로딩을 가능하게 합니다.

✅2. 파일 기반 라우팅

• React: 라우팅을 위해 추가적으로 react-router 같은 라이브러리를 사용해야 하며, 라우트 설정을 명시적으로 구성해야 합니다.
• Next.js: 파일 기반 라우팅을 제공합니다. pages/ 디렉토리에 파일을 추가하면 자동으로 해당 파일 이름이 라우트 경로로 설정됩니다. 이 방식은 라우팅 구성을 간편하게 만들고, 코드의 가독성을 높입니다.

✅3. API Routes

• React: 클라이언트 사이드에서 API 호출을 처리하지만, 이를 위해 백엔드 서버 또는 외부 API를 별도로 구축해야 합니다.
• Next.js: 간단한 백엔드 API를 pages/api/ 디렉토리에서 설정할 수 있습니다. 이를 통해 서버리스 함수처럼 작동하는 API 엔드포인트를 쉽게 만들 수 있으며, 프론트엔드와 백엔드 코드가 한 프로젝트 내에 존재할 수 있어 유지보수성이 향상됩니다.

✅4. 이미지 최적화

• React: 이미지를 최적화하거나 로드할 때 별도의 라이브러리나 툴링이 필요합니다.
• Next.js: next/image 컴포넌트를 통해 자동으로 이미지 최적화를 제공하며, 다양한 장치와 화면 크기에 맞춰 이미지를 자동으로 리사이즈하고, 성능을 최적화합니다.

✅5. 빌트인 CSS 및 Sass 지원

• React: 스타일링을 위해 CSS 파일을 직접 로드하거나, styled-components, emotion 같은 CSS-in-JS 라이브러리를 사용해야 합니다.
• Next.js: CSS와 Sass 파일을 네이티브로 지원하며, CSS 모듈도 기본적으로 사용할 수 있습니다. 또한, 글로벌 스타일을 쉽게 적용할 수 있는 설정을 제공합니다.

✅7. SEO 최적화

• React: 기본적으로 클라이언트 사이드 렌더링이기 때문에, SEO에 불리할 수 있습니다.
• Next.js: SSR, SSG를 통해 검색 엔진이 페이지를 크롤링하기 전에 HTML이 렌더링되어 있어, SEO에 매우 유리합니다. 또한, 메타 태그 설정 등을 보다 쉽게 관리할 수 있습니다.

Next.js에서 SSR을 실행하는 과정과 hydration에 대한 설명

✅1. 서버 사이드 렌더링(SSR) 과정

![Pasted image 20240812031954.png]

서버 사이드 렌더링(SSR)은 사용자가 웹페이지에 접근할 때, 서버에서 페이지를 미리 렌더링하고 HTML을 생성하여 클라이언트에 전달하는 방식입니다.

01.클라이언트 요청

• 사용자가 웹 애플리케이션에 접속하면 클라이언트는 서버에 요청을 전송합니다.

02.서버에서 데이터 로드

• 서버는 해당 요청에 필요한 데이터를 로드합니다. 데이터는 API 호출, 데이터베이스 쿼리 등을 통해 가져올 수 있습니다.

03.컴포넌트 렌더링

• 서버는 로드한 데이터와 함께 React 컴포넌트를 렌더링합니다. 이때, 컴포넌트는 사용자에게 보여질 최종 HTML을 생성하는데 사용됩니다.

04.완성된 HTML 반환

• 서버는 완성된 HTML을 클라이언트에게 반환합니다. 이 HTML에는 컴포넌트가 렌더링된 상태와 필요한 데이터가 포함됩니다.

05.클라이언트 렌더링

• 클라이언트는 받은 HTML을 브라우저에 렌더링합니다. 이후에는 클라이언트 측 JavaScript 코드가 실행되어 해당 페이지의 상호작용이 가능해집니다.

페이지가 로드된 이후에는 사용자의 상호작용에 따라 클라이언트 측에서 추가적인 데이터 요청이 발생하고, 필요한 부분만 업데이트됩니다. 이는 일반적인 클라이언트 사이드 렌더링(CSR)과 유사합니다.

✅2. Hydration 과정

Hydration

Server-Side에서 렌더링 된 정적 페이지(HTML)와 번들링 된 JS 파일을 클라이언트에게 보내면, Client-Side에서 HTML 코드와 JS(React) 코드를 서로 매칭시키는 과정

Hydration 은 수분 공급이라는 의미를 갖는다.
👩‍🏫 수분기 없는 정적 웹 페이지에 물을 주는 느낌이라고 이해

• JS 코드들이 DOM 요소 위에 물을 채우듯 필요로 하던 요소들을 채운다하여 붙여진 이름이라고 한다.

Hydration은 클라이언트 사이드에서 React가 서버에서 렌더링된 HTML과 동기화되는 과정입니다. 이 과정은 아래와 같이 이루어집니다:

1. JavaScript 번들 다운로드:

   • 브라우저가 초기 HTML을 렌더링한 후, 서버에서 전달된 JavaScript 번들을 다운로드합니다. 이 번들은 React 컴포넌트를 포함하고 있습니다.

2. Hydration:

   • 다운로드된 JavaScript가 실행되면서, React는 서버에서 렌더링된 HTML과 자신의 가상 DOM(Virtual DOM)을 비교합니다.
   • 이 비교를 통해 React는 어떤 부분이 이미 렌더링되었는지 파악하고, 이를 재사용합니다. 즉, 기존에 서버에서 렌더링된 HTML을 재사용하면서, React의 이벤트 핸들러나 상태 관리 기능이 활성화됩니다.

3. 인터랙티브 페이지:

   • Hydration이 완료되면, 페이지는 인터랙티브해집니다. 즉, 사용자가 버튼을 클릭하거나 폼을 제출하는 등 다양한 인터랙션을 할 수 있습니다.
   • 이 과정에서 필요에 따라 React는 DOM을 업데이트합니다.

✅3. SSR과 Hydration의 중요성

• SSR의 장점:
  • 빠른 초기 로드: 서버에서 미리 렌더링된 HTML을 제공하므로, 사용자는 초기 로드 시 빈 화면을 보지 않고 바로 콘텐츠를 볼 수 있습니다.
  • SEO 최적화: 서버에서 완전한 HTML을 생성하여 검색 엔진이 페이지를 크롤링하기 쉽도록 합니다. 이는 특히 검색 엔진 최적화(SEO)에서 중요합니다.
• Hydration의 역할:
  • 동적 기능 추가: SSR로만 제공된 페이지는 정적인 HTML이므로, 사용자의 상호작용에 반응하지 않습니다. Hydration을 통해 페이지가 인터랙티브하게 변하고, React의 동적인 기능을 사용할 수 있게 됩니다.

요약

• SSR: 서버에서 HTML을 생성해 클라이언트에 제공하여 빠른 로딩과 SEO를 향상시킵니다.
• Hydration: 클라이언트에서 React가 서버에서 렌더링된 HTML과 동기화하여 페이지를 인터랙티브하게 만듭니다.

이 두 과정이 결합되어, 사용자에게 빠르고 동적인 웹 경험을 제공합니다.