第 5 章：RSC 数据获取、缓存与流式 UI

第 5 章：RSC 数据获取、缓存与流式 UI

在第 4 章中，我们建立了 RSC 的““架构””——基于““树””的路由和基于““哈希表””的缓存。在本章中，我们将深入探讨这些架构的““运行时””：我们如何具体地获取、刷新和““流式””传输数据，以构建一个高性能的 SAAS 仪表盘。

5.1. RSC 中的直接数据访问 (告别 API)

这是从 Python 后端（如 Flask/FastAPI）转向 RSC 的第一个““解放””思想的转变。

• 你的过去 (Flask/FastAPI)： 你需要创建两个端点：

  1. 一个 GET /api/posts/1 端点 (API)，它查询数据库并返回 JSON。
  2. 一个 GET /posts/1 端点 (Page)，它 fetch 你自己的 /api/posts/1，然后在模板中渲染。
  • 问题： 你的服务器在 和自己对话。这增加了不必要的网络开销、序列化/反序列化成本，以及代码的割裂。

• 你的现在 (RSC)：RSC 本身就 在服务器上运行。 你不需要 API 端点。你可以 直接、安全地 import 你的服务器端模块（如 src/db/ 和 src/payment/）并执行它们。

• 算法思维 (1.4)： 图 (Graph)

  • 这种模式极大地简化了你的应用““调用图””。你砍掉了整个 /api/... 分支，以及它带来的所有 fetch 边。
  • 你的 Page.tsx 节点现在可以直接““连接””到你的 db.ts 节点。这种 ““逻辑 colocation”” 是 RSC 性能优势的来源之一。

