use client & Hydration

하이드레이션(Hydration)

• 우리가 받은 HTML의 위에 React application을 실행한다는 의미
• SSR로 생성된 정적 HTML을 클라이언트 사이드에서 동적(interactive)으로 만들어주는 과정

SSR

서버는 클라이언트의 요청에 응답하여 해당 페이지의 초기 상태를 반영한 HTML을 생성하고 전송합니다.
이 HTML은 페이지의 구조와 초기 콘텐츠를 포함하며, CSS를 통해 스타일이 적용됩니다.

HTML 로딩 및 초기 페이지 표시

• 클라이언트(브라우저)는 서버로부터 받은 HTML을 로드하고 사용자에게 초기 페이지를 표시
• 이 시점에서 페이지는 정적이며, 사용자와의 상호작용은 제한적입니다.

JavaScript 번들 로딩

• 브라우저는 페이지와 함께 서버로부터 전송된 JavaScript 파일(번들)을 비동기적으로 로드

하이드레이션

• JavaScript가 로드되고 나면, 스크립트는 이미 로드된 HTML에 접근하여 이벤트 리스너, 상태 관리, 동적 데이터 바인딩 등을 추가
• 하이드레이션 과정이 완료되면, 페이지는 인터랙티브하게 동작한다.

이러한 하이드레이션은 사용자에게 빠른 첫 화면을 제공하면서도, 페이지를 완전히 동적이고 상호작용이 가능한 상태로 만드는 데 필수적인 과정이다.

use client

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

파일 최상단의 'use client'의 의미는 아래와 같다.

이봐 이 component는 client에서 interactive해야해
이 component는 hydrate 작업을 실행해야해

즉 우리가 받은 HTML의 위에 React application을 실행을 선택적으로 가능하다는 의미이다.

client에서 interactive에서 만들어질 components는 오직 use client 지시어를 맨위에 가지고 있는 components들 뿐이다.
'use client 가 없다면 React component가 되지 않고. hydrate 되지도 않는다.

장점

• 어떠한 useState나 onClick events 등이 없을 경우 굳이 javascript를 받지 않는다.
• 로딩속도에 대한 장점을 가져온다!
• data fetching을 할때 장점을 가져온다.

유의할점

'use client' 의 의미는 아래와 같다.
정확히는 backend에서 render되고 frontend에서 hydrate된다는 의미이다.
'use client' 유무와 상관없이 모든 component들은 backend에서 pre rendering되서 우리에게 온다.

• server components : server에서 먼저 render되고, hydrate되지는 않는다.
• clinet components : server에서 먼저 render되고 나서 hydreate 된다.

CSR(Client-Side Rendering)

클라이언트 사이드 렌더링(Client-Side Rendering, CSR)은 웹 애플리케이션의 페이지가 브라우저에서 완전히 렌더링되는 방식

초기 로드시 서버로부터 받은 HTML 문서가 최소한의 구조만을 가지고 있으며, 페이지의 실질적인 내용은 브라우저에서 동작하는 자바스크립트에 의해 생성됩니다.

• 초기 요청: 사용자가 웹사이트에 접근할 때, 서버는 최소한의 HTML 문서와 웹사이트를 동작시키는 자바스크립트(일반적으로 번들된 애플리케이션 로직)를 제공

• 브라우저 로딩: 브라우저는 이 HTML을 로드하고, <script> 태그를 통해 자바스크립트 파일을 다운로드

• 자바스크립트 실행: 자바스크립트가 실행되면서, React, Vue, Angular 등의 클라이언트 사이드 라이브러리/프레임워크가 초기화된다.

• API 호출: 애플리케이션은 필요한 데이터를 가져오기 위해 API 호출을 수행

• 콘텐츠 렌더링: API로부터 받은 데이터를 바탕으로 자바스크립트가 동적으로 HTML을 생성하고, DOM을 업데이트하여 사용자에게 페이지 콘텐츠를 표시

