CSR (Client-Side Rendering) 설명:#

CSR에서는 페이지 로딩 시, 서버에서 HTML 템플릿만 받아오고 그 이후의 콘텐츠는 브라우저에서 JavaScript로 동적으로 렌더링합니다. 즉, 초기 로딩 후에는 전체 페이지가 새로고침되지 않고 필요할 때마다 필요한 부분만 갱신하는 방식입니다.

SPA (Single-Page Application):#

SPA는 한 번만 HTML을 로드하고, 이후 페이지 전환은 서버와의 전체적인 새로 고침 없이 JavaScript를 통해 동적으로 페이지를 변경하는 방식입니다. CSR은 이러한 SPA의 렌더링 방식 중 하나로, 페이지를 이동할 때마다 서버 요청을 최소화하고 브라우저에서 모든 렌더링을 처리합니다.
즉, CSR은 SPA의 중요한 부분이며, 페이지 이동 시에도 전체 새로고침 없이 JavaScript로만 필요한 부분을 갱신하기 때문에 빠르고 유동적인 사용자 경험을 제공합니다.

• CSR (Client-Side Rendering):
  페이지가 처음 로드될 때 서버에서 HTML이 렌더링되어 클라이언트에 전달됩니다. 이후 사용자 상호작용(예: 버튼 클릭, 폼 제출 등)이 발생하면 페이지가 전체적으로 새로 고쳐지지 않고, React 컴포넌트만 업데이트됩니다. HTML은 재요청되지 않고, 클라이언트에서 JavaScript가 DOM을 업데이트하여 변경된 내용을 반영합니다.

• SSR (Server-Side Rendering):
  사용자가 페이지를 요청할 때마다, 서버에서 HTML을 매번 새로 생성하여 클라이언트에 전달합니다. 만약 페이지의 상태나 데이터가 변경되면, 클라이언트는 서버에 요청을 보내 새로운 HTML을 받아옵니다. 이 방식은 동적인 데이터를 필요로 하는 페이지에서 사용됩니다.

• ISR (Incremental Static Regeneration):
  ISR을 사용하면, 초기에는 정적 페이지를 제공하고, 그 후에는 페이지의 특정 부분이 주기적으로 업데이트됩니다. 사용자가 페이지를 요청할 때마다 새로운 HTML을 받을 필요는 없지만, 정해진 시간에 페이지의 일부를 갱신할 수 있습니다.

**하이드레이션 (Hydration)**은 Next.js와 같은 서버 사이드 렌더링(SSR) 기반 프레임워크에서 매우 중요한 개념입니다.

• Next - 하이드레이션 옛날에 정리

하이드레이션이란?#

하이드레이션은 서버에서 렌더링된 HTML을 클라이언트 측에서 JavaScript로 동적으로 연결하는 과정입니다. 초기 페이지 로딩 시, 서버에서 이미 렌더링된 HTML이 클라이언트에 전달되고, 이후 클라이언트에서 JavaScript가 이 HTML을 활성화(hydration)시켜 동적 상호작용을 가능하게 만듭니다. 즉, 페이지가 정적으로 표시된 후 클라이언트에서 상호작용 가능한 요소로 변환되는 과정입니다.

하이드레이션(Hydration)은 서버에서 렌더링된 HTML을 자바스크립트가 받아들여 동적으로 클라이언트에서 상호작용을 가능하게 만드는 과정입니다.

SSR과 하이드레이션의 연결#

• SSR에서는 페이지가 서버에서 먼저 렌더링되어 HTML로 클라이언트에 전달됩니다. 이때 서버에서 렌더링된 페이지는 정적으로만 보여지며, JavaScript로 추가적인 기능을 구현하려면 하이드레이션이 필요합니다.
• 하이드레이션은 클라이언트에서 JavaScript 코드가 실행되면서 DOM을 동적으로 활성화하고, 이후 상호작용이 가능하게 만드는 과정입니다.

