SSR CSR

안녕하세요, jwb449730님! 질문 주셔서 감사합니다. 언제든지 궁금한 점이 있으시면 편하게 문의해주세요. 다음 강의로는 'Notion 클론'을 준비하고 있으니, 이에 대한 많은 기대와 관심 부탁드립니다. 오늘도 즐겁고 보람찬 하루 되시길 바랍니다😸😸.

질문에 대한 답변은 다음과 같습니다:

page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 )

네 맞습니다!

하이브리드 렌더링은 웹 페이지의 초기 로딩을 위해 SSR(Server-Side Rendering)을 사용하고, 페이지 내에서 특정 동적 기능이나 브라우저 API 사용이 필요한 부분에 대해서는 CSR(Client-Side Rendering)을 사용하는 전략입니다. 이 방식은 초기 페이지 로딩 속도를 개선하고 검색 엔진 최적화(SEO)에 유리하면서도, 클라이언트 측에서의 동적인 사용자 경험을 보장합니다.

SSR 사용 사례 (블로그 포스트 목록): 사용자가 블로그 포스트 목록 페이지에 접근할 때, 서버에서 모든 포스트를 미리 렌더링하여 전송합니다. 이는 사용자가 페이지에 접근하는 즉시 모든 포스트를 볼 수 있게 해줄 뿐만 아니라, 검색 엔진에 의해 콘텐츠가 색인될 수 있도록 해줍니다.
CSR 사용 사례 (실시간 댓글 시스템): 동일한 블로그 포스트 목록 페이지 내에서, 사용자가 댓글을 남길 수 있는 섹션은 CSR을 사용합니다. 사용자가 댓글을 작성하고 제출 버튼을 누르면, 해당 댓글은 클라이언트 측에서 서버로 전송되고, 페이지에 동적으로 댓글이 추가됩니다. 이 과정은 서버에서 렌더링되는 대신 사용자의 상호작용에 의해 실시간으로 이루어집니다.

이처럼 하이브리드 렌더링 방식을 사용하면, 서버 측에서의 빠른 초기 로드와 클라이언트 측에서의 풍부한 상호작용이라는 두 가지 이점을 모두 활용할 수 있습니다.

app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?

Next.js 또는 유사한 프레임워크에서 app/page.tsx 파일 상단에 "use client"를 선언하면, 해당 페이지는 클라이언트 측에서 전적으로 렌더링됩니다. 이는 페이지의 모든 JavaScript 기반 상호작용과 데이터 처리가 브라우저에서 수행됨을 의미합니다. 그러나 네트워크 탭에서 렌더링된 내용이 보이는 이유는 다음과 같습니다:
- 초기 HTML 구조: 서버에서는 페이지의 기본 HTML 구조를 생성하고 이를 브라우저로 전송합니다. 이 초기 HTML은 페이지의 기본 레이아웃이나 간단한 마크업을 포함할 수 있으며, 사용자가 페이지를 처음 로드할 때 보게 됩니다.
- 클라이언트 측 JavaScript의 역할: 브라우저에서 JavaScript가 로드되고 실행되면, 이 초기 HTML 위에 추가적인 동적 요소와 데이터가 추가됩니다. 이 과정을 '하이드레이션(Hydration)'이라고 하며, 서버에서 받은 기본 HTML이 클라이언트 측의 상호작용에 의해 갱신되고 확장됩니다.
- 예시와 상황 설명: 예를 들어, "use client"로 선언된 대시보드 페이지는 처음에 서버에서 전송된 기본 HTML 레이아웃을 보여줍니다. 이후 클라이언트 측 JavaScript가 로드되어 페이지에 사용자의 대시보드 데이터나 인터랙티브한 요소들을 추가합니다. 네트워크 탭에서는 이 초기 HTML 구조가 보이지만, 페이지의 전체 기능성은 클라이언트 측 JavaScript에 의해 제공됩니다.
결론적으로, "use client" 선언은 페이지가 클라이언트 측에서 완전히 렌더링되도록 지시하지만, 사용자 경험을 위해 초기 서버에서 생성된 HTML 구조가 먼저 표시될 수 있습니다.

인프런 커뮤니티 질문&답변