Next.js 服务端组件：一次范式转移

import { useEffect, useState } from "react";

export default function ProfilePage() {
  const [profile, setProfile] = useState<Profile | null>(null);
  const [orders, setOrders] = useState<Order[]>([]);

  useEffect(() => {
    // 第一跳：拿用户
    fetch("/api/me").then((r) => r.json()).then(async (me) => {
      setProfile(me);                // 第一次渲染：页面这时才「活」
      // 第二跳：拿 uid 再查订单——串行多等一个来回
      const res = await fetch(`/api/orders?uid=${me.id}`);
      setOrders(await res.json());   // 第二次渲染
    });
  }, []);

  if (!profile) return <p>加载中……</p>;
  return (
    <div>
      <h2>{profile.name}</h2>
      <ul>{orders.map((o) => <li key={o.id}>{o.no}</li>)}</ul>
    </div>
  );
}

import Link from "next/link";

export default async function PostsPage() {
  // 这段 fetch 在服务器上执行——不是浏览器！
  const res = await fetch("https://api.example.com/posts");
  const posts: Post[] = await res.json();

  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>
          <Link href={`/posts/${p.id}`}>{p.title}</Link>
        </li>
      ))}
    </ul>
  );
}

import LikeButton from "./LikeButton";

export default async function PostsPage() {
  const posts = await db.post.findMany();  // 直连数据库（示意写法）

  return (
    <main>
      {posts.map((p) => (
        <article key={p.id}>
          <h3>{p.title}</h3>
          <LikeButton initialCount={p.likes} />  // 跨边界：只能传可序列化数据
        </article>
      ))}
    </main>
  );
}

"use client";

import { useState } from "react";

export default function LikeButton({ initialCount }: { initialCount: number }) {
  const [likes, setLikes] = useState(initialCount);  // Hooks 只在边界内合法（第 4 篇）

  return <button onClick={() => setLikes(likes + 1)}>赞 {likes}</button>;
}

"use client";

import { useState } from "react";

export default function FavoriteButton({ postId }: { postId: number }) {
  const [saved, setSaved] = useState(false);

  async function save() {
    await fetch(`/api/posts/${postId}/favorite`, { method: "POST" });
    setSaved(true);
  }

  return <button onClick={save} disabled={saved}>{saved ? "已收藏" : "收藏"}</button>;
}