• **SAAS 实战代码 (page.tsx)：**TypeScript

  // app/dashboard/page.tsx
  // 这是一个 RSC，它默认在服务器上运行
  
  import { auth } from '@/lib/auth'; // 1. 直接导入 Better Auth (服务器模块)
  import { db } from '@/db';       // 2. 直接导入 Drizzle (服务器模块)
  import { eq } from 'drizzle-orm';
  import { users, posts } from '@/db/schema';
  
  export default async function DashboardPage() {
    // 3. 直接 'await' 身份验证
    const session = await auth();
    const userId = session?.user?.id;
  
    if (!userId) {
      // ... 处理未登录
    }
  
    // 4. 直接 'await' 数据库查询
    // 我们不需要 /api/get-posts-for-user
    const [user, userPosts] = await Promise.all([
      db.query.users.findFirst({
        where: eq(users.id, userId),
        columns: { name: true, credits: true } // 仅选择需要的字段
      }),
      db.query.posts.findMany({
        where: eq(posts.authorId, userId),
        limit: 5,
      })
    ]);
  
    // 5. 直接渲染。没有 JSON 序列化，没有 API fetch
    return (
      <div>
        <h1>Welcome, {user?.name}</h1>
        <p>You have {user?.credits} credits remaining.</p>
        <h2>Your Latest Posts:</h2>
        <ul>
          {userPosts.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      </div>
    );
  }

5.2. [Skill 实战]：在 RSC 中优雅地从 pathname 获取 ID 并抓取数据

• 问题： 如果页面是动态的，比如 .../posts/xyz-123，我们如何获取 xyz-123 这个 ID？

• 架构映射： 正如 4.1 节所说，路由是一个 ““树””。当你创建一个名为 src/app/dashboard/posts/[postId]/ 的文件夹时：

  • [postId] 就是一个 ““动态通配符节点””。
  • Next.js 在路由匹配时会““捕获””这个 URL 段的值。
  • 这个““捕获值””会作为 props 自动注入 到你的 layout.tsx 和 page.tsx 中。

• **SAAS 实战代码 (.../posts/[postId]/page.tsx)：**TypeScript

  // app/dashboard/posts/[postId]/page.tsx
  
  import { db } from '@/db';
  import { eq } from 'drizzle-orm';
  import { posts } from '@/db/schema';
  import { notFound } from 'next/navigation'; // Next.js 提供的 404 辅助函数
  
  // 1. Next.js 自动将 URL 段注入 'params' prop
  // 访问 /posts/xyz-123 会导致 params = { postId: 'xyz-123' }
  interface PostPageProps {
    params: {
      postId: string; // 这个键名 'postId' 必须和文件夹名 '[postId]' 一致
    };
  }
  
  export default async function PostPage({ params }: PostPageProps) {
  
    const { postId } = params;
  
    // 2. [算法: O(log n) or O(1)]
    // 利用 'postId' 直接在数据库中进行高效查找
    const post = await db.query.posts.findFirst({
      where: eq(posts.id, postId),
      with: {
        author: { // Drizzle 关系查询
          columns: { name: true }
        }
      }
    });
  
    // 3. 处理未找到的情况
    if (!post) {
      notFound();
    }
  
    return (
      <article>
        <h1>{post.title}</h1>
        <p>By {post.author.name}</p>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
    );
  }

5.3. Next.js 数据缓存与按需刷新 (revalidatePath)

• 算法思维 (1.4)： 哈希表 (Hash Table) 与 缓存失效 (Cache Invalidation)

• 架构映射：

  • 缓存 (哈希表)： 正如 4.3 节所述，Next.js 的 fetch 和 React 的 cache 会自动将数据存入一个 哈希表 (Next.js Data Cache)，键是 url 或函数名+参数，值是数据。
  • 问题： 如果数据在数据库中 改变 了怎么办？我们的哈希表（缓存）现在就““过时””(stale) 了。
  • 缓存失效： revalidatePath 就是一个命令，它告诉 Next.js：““请从哈希表中删除所有与此路径 /dashboard/settings 相关的条目。””
  • 当下一次请求访问 /dashboard/settings 时，Next.js 在哈希表中找不到数据，它就会 重新执行 你的 await db.query...，获取新数据，并再次将其存入哈希表。

• SAAS 实战 (在 Server Action 中使用)： 当用户在 src/actions/ 中更新他们的个人资料时，我们必须““刷新””缓存。TypeScript

  // src/actions/user-actions.ts
  
  'use server'; // 这是一个 Server Action
  
  import { revalidatePath } from 'next/cache';
  import { db } from '@/db';
  import { auth } from '@/lib/auth';
  import { users } from '@/db/schema';
  import { eq } from 'drizzle-orm';
  import { z } from 'zod';
  
  const UpdateNameSchema = z.string().min(2);
  
  export async function updateUserName(newName: string) {
    const session = await auth();
    if (!session?.user?.id) return { error: 'Not authenticated' };
  
    // 1. [第 2 章] Zod 运行时验证
    const validation = UpdateNameSchema.safeParse(newName);
    if (!validation.success) return { error: 'Invalid name' };
  
    try {
      // 2. 更新数据库
      await db.update(users)
        .set({ name: validation.data })
        .where(eq(users.id, session.user.id));
  
      // 3. [算法: 缓存失效]
      // 这是关键！我们““销毁””了 /dashboard 页面的缓存。
      // 下次用户访问 /dashboard 时，
      // 5.1 节中的 DashboardPage RSC 将会重新运行，
      // 从而获取到新的 'user.name'。
      revalidatePath('/dashboard');
      revalidatePath('/dashboard/settings'); // 你可以刷新多个路径
  
      return { success: true, message: 'Name updated!' };
  
    } catch (e) {
      return { error: 'Database error' };
    }
  }

5.4. [Skill 实战]：使用 Suspense 和 searchParams 构建流式加载的仪表盘

• 问题： 我们的 DashboardPage (来自 5.1) 有两个 await。如果 userPosts 查询很慢 (例如 3 秒)，整个页面都会被 阻塞 3 秒，即使用户的 name 在 50 毫秒内就返回了。
• 算法思维 (1.4)： 队列 (Queue) / 并发 (Concurrency) / 流 (Streaming)
• 架构映射：
  • <Suspense> 允许你将页面““解耦””。它告诉 React：““不要阻塞整个页面的渲染。先把我 fallback（占位符，如骨架屏）发送给用户，这就像一个 队列 中的““承诺票””。
  • ““与此同时，在服务器上继续执行这个缓慢的 await 任务。
  • ““当任务完成时，将渲染好的 HTML 结果作为一个 新的数据块““流式””传输 到客户端，替换掉那个‘承诺票’。””
• searchParams (URL 查询参数)：page.tsx 也会自动接收 searchParams (如 ?q=...) 作为 props。我们可以用它来驱动一个可搜索的、流式加载的列表。
• SAAS 实战 (构建流式仪表盘): TypeScript

// **1. 页面 (`app/dashboard/page.tsx`)**
import { Suspense } from 'react';
import { auth } from '@/lib/auth';
import { UserWelcome } from '@/components/user-welcome'; // 快速组件
import { ProjectList, ProjectListSkeleton } from '@/components/project-list'; // 慢速组件
import { SearchBar } from '@/components/search-bar'; // 客户端组件

// 'searchParams' 也会被自动注入
export default async function DashboardPage({
  searchParams,
}: {
  searchParams: { q?: string };
}) {
  const query = searchParams.q || '';
  const session = await auth(); // 假设 auth() 很快

  return (
    <div>
      {/* 1. 快速组件：立即渲染并显示 */}
      <UserWelcome userId={session?.user?.id} />

      {/* 2. 客户端组件：用于更新 URL (见下) */}
      <SearchBar />

      {/* 3. 慢速组件：被 Suspense 包裹 */}
      {/* fallback 是一个占位符，会立即显示 */}
      <Suspense key={query} fallback={<ProjectListSkeleton />}>

        {/* 4. 'ProjectList' 是一个 async RSC，它会执行慢查询 */}
        {/* 它接收来自父 RSC 的 'query' */}
        <ProjectList query={query} />

      </Suspense>
    </div>
  );
}

2. 慢速组件 (components/project-list.tsx)

import { db } from '@/db';
import { projects } from '@/db/schema';
import { like } from 'drizzle-orm';

export async function ProjectList({ query }: { query: string }) {
  // 5. 模拟一个非常慢的数据库查询
  await new Promise(resolve => setTimeout(resolve, 2000));

  const userProjects = await db.query.projects.findMany({
    where: like(projects.name, `%${query}%`),
    // ...
  });

  // 6. 2秒后，这个 HTML 会被流式传输到客户端
  return (
    <ul>
      {userProjects.map(p => <li key={p.id}>{p.name}</li>)}
      {userProjects.length === 0 && <li>No projects found.</li>}
    </ul>
  );
}

export function ProjectListSkeleton() {
  // 这是一个轻量级的占位符
  return <div>Loading projects...</div>;
}

3. 搜索栏 (客户端组件) (components/search-bar.tsx)

'use client';
import { useSearchParams, useRouter, usePathname } from 'next/navigation';

export function SearchBar() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter(); // 'next/navigation' 的 router

  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('q', term);
    } else {
      params.delete('q');
    }

    // 7. [关键]：我们不在这里 'fetch' 数据。
    // 我们只改变 URL。这个 URL 变化会触发 Next.js 自动
    // 重新渲染服务器上的 'DashboardPage'，
    // 传入新的 'searchParams'，并重新触发 'Suspense' 边界。
    replace(`${pathname}?${params.toString()}`);
  }

  return (
    <input
      onChange={(e) => handleSearch(e.target.value)}
      defaultValue={searchParams.get('q') || ''}
    />
  );
}

结果： 页面立即加载，显示 UserWelcome 和 ProjectListSkeleton。2 秒后，ProjectList 的 HTML ““流””入，替换掉骨架屏。当用户在 SearchBar 中键入时，URL 改变，Suspense 边界重新触发，再次显示骨架屏，然后流式加载新的搜索结果。