2장: React Server Components 아키텍처 심층 분석

// app/article/[id]/page.tsx
import { marked } from 'marked';
import sanitizeHtml from 'sanitize-html';
 
async function ArticlePage({ params }: { params: { id: string } }) {
  const article = await db.articles.findUnique({
    where: { id: params.id },
  });
 
  // marked(~35KB)와 sanitize-html(~40KB)은
  // 클라이언트 번들에 포함되지 않음
  const html = sanitizeHtml(marked(article.content));
 
  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      <CommentSection articleId={article.id} />
    </article>
  );
}

'use client';
 
import { useState } from 'react';
 
function LikeButton({ articleId }: { articleId: string }) {
  const [liked, setLiked] = useState(false);
 
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '좋아요 취소' : '좋아요'}
    </button>
  );
}

// Server Component
async function Page() {
  const posts = await fetchPosts();
  return (
    <main>
      <h1>블로그</h1>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
      <Newsletter />   {/* Client Component */}
    </main>
  );
}
 
// Server Component
function PostCard({ post }: { post: Post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <LikeButton postId={post.id} />  {/* Client Component */}
    </article>
  );
}

// app/page.tsx (Server Component)
import { SearchBar } from '@/components/SearchBar'; // Client Component
 
async function Page() {
  const data = await fetchData();
  return (
    <div>
      <SearchBar />        {/* Client Component 렌더링 */}
      <DataTable data={data} />  {/* Server Component */}
    </div>
  );
}

'use client';
 
// 이 임포트는 오류를 발생시킵니다
import { ServerDataFetcher } from './ServerDataFetcher';
 
function Dashboard() {
  return (
    <div>
      {/* Server Component를 직접 임포트하여 사용할 수 없음 */}
      <ServerDataFetcher />
    </div>
  );
}

// components/ClientWrapper.tsx
'use client';
 
function ClientWrapper({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(true);
 
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>토글</button>
      {isOpen && children}  {/* Server Component의 렌더링 결과 */}
    </div>
  );
}
 
// app/page.tsx (Server Component)
import { ClientWrapper } from '@/components/ClientWrapper';
 
async function Page() {
  const data = await fetchData();
  return (
    <ClientWrapper>
      {/* ServerDataTable은 Server Component이지만,
          Page(Server Component)가 렌더링한 결과를
          ClientWrapper에 children으로 전달 */}
      <ServerDataTable data={data} />
    </ClientWrapper>
  );
}

// 허용: 원시 값, 배열, 객체, Date, Map, Set, JSX
<ClientComponent
  name="Kreath"
  count={42}
  tags={['react', 'rsc']}
  createdAt={new Date()}
>
  <ServerChild />  {/* JSX도 직렬화 가능 */}
</ClientComponent>
 
// 금지: 함수, 클래스 인스턴스, Symbol
<ClientComponent
  onClick={() => console.log('click')}  // 함수는 직렬화 불가
  validator={new Validator()}            // 클래스 인스턴스 불가
/>

// components/Dashboard.tsx
'use client';  // 이 파일부터 클라이언트 경계 시작
 
import { Chart } from './Chart';       // Chart도 Client Component가 됨
import { Tooltip } from './Tooltip';   // Tooltip도 Client Component가 됨
 
function Dashboard() {
  return (
    <div>
      <Chart />
      <Tooltip />
    </div>
  );
}

// 나쁜 예: 최상위에 'use client'
// app/dashboard/page.tsx
'use client';  // 전체 페이지가 Client Component
 
function DashboardPage() {
  // 이 페이지의 모든 하위 컴포넌트가 클라이언트 번들에 포함
  return (
    <div>
      <StaticHeader />      {/* 서버 컴포넌트가 될 수 있었음 */}
      <DataSummary />        {/* 서버 컴포넌트가 될 수 있었음 */}
      <InteractiveChart />   {/* 실제로 클라이언트가 필요한 부분 */}
    </div>
  );
}

// 좋은 예: 인터랙션이 필요한 곳에만 'use client'
// app/dashboard/page.tsx (Server Component)
async function DashboardPage() {
  const summary = await fetchSummary();
  return (
    <div>
      <StaticHeader />
      <DataSummary data={summary} />
      <InteractiveChart />   {/* 이것만 Client Component */}
    </div>
  );
}
 
// components/InteractiveChart.tsx
'use client';
function InteractiveChart() {
  const [range, setRange] = useState('7d');
  // ... 인터랙티브 차트 로직
}

