⭐ Server 컴포넌트와 Client 컴포넌트 개념 정리

• 렌더링 (Next.js 공식문서 참고)

  • 사용자가 작성한 코드를 UI 로 변환

  • 렌더링 환경, 전략 및 런타임 간의 차이점 이해 필요
    
    

  • 요청-응답 수명주기

    • 사용자 작업 (이벤트나 방문 등)
    • HTTP 요청
    • 서버 (요청 처리 후 HTTP 응답 전송)
      • 응답 (상태코드, 리소스)
    • HTTP 응답
    • 클라이언트 (UI 렌더링, 리소스 파싱 분석)
    • 사용자 작업 (전체 프로세스 재시작)
    
    

  • 하이브리드 APP 구축 권장

    • 코드 흐름은 단방향 지향
      (마치 데이터 흐름, 부모가 자식에게)
      
      
    • 권장 구축 방법
      • 서버에서 실행할 항목 먼저 설계
      • 이 후에, 대화형으로 설계

• 간단 비교

  • Server Component

    • 렌더링 환경 : Server 에서 렌더링 (SSR)

    • 지시문 : "use server" (default, 생략가능)

    • 언제 사용 (?)

      • 더 나은 SEO 성능이 필요한 경우
      • 민감한 데이터를 서버 측에서 가져와
        클라이언트에 노출을 줄여 렌더링 하는 경우
      • 비대화형 페이지나 미리 가져온 콘텐츠를 표시하는 경우
      • 초기 페이지 로드

    • 모든 서버 컴포넌트가 async-await 가 필요한건 아니다.

      • 데이터를 가져오거나 비동기 작업을 수행한 경우만 필요
      • 동기식 또는 비동기식 모두가 될 수 있다.
      
      

  • Client Component

    • 렌더링 환경 : Client 에서 렌더링 (CSR)

    • 지시문 : "use client"

    • 언제 사용 (?)

      • 사용자 입력 및 양식이 있는 경우
      • 상호작용이 필요한 경우
      • 상태 관리가 필요한 경우
      • 이벤트 처리가 필요한 경우

@ Code Example

• Server Component

const PostContent = async ({postId}) => {
   const response = await fetch(`https://api.example.com/posts/${postId}`);
   const post = await response.json();
  
  return (
     <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
     </div>
  );
}
export default PostContent;

• Client Component

'use client';

import {useState} from "react";
import PostContent from "./PostContent";

const Post = ({postId}) => {
  const [likes, setLikes] = useState(0);
  
  return (
     <div>
      <PostContent postId={postId} />
      <button onClick={() => setLikes(likes+1)}>Like</button>
      {/* More interactive components like comments */}
     </div>
  );
}
export default Post;

• Server Component (Page)

import Post from "./Post";

const Page = () => {
  const postId = 1;
  
  return (
     <div>
      <h1>Blog Post</h1>
      <Post postId={postId} />
     </div>
  );
}
export default Page;

📢 TIPS

• 클라이언트 Compnent 에서 서버 Compenent 사용한 경우

@ 서버 구성 요소는 여전히 서버에서 렌더링
  클라이언트는 이 HTML 을 수신하여 즉시 표시 
@ 서버에서 렌더링되어 클라이언트에 정적 HTML 로 전송
@ 클라이언트 측에서 실행해야 하는 JS 의 양을 
  줄여 성능을 향상
@ 빠른 초기 로딩이 가능

🖍️ SSR

• 서버 측 렌더링
• 요청 시 페이지가 서버에서 사전 렌더링되고
  생성된 HTML이 클라이언트로 전송되는 경우
  

🖍️ CSR

• 클라이언트 측 렌더링
• JavaScript를 사용하여 브라우저에서 페이지가
  완전히 렌더링되는 경우