React SSR框架中非路由组件的数据获取实践与疑问

一、可复用非路由组件（如LikeButton）的数据获取方案 #

1. 路由层预取，组件接收Props #

这是SSR框架最稳妥的方案，完全契合“路由层面处理数据加载”的设计逻辑：

• 在路由组件（Next.js的page.tsx/route.tsx、Remix的route.tsx）中，通过服务端数据获取方式（Next.js的Server Component fetch/getServerSideProps、Remix的loader）拿到组件所需数据（比如点赞状态、点赞数）。
• 将数据通过props传递给非路由组件，组件直接基于props渲染。

Next.js App Router示例：

// app/post/[id]/page.tsx（Server Component）
async function PostPage({ params }) {
  const likeStatus = await fetch(`/api/posts/${params.id}/like-status`).then(res => res.json());
  
  return (
    <div>
      <h1>文章标题</h1>
      <LikeButton 
        postId={params.id} 
        isLiked={likeStatus.isLiked} 
        likeCount={likeStatus.count} 
      />
    </div>
  );
}

// components/LikeButton.tsx（Client Component，处理交互）
'use client';

export default function LikeButton({ postId, isLiked, likeCount }) {
  const handleLike = async () => {
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
    // 可通过router.refresh()或缓存工具更新状态
  };

  return (
    <button onClick={handleLike}>
      {isLiked ? '已点赞' : '点赞'} ({likeCount})
    </button>
  );
}

2. 组件内自主获取（结合数据预取） #

如果希望组件保持独立性，不依赖路由层传参，可以采用数据预取+客户端缓存的方案：

• 使用SWR、React Query这类数据库，在组件内定义数据获取逻辑。
• 在路由层提前预取组件所需数据，确保SSR时组件能拿到数据，避免客户端hydration不匹配。

Next.js + SWR示例：

// app/post/[id]/page.tsx
import { SWRConfig } from 'swr';
import LikeButton from '@/components/LikeButton';

async function PostPage({ params }) {
  // 预取点赞状态数据
  const likeStatus = await fetch(`/api/posts/${params.id}/like-status`).then(res => res.json());

  return (
    <SWRConfig 
      value={{
        fallback: {
          [`/api/posts/${params.id}/like-status`]: likeStatus
        }
      }}
    >
      <LikeButton postId={params.id} />
    </SWRConfig>
  );
}

// components/LikeButton.tsx
'use client';
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

export default function LikeButton({ postId }) {
  const { data, mutate } = useSWR(`/api/posts/${postId}/like-status`, fetcher);

  const handleLike = async () => {
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
    mutate(); // 手动更新缓存，触发组件重渲染
  };

  if (!data) return <button>加载中...</button>;

  return (
    <button onClick={handleLike}>
      {data.isLiked ? '已点赞' : '点赞'} ({data.count})
    </button>
  );
}

二、非路由组件内定义数据逻辑，同时享受SSR优势？ #

可以，但分两种场景处理：

1. Server Components 场景（Next.js App Router） #

Server Components天然支持在组件内直接做服务端数据获取，完全符合需求：

• 组件内直接使用fetch（自动缓存、支持revalidation），数据在服务端获取后渲染成HTML发送给客户端，完全享受SSR优势。
• 数据变更逻辑拆分到嵌套的Client Component中，点击事件触发API调用后，通过revalidateTag或router.refresh()触发Server Components重新渲染。

示例：

// components/LikeButton.tsx（Server Component，负责数据获取与展示）
async function LikeButton({ postId }) {
  const likeStatus = await fetch(`/api/posts/${postId}/like-status`, { next: { tags: ['likes'] } }).then(res => res.json());

  return (
    <div>
      <span>{likeStatus.count} 人点赞</span>
      <LikeAction postId={postId} isLiked={likeStatus.isLiked} />
    </div>
  );
}

// components/LikeAction.tsx（Client Component，负责交互）
'use client';
import { revalidateTag } from 'next/cache';

export default function LikeAction({ postId, isLiked }) {
  const handleLike = async () => {
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
    revalidateTag('likes'); // 触发缓存重验证，更新Server Components数据
  };

  return <button onClick={handleLike}>{isLiked ? '取消点赞' : '点赞'}</button>;
}

2. Client Components 场景 #

如果是纯Client Components，要保留SSR优势，必须配合路由层数据预取：

• 在路由组件中提前获取组件所需数据，通过SWR/React Query的fallback或Remix的useLoaderData传递给组件。
• 组件内直接读取缓存数据，避免客户端重复请求，同时保证SSR渲染时数据已存在，不会出现hydration错误。

三、Server Components是否更适合？ #

要看你的具体需求：

• 适合的场景：
  • 组件以展示数据为主，交互逻辑简单或可拆分到独立的Client Component。
  • 希望减少客户端JS体积，提升页面加载速度。
  • 不想依赖路由层传递数据，希望组件自主完成服务端数据获取。
• 不适合的场景：
  • 组件需要大量客户端交互（比如实时状态更新、复杂表单处理），Server Components无法使用useState、useEffect等客户端钩子，必须依赖Client Component配合，开发成本可能更高。
  • 使用Remix（目前Remix对Server Components的支持尚在演进中，更推荐基于loader的路由层数据方案）。

内容的提问来源于stack exchange，提问作者Emi