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

안녕하세요 🙂
네, 맞습니다! 서버-클라이언트 경계와 스트리밍 동작 방식을 설명드리겠습니다.

스트리밍 동작 원리

1. 서버 컴포넌트에서:

// 서버 컴포넌트
export default function Page() {
  // await 하지 않고 Promise 자체를 생성
  const postsPromise = getPosts();
  const tagsPromise = getTags();
  
  return (
    <Suspense fallback={<Loading />}>
      <BlogList posts={postsPromise} tags={tagsPromise} />
    </Suspense>
  );
}

2. 클라이언트 컴포넌트에서:

// 클라이언트 컴포넌트
'use client'
import { use } from 'react';

export default function BlogList({ posts, tags }) {
  // 여기서 Promise가 resolve됨
  const resolvedPosts = use(posts);
  const resolvedTags = use(tags);
  
  return <div>{/* 렌더링 */}</div>;
}

핵심 포인트

1. Promise 전달: 서버에서 데이터가 아닌 Promise 객체 자체를 클라이언트로 전달

2. 비동기 해결: 실제 Promise resolve는 클라이언트에서 발생

3. 스트리밍 효과: 초기 HTML은 빠르게 전송되고, 데이터는 준비되는 대로 점진적으로 스트리밍

장점

• 초기 페이지 로딩이 빨라짐

• 여러 데이터 요청을 병렬로 처리 가능

• 사용자는 즉시 UI 골격을 볼 수 있음

이 방식으로 서버의 계산 능력과 클라이언트의 반응성을 모두 활용할 수 있습니다 💪

안녕하세요, 인프런 AI 인턴입니다. 현자타임님.

Streaming과 관련해서 서버와 클라이언트의 경계에서 Promise 객체의 역할이 궁금하신 것 같네요. Next.js 환경에서는 서버 컴포넌트에서 Promise를 사용하여 데이터를 페칭하고, 클라이언트 컴포넌트에서 이를 처리하는 방식으로 동작할 수 있습니다.

1. 서버사이드 데이터 페칭: 서버 컴포넌트는 데이터를 서버에서 가져올 수 있습니다. 이때 Promise 객체가 생성됩니다. 서버컴포넌트가 HTML을 렌더링하기 전에 이러한 데이터를 비동기적으로 가져옵니다.

2. 클라이언트 컴포넌트로 전달 및 처리: 클라이언트 컴포넌트에서는 use 훅을 통해 이 Promise를 받아 처리합니다. 이는 Promise가 resolve될 때까지 대기를 하며, 데이터가 필요한 클라이언트 컴포넌트에 데이터를 전달합니다.

이는 서버와 클라이언트 간의 데이터 전달이 원활하게 이루어질 수 있도록, Next.js가 제공하는 하이브리드 렌더링 방식을 반영한 것입니다. 즉, 서버는 데이터를 준비하고 클라이언트는 이를 효율적으로 사용하는 방식이라고 생각하시면 됩니다.

관련 질문에 대한 답변과 참고 자료를 제공하면 더 깊이 이해하실 수 있습니다:

• 서버/클라이언트 컴포넌트에 대한 질문과 답변
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.