Split View: React 서버 컴포넌트와 서버 퍼스트 웹 개발: 2026년 프론트엔드의 새 표준

// app/blog/page.tsx - Server Component (default)
import { db } from '@/lib/db';

export default async function BlogPage() {
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10
  });

  return (
    <div className="space-y-8">
      {posts.map(post => (
        <article key={post.id} className="border-b pb-8">
          <h2 className="text-2xl font-bold">{post.title}</h2>
          <p className="text-gray-600">{post.excerpt}</p>
          <a href={`/blog/${post.slug}`}>Read more</a>
        </article>
      ))}
    </div>
  );
}

app/
├── layout.tsx                    # Root layout (server)
├── page.tsx                      # Homepage (server)
├── blog/
│   ├── layout.tsx               # Blog layout (server)
│   ├── page.tsx                 # Blog list (server)
│   ├── [slug]/
│   │   └── page.tsx             # Blog detail (server)
│   └── search/
│       └── page.tsx             # Search results (server)
├── components/
│   ├── post-list.tsx            # Server component
│   ├── comment-section.tsx      # Client component
│   └── like-button.tsx          # Client component
└── api/
    └── comments/
        └── route.ts             # API route

// app/blog/[slug]/page.tsx - Server Component
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { db } from '@/lib/db';
import CommentSection from '@/components/comment-section';
import RelatedPosts from '@/components/related-posts';

type Props = {
  params: { slug: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });

  if (!post) return {};

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.imageUrl]
    }
  };
}

export default async function BlogPostPage({ params }: Props) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
    include: {
      author: true,
      tags: true
    }
  });

  if (!post) {
    notFound();
  }

  return (
    <article className="max-w-2xl mx-auto py-12">
      <header className="mb-8">
        <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
        <div className="flex items-center gap-4 text-gray-600">
          <span>{post.author.name}</span>
          <time dateTime={post.createdAt.toISOString()}>
            {post.createdAt.toLocaleDateString('en-US')}
          </time>
          <span>{post.readingTime} min read</span>
        </div>
      </header>

      <img
        src={post.imageUrl}
        alt={post.title}
        className="w-full rounded-lg mb-8"
      />

      <div
        className="prose max-w-none mb-12"
        dangerouslySetInnerHTML={{ __html: post.content }}
      />

      <RelatedPosts currentPostId={post.id} />
      <CommentSection postId={post.id} />
    </article>
  );
}

// app/components/comment-section.tsx - Client Component
'use client';

import { useState } from 'react';
import { submitComment } from '@/app/actions/comments';

export default function CommentSection({ postId }: { postId: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [comment, setComment] = useState('');

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      await submitComment(postId, comment);
      setComment('');
    } catch (error) {
      console.error('Failed to submit comment:', error);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <section className="mt-12 border-t pt-8">
      <h2 className="text-2xl font-bold mb-6">Comments</h2>

      <form onSubmit={handleSubmit} className="mb-8">
        <textarea
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          placeholder="Write a comment"
          className="w-full p-4 border rounded-lg mb-4"
          rows={4}
          required
        />
        <button
          type="submit"
          disabled={isSubmitting}
          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          {isSubmitting ? 'Submitting...' : 'Post Comment'}
        </button>
      </form>
    </section>
  );
}

// app/actions/comments.ts - Server Action
'use server'

import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'

export async function submitComment(postId: string, content: string) {
  const comment = await db.comment.create({
    data: {
      postId,
      content,
      authorId: (await getCurrentUser()).id,
    },
  })

  revalidatePath(`/blog/${postId}`)
  return comment
}

// pages/_app.tsx (existing Pages Router)
import RootLayout from '@/components/layout';

function MyApp({ Component, pageProps }) {
  return (
    <RootLayout>
      <Component {...pageProps} />
    </RootLayout>
  );
}

export default MyApp;