예시: Next.js에서 하이드레이션#

Next.js에서는 서버 사이드 렌더링(SSR)을 사용하여 초기 HTML을 서버에서 생성하고, 클라이언트 측에서 하이드레이션을 통해 이 HTML을 JavaScript로 활성화합니다. 이 방식 덕분에 사용자는 페이지를 빠르게 렌더링하고, 이후에는 클라이언트 측 JavaScript로 페이지 상호작용이 가능해집니다.

왜 중요한가?#

• 초기 페이지 로딩 시간이 빠릅니다. SSR 덕분에 서버에서 렌더링된 HTML을 바로 사용자에게 보여주기 때문입니다.
• SEO 최적화에도 유리합니다. 서버에서 HTML을 미리 렌더링하여 검색 엔진 크롤러가 페이지 내용을 쉽게 인식할 수 있습니다.
• 하이드레이션은 서버에서 제공된 정적인 콘텐츠에 동적 기능을 추가하는 중요한 역할을 하므로, 사용자는 첫 화면을 빠르게 보고, 이후 JavaScript가 활성화되어 상호작용할 수 있습니다.

요약:#

• 하이드레이션은 SSR 방식에서 서버에서 렌더링된 HTML을 클라이언트에서 JavaScript로 동적으로 활성화하는 과정입니다. 이를 통해 클라이언트에서 페이지 상호작용을 할 수 있게 됩니다.

1. 서버 컴포넌트와 하이드레이션#

Next.js에서는 **서버 컴포넌트(Server Components)**와 **클라이언트 컴포넌트(Client Components)**를 혼합하여 사용할 수 있습니다.

• 서버 컴포넌트는 서버에서만 렌더링되고, 클라이언트에 전달된 HTML은 정적입니다. 이는 기본적으로 클라이언트에서 하이드레이션되지 않습니다.
• 클라이언트 컴포넌트는 하이드레이션 과정을 거쳐 서버에서 받은 HTML을 동적으로 활성화시킵니다. 즉, 서버에서 전달된 HTML이 클라이언트에서 동적 상호작용을 가능하게 만듭니다.

2. 두 번의 렌더링#

• 1차 렌더링 (서버 사이드 렌더링): 서버에서 렌더링된 HTML이 클라이언트에 전달됩니다. 이때 클라이언트는 HTML을 정적으로 받습니다.

• 2차 렌더링 (하이드레이션): 클라이언트에서 JavaScript가 활성화되면서, HTML은 동적으로 활성화됩니다. 즉, 클라이언트에서 상호작용할 수 있는 기능들이 동적으로 추가됩니다.

3. 상호작용과 하이드레이션#

클라이언트에서 상호작용하는 부분만 하이드레이션을 통해 업데이트됩니다. 즉, 사용자가 어떤 상호작용을 할 때, 서버에서 제공한 초기 HTML을 바탕으로 클라이언트 측에서만 필요한 JavaScript 코드가 실행되어 그 부분을 동적으로 업데이트합니다.

4. 서버 컴포넌트의 하이드레이션#

• 서버 컴포넌트는 클라이언트에서 하이드레이션되지 않기 때문에, 서버에서 렌더링된 HTML이 클라이언트에서 물리적으로 변경되지 않습니다.
• 대신, 클라이언트 컴포넌트가 하이드레이션되어 상호작용 가능한 영역이 생성됩니다.

요약:#

• 서버 컴포넌트는 서버에서 렌더링된 후, 클라이언트에서는 정적으로 표시됩니다. 하이드레이션을 거치지 않아요.
• 클라이언트 컴포넌트는 서버에서 제공된 HTML을 동적으로 활성화시키는 하이드레이션 과정을 거칩니다. 이때 사용자 상호작용이 일어나면 필요한 부분만 업데이트됩니다.
• 하이드레이션은 클라이언트에서 페이지 상호작용을 가능하게 하는 과정입니다.