Next.js App Router 常見踩雷：Server / Client Component 怎麼切？

1export default async function PostPage({
2  params,
3}: {
4  params: Promise<{ slug: string }>;
5}) {
6  const { slug } = await params;
7
8  const post = await getPostBySlug(slug);
9
10  return (
11    <main>
12      <h1>{post.title}</h1>
13      <article>{post.content}</article>
14    </main>
15  );
16}

1'use client';
2
3import { useState } from 'react';
4
5export function Counter() {
6  const [count, setCount] = useState(0);
7
8  return (
9    <button onClick={() => setCount((prev) => prev + 1)}>
10      Count: {count}
11    </button>
12  );
13}

1'use client';
2
3export default function PostPage() {
4  return (
5    <main>
6      <PostHeader />
7      <PostContent />
8      <LikeButton />
9    </main>
10  );
11}

1export default async function PostPage() {
2  const post = await getPost();
3
4  return (
5    <main>
6      <PostHeader title={post.title} />
7      <PostContent content={post.content} />
8      <LikeButton postId={post.id} />
9    </main>
10  );
11}

1'use client';
2
3export function LikeButton({ postId }: { postId: string }) {
4  return <button onClick={() => console.log(postId)}>Like</button>;
5}

1'use client';
2
3export function PostCard({ post }: { post: Post }) {
4  return (
5    <article>
6      <h2>{post.title}</h2>
7      <p>{post.excerpt}</p>
8      <button onClick={() => alert('saved')}>收藏</button>
9    </article>
10  );
11}

1export function PostCard({ post }: { post: Post }) {
2  return (
3    <article>
4      <h2>{post.title}</h2>
5      <p>{post.excerpt}</p>
6      <SaveButton postId={post.id} />
7    </article>
8  );
9}

1'use client';
2
3export function SaveButton({ postId }: { postId: string }) {
4  return (
5    <button onClick={() => alert(`saved: ${postId}`)}>
6      收藏
7    </button>
8  );
9}

1'use client';
2
3import { useEffect, useState } from 'react';
4
5export default function PostsPage() {
6  const [posts, setPosts] = useState<Post[]>([]);
7
8  useEffect(() => {
9    fetch('/api/posts')
10      .then((res) => res.json())
11      .then(setPosts);
12  }, []);
13
14  return (
15    <main>
16      {posts.map((post) => (
17        <PostCard key={post.id} post={post} />
18      ))}
19    </main>
20  );
21}

1export default async function PostsPage() {
2  const posts = await getPosts();
3
4  return (
5    <main>
6      {posts.map((post) => (
7        <PostCard key={post.id} post={post} />
8      ))}
9    </main>
10  );
11}

1'use client';
2
3const apiKey = process.env.SECRET_API_KEY;

1export default async function DashboardPage() {
2  const data = await getDashboardData();
3
4  return <DashboardView data={data} />;
5}

1'use client';
2
3export function DashboardView({ data }: { data: DashboardData }) {
4  return <div>{data.title}</div>;
5}

1<ClientComponent onClick={handleClick} />

1<ClientComponent postId={post.id} />

1'use client';
2
3export function ClientComponent({ postId }: { postId: string }) {
4  function handleClick() {
5    console.log(postId);
6  }
7
8  return <button onClick={handleClick}>Click</button>;
9}

1export default async function SettingsPage() {
2  const profile = await getProfile();
3
4  return (
5    <main>
6      <h1>設定</h1>
7      <ProfileForm profile={profile} />
8    </main>
9  );
10}

1'use client';
2
3export function ProfileForm({ profile }: { profile: Profile }) {
4  return (
5    <form>
6      <input defaultValue={profile.name} />
7      <button type="submit">儲存</button>
8    </form>
9  );
10}

1PostPage.server
2  ├── PostHeader.server
3  ├── PostContent.server
4  ├── RelatedPosts.server
5  ├── ShareButton.client
6  └── FavoriteButton.client

1export default async function PostPage({
2  params,
3}: {
4  params: Promise<{ slug: string }>;
5}) {
6  const { slug } = await params;
7  const post = await getPostBySlug(slug);
8
9  return (
10    <main>
11      <PostHeader title={post.title} publishedAt={post.publishedAt} />
12      <PostContent content={post.content} />
13
14      <div>
15        <ShareButton title={post.title} />
16        <FavoriteButton postId={post.id} />
17      </div>
18    </main>
19  );
20}

1/posts?keyword=react&category=frontend&page=1

1export default async function PostsPage({
2  searchParams,
3}: {
4  searchParams: Promise<{
5    keyword?: string;
6    category?: string;
7    page?: string;
8  }>;
9}) {
10  const params = await searchParams;
11
12  const posts = await getPosts({
13    keyword: params.keyword,
14    category: params.category,
15    page: Number(params.page ?? 1),
16  });
17
18  return (
19    <main>
20      <PostSearchBar />
21      <PostList posts={posts} />
22    </main>
23  );
24}

1'use client';
2
3import { useRouter, useSearchParams } from 'next/navigation';
4
5export function PostSearchBar() {
6  const router = useRouter();
7  const searchParams = useSearchParams();
8
9  function handleSearch(keyword: string) {
10    const params = new URLSearchParams(searchParams);
11
12    if (keyword) {
13      params.set('keyword', keyword);
14    } else {
15      params.delete('keyword');
16    }
17
18    router.push(`/posts?${params.toString()}`);
19  }
20
21  return (
22    <input
23      placeholder="搜尋文章"
24      onChange={(event) => handleSearch(event.target.value)}
25    />
26  );
27}

1Client 更新 URL
2        ↓
3Server 根據 searchParams 取得資料
4        ↓
5畫面重新渲染

1'use client';
2
3import { useQuery } from '@tanstack/react-query';
4
5export function NotificationList() {
6  const { data, isLoading } = useQuery({
7    queryKey: ['notifications'],
8    queryFn: fetchNotifications,
9  });
10
11  if (isLoading) return <p>Loading...</p>;
12
13  return (
14    <ul>
15      {data?.map((item) => (
16        <li key={item.id}>{item.title}</li>
17      ))}
18    </ul>
19  );
20}

1'use client';
2
3import { useUiStore } from '@/stores/useUiStore';
4
5export function MobileMenuButton() {
6  const openMenu = useUiStore((state) => state.openMenu);
7
8  return <button onClick={openMenu}>Menu</button>;
9}

1Layout.server
2  ├── Header.server
3  ├── MobileMenuButton.client
4  └── MobileDrawer.client

1Server Component
2  負責資料取得、SEO、權限前置檢查、靜態內容、版面骨架
3
4Client Component
5  負責互動、表單、瀏覽器 API、client state、mutation 操作

1Page.server
2  ├── Data Section.server
3  ├── Content Section.server
4  ├── SEO Content.server
5  └── Interactive Widget.client