사용자가 페이지 내에서 다른 요소들과 상호작용(예: 링크 클릭, 폼 제출 등)할 때마다, 자바스크립트가 이를 처리하고 새로운 데이터를 불러와 화면을 갱신

단점

• 초기 로드 시간: 첫 페이지 로드 시에 자바스크립트 파일 전체를 다운로드하고 파싱해야 하므로 초기 로드 시간이 길어짐
• SEO 문제: 검색 엔진이 자바스크립트로 렌더링된 콘텐츠를 크롤링하고 인덱싱하는 데 어려움(구글은 가능하다는 소리를 들었다)

SSR(Server-Side Rendering)

서버 사이드 렌더링(SSR)은 웹 애플리케이션 또는 페이지를 서버에서 렌더링하는 기술
SSR에서는 사용자가 웹 페이지에 접속할 때, 서버는 해당 요청에 맞는 완전한 HTML을 생성하여 사용자의 브라우저로 전송한다.

• 페이지 요청: 사용자가 웹페이지에 접속하면 서버로 요청을 보냅니다.

• 데이터 로드: 서버는 데이터베이스나 API 등에서 필요한 데이터를 가져옵니다.

• HTML 렌더링: 서버는 가져온 데이터와 서버 사이드의 자바스크립트 애플리케이션을 사용하여 최종적인 HTML을 렌더링합니다.

• 결과 전송: 렌더링된 HTML 페이지가 사용자의 브라우저로 전송됩니다. 이 페이지는 브라우저에 의해 빠르게 표시됩니다.

• 브라우저 처리: 브라우저는 서버로부터 받은 HTML을 처리하고 표시한 후, 페이지를 인터랙티브하게 만들기 위해 필요한 자바스크립트 파일을 다운로드하고 실행합니다.

• 하이드레이션: 초기에 렌더링된 HTML에 자바스크립트를 연결하여 페이지를 동적으로 만드는 과정입니다. 이 과정에서 이벤트 핸들러 등이 활성화되어 사용자 상호작용을 가능하게 합니다.
  이 방식은 특히 초기 로딩 시간을 단축시키고, 검색 엔진 최적화(SEO)에 유리하다.

장단점

• 향상된 성능: 사용자에게 빠르게 초기 페이지를 보여줄 수 있습니다.
• SEO 최적화: 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있습니다.
• 서버 부하: 모든 페이지 렌더링이 서버에서 이루어지므로 서버에 부하가 더 많이 가해질 수 있습니다.

SSG(Static Site Generation)

SSG(Static Site Generation)는 빌드 타임에 웹사이트의 모든 페이지를 미리 생성하여 정적 파일로 서버에 저장하는 방식
방문자가 요청할 때, 서버는 사전에 생성된 HTML 파일을 즉시 제공

특히 콘텐츠가 자주 변경되지 않는 웹사이트에 적합하며, 블로그, 마케팅 웹사이트, 문서 사이트 등에서 흔히 사용

Next.js를 포함한 현대적인 웹 프레임워크는 SSG를 매우 효율적으로 지원하며, 개발자는 손쉽게 SSG를 활용할 수 있습니다.

• 빌드 타임: 개발자가 애플리케이션을 빌드하는 과정에서, 각 페이지에 필요한 데이터를 가져와서 정적 HTML 파일을 생성합니다.

• 파일 저장: 생성된 HTML, CSS, JavaScript 파일들이 서버에 정적 파일로 저장됩니다.

• 요청 처리: 사용자가 웹사이트에 접속할 때, 서버는 사전에 생성된 정적 파일을 즉시 제공합니다.

• 브라우저 렌더링: 브라우저는 정적 파일을 로드하고 렌더링하여 사용자에게 보여줍니다.

• 클라이언트 사이드 동작 : 클라이언트 사이드 자바스크립트가 활성화되면서 페이지가 인터렉티브하게 변화