Next.js中如何仅重渲染RSC组件且不丢失页面状态？

完全可行，以下是两种针对性的实现方案，能满足你在react-query mutation成功等场景下，只刷新目标RSC、保留客户端状态的需求：

1. 使用revalidateTag（推荐，App Router 13.4+） #

如果你的RSC是通过带标签的fetch请求获取数据，可通过revalidateTag精准触发对应RSC的重新渲染，不会影响客户端状态。

• RSC组件代码（服务端渲染）：

// app/data-display.jsx（纯RSC）
export default async function DataDisplay() {
  // 给fetch请求打上标签，关联需要刷新的资源
  const res = await fetch('/api/get-data', { next: { tags: ['target-data'] } });
  const data = await res.json();

  return <div className="rsc-content">{data.content}</div>;
}

• 客户端组件（带react-query mutation）：

'use client';
import { useMutation } from '@tanstack/react-query';
import { revalidateTag } from 'next/cache';

export default function EditForm() {
  const updateMutation = useMutation({
    mutationFn: async (formData) => {
      const res = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: { 'Content-Type': 'application/json' },
      });
      return res.json();
    },
    onSuccess: () => {
      // 仅重新验证标签为'target-data'的RSC资源，触发其重渲染
      revalidateTag('target-data');
    },
  });

  return (
    <button
      onClick={() => updateMutation.mutate({ content: '更新后的内容' })}
      disabled={updateMutation.isLoading}
    >
      提交更新
    </button>
  );
}

这种方式只会重新获取对应标签的RSC数据，客户端的表格分页、表单输入状态等完全不受影响，因为没有触发页面级刷新。

2. 基于key属性强制RSC重渲染 #

如果你的RSC不依赖带标签的fetch请求，可以在客户端组件中维护一个刷新状态，通过修改RSC的key属性触发服务端重新渲染该组件。

• 客户端包裹组件代码：

'use client';
import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { Suspense } from 'react';
import DataDisplay from './data-display';

export default function PageWrapper() {
  const [refreshKey, setRefreshKey] = useState(0);
  const updateMutation = useMutation({
    mutationFn: async (formData) => {
      const res = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(formData),
      });
      return res.json();
    },
    onSuccess: () => {
      // 修改key值，触发RSC重新挂载渲染
      setRefreshKey(prev => prev + 1);
    },
  });

  return (
    <div>
      <button onClick={() => updateMutation.mutate({ content: '新内容' })}>
        更新数据
      </button>
      <Suspense fallback={<div>加载中...</div>}>
        {/* 通过key变化强制RSC重新渲染 */}
        <DataDisplay key={refreshKey} />
      </Suspense>
    </div>
  );
}

当refreshKey改变时，React会卸载并重新请求服务端渲染DataDisplay组件，客户端其他状态（如表格分页）会完整保留。

注意事项 #

• 确保目标组件是纯React Server Component，不含客户端交互逻辑（如'use client'指令）。
• revalidateTag需要Next.js 13.4及以上版本支持，若使用旧版需先升级框架。

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