// app/layout.tsx (new App Router)
export const metadata = {
  title: 'My Blog',
  description: 'A modern blog with RSC'
};

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// pages/blog/[slug].tsx (existing)
import { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const post = await fetchPost(params.slug);
  return {
    props: { post },
    revalidate: 3600
  };
};

export default function BlogPost({ post }) {
  return <article>{post.title}</article>;
}

// app/blog/[slug]/page.tsx (new)
export default async function BlogPost({
  params
}: {
  params: { slug: string }
}) {
  const post = await fetchPost(params.slug);
  return <article>{post.title}</article>;
}

// Traditional: Indirect access via API route
// pages/api/posts/[id].ts
export default async function handler(req, res) {
  const post = await db.post.findUnique({ where: { id: req.query.id } })
  res.json(post)
}

// pages/blog/[id].tsx
const [post, setPost] = useState(null)
useEffect(() => {
  fetch(`/api/posts/${id}`)
    .then((r) => r.json())
    .then(setPost)
}, [id])

// Modern: Direct access (Server Component)
// app/blog/[id]/page.tsx
export default async function BlogPost({ params }) {
  const post = await db.post.findUnique({ where: { id: params.id } });
  return <article>{post.title}</article>;
}

import { unstable_cache } from 'next/cache';

const getCachedPosts = unstable_cache(
  async () => {
    return db.post.findMany({
      orderBy: { createdAt: 'desc' },
      take: 10
    });
  },
  ['posts'],
  { revalidate: 3600, tags: ['posts'] }
);

export default async function BlogPage() {
  const posts = await getCachedPosts();
  return <PostList posts={posts} />;
}

export const revalidate = 3600; // Revalidate every hour

export async function generateStaticParams() {
  const posts = await db.post.findMany();
  return posts.map(post => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });
  return <article>{post.title}</article>;
}

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      <Suspense fallback={<LoadingUsers />}>
        <UserList />
      </Suspense>

      <Suspense fallback={<LoadingAnalytics />}>
        <Analytics />
      </Suspense>
    </div>
  );
}

async function UserList() {
  const users = await db.user.findMany();
  return <div>{users.map(u => <p key={u.id}>{u.name}</p>)}</div>;
}

async function Analytics() {
  const data = await fetchAnalytics();
  return <div>{data.total} users</div>;
}

// Data fetching - all RSC-optimized
import { prisma } from '@prisma/client'
import { drizzle } from 'drizzle-orm'

// Form handling
import { useFormState, useFormStatus } from 'react-dom'

// Caching and ISR
import { revalidatePath, revalidateTag } from 'next/cache'

// Streaming
import { renderToReadableStream } from 'react-dom/server'

// Wrong
export default async function Page() {
  const theme = localStorage.getItem('theme'); // Error!
  return <div>Theme: {theme}</div>;
}

// Correct
'use client';

import { useState, useEffect } from 'react';

export default function Page() {
  const [theme, setTheme] = useState(null);

  useEffect(() => {
    setTheme(localStorage.getItem('theme'));
  }, []);

  return <div>Theme: {theme}</div>;
}

// Inefficient: entire page is a client component
'use client';

export default function Page({ children }) {
  return <Layout>{children}</Layout>;
}

// Efficient: only interactive parts are client components
export default function Page({ children }) {
  return (
    <Layout>
      <ServerContent />
      <ClientInteractiveSection />
    </Layout>
  );
}

// Inefficient: simple toggle causes full page revalidation
'use server';
export async function toggleLike(id: string) {
  // Revalidates entire page every time
  revalidatePath('/');
}

// Efficient: optimistic updates on client
'use client';
export default function LikeButton({ id }: { id: string }) {
  const [liked, setLiked] = useState(false);

  async function handleLike() {
    setLiked(!liked);
    await toggleLike(id); // Background processing
  }

  return <button onClick={handleLike}>{liked ? '❤️' : '🤍'}</button>;
}