async function UserProfile({ userId }: { userId: string }) {
  // 데이터베이스에서 직접 조회
  const user = await db.users.findUnique({
    where: { id: userId },
    include: { posts: { take: 5, orderBy: { createdAt: 'desc' } } },
  });
 
  if (!user) return <NotFound />;
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      <section>
        <h2>최근 글</h2>
        {user.posts.map(post => (
          <PostPreview key={post.id} post={post} />
        ))}
      </section>
    </div>
  );
}

async function ArticlePage({ params }: { params: { id: string } }) {
  // 핵심 데이터: 즉시 로드 (서버 렌더링을 블로킹)
  const article = await db.articles.findUnique({
    where: { id: params.id },
  });
 
  // 부가 데이터: Promise를 생성하되 await하지 않음
  const commentsPromise = db.comments.findMany({
    where: { articleId: params.id },
  });
  const relatedPromise = db.articles.findRelated(params.id);
 
  return (
    <article>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
 
      {/* 댓글은 준비되면 스트리밍 */}
      <Suspense fallback={<CommentsSkeleton />}>
        <Comments commentsPromise={commentsPromise} />
      </Suspense>
 
      {/* 관련 글도 별도로 스트리밍 */}
      <Suspense fallback={<RelatedSkeleton />}>
        <RelatedArticles relatedPromise={relatedPromise} />
      </Suspense>
    </article>
  );
}

// 1. useState, useEffect 등 클라이언트 훅
function ServerComponent() {
  const [count, setCount] = useState(0);  // 오류
  useEffect(() => { /* ... */ }, []);     // 오류
}
 
// 2. 이벤트 핸들러
function ServerComponent() {
  return <button onClick={() => alert('click')}>클릭</button>;  // 오류
}
 
// 3. 브라우저 전용 API
function ServerComponent() {
  const width = window.innerWidth;  // 오류: window 미정의
  localStorage.setItem('key', 'value');  // 오류
}
 
// 4. Context 생성 (소비는 가능)
function ServerComponent() {
  return (
    <ThemeContext.Provider value="dark">  // 오류
      <Children />
    </ThemeContext.Provider>
  );
}

// 1. 데이터베이스 접근
const user = await db.users.findUnique({ where: { id: userId } });
 
// 2. 파일 시스템 접근
const content = await fs.readFile('./data/config.json', 'utf-8');
 
// 3. 환경 변수 (서버 전용)
const apiKey = process.env.SECRET_API_KEY;
 
// 4. 서버 전용 라이브러리
import { marked } from 'marked';
import { createHash } from 'crypto';
 
// 5. async/await
async function fetchAndRender() { /* ... */ }
 
// 6. Context 소비 (use API 사용)
import { use } from 'react';
const theme = use(ThemeContext);

// lib/data/articles.ts (서버 전용)
import { cache } from 'react';
 
export const getArticle = cache(async (id: string) => {
  const article = await db.articles.findUnique({
    where: { id },
    include: { author: true, tags: true },
  });
  return article;
});
 
export const getArticleComments = cache(async (articleId: string) => {
  return db.comments.findMany({
    where: { articleId },
    include: { author: true },
    orderBy: { createdAt: 'desc' },
  });
});

// app/articles/page.tsx (Server Component = Container)
async function ArticlesPage() {
  const articles = await getArticles();
  const categories = await getCategories();
 
  return (
    <div>
      <CategoryFilter categories={categories} />  {/* Client */}
      <ArticleGrid articles={articles} />          {/* Client */}
    </div>
  );
}

// components/ArticleGrid.tsx (Client Component = Presentational)
'use client';
 
import { useState } from 'react';
 
function ArticleGrid({ articles }: { articles: Article[] }) {
  const [sortBy, setSortBy] = useState<'date' | 'title'>('date');
 
  const sorted = [...articles].sort((a, b) =>
    sortBy === 'date'
      ? b.date.getTime() - a.date.getTime()
      : a.title.localeCompare(b.title)
  );
 
  return (
    <div>
      <select onChange={(e) => setSortBy(e.target.value as 'date' | 'title')}>
        <option value="date">최신순</option>
        <option value="title">제목순</option>
      </select>
      <div className="grid grid-cols-3 gap-4">
        {sorted.map(article => (
          <ArticleCard key={article.id} article={article} />
        ))}
      </div>
    </div>
  );
}