如何在Next.js组件重渲染时保持数据同步？

方案1：用React Context维护全局状态 #

这是最直接的方式，把用户资料放到全局Context里，编辑操作直接更新Context状态，所有依赖该状态的客户端组件都会自动同步最新数据。

1. 创建用户资料Context：

// app/contexts/UserProfileContext.tsx
'use client';

import { createContext, useContext, useState, ReactNode } from 'react';

type UserProfile = {
  id: string;
  name: string;
  email: string;
  // 其他自定义字段
};

type UserProfileContextType = {
  userProfile: UserProfile;
  updateUserProfile: (newProfile: Partial<UserProfile>) => void;
};

const UserProfileContext = createContext<UserProfileContextType | undefined>(undefined);

export function UserProfileProvider({ 
  children, 
  initialProfile 
}: { 
  children: ReactNode; 
  initialProfile: UserProfile;
}) {
  const [userProfile, setUserProfile] = useState(initialProfile);

  const updateUserProfile = (newProfile: Partial<UserProfile>) => {
    setUserProfile(prev => ({ ...prev, ...newProfile }));
  };

  return (
    <UserProfileContext.Provider value={{ userProfile, updateUserProfile }}>
      {children}
    </UserProfileContext.Provider>
  );
}

export function useUserProfile() {
  const context = useContext(UserProfileContext);
  if (!context) {
    throw new Error('useUserProfile必须在UserProfileProvider内部使用');
  }
  return context;
}

2. 在SSR的page组件中注入初始数据：

// app/profile/page.tsx
import { UserProfileProvider } from '@/app/contexts/UserProfileContext';

// 服务端获取用户资料
async function getUserProfile() {
  const res = await fetch(`${process.env.API_URL}/user/profile`, { cache: 'no-store' });
  return res.json();
}

export default async function ProfilePage() {
  const initialProfile = await getUserProfile();

  return (
    <UserProfileProvider initialProfile={initialProfile}>
      {/* 所有需要使用用户资料的客户端组件 */}
      <ProfileViewer />
      <ProfileEditor />
    </UserProfileProvider>
  );
}

3. 客户端组件中使用和更新状态：

// app/components/ProfileEditor.tsx
'use client';

import { useUserProfile } from '@/app/contexts/UserProfileContext';

export default function ProfileEditor() {
  const { userProfile, updateUserProfile } = useUserProfile();

  const handleEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const updatedData = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    };

    // 乐观UI更新：先更新本地状态
    updateUserProfile(updatedData);

    try {
      // 发送请求更新数据库
      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/profile`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedData),
      });
    } catch (err) {
      // 请求失败，回滚状态
      updateUserProfile(userProfile);
      alert('更新失败，请重试');
    }
  };

  return (
    <form onSubmit={handleEdit}>
      <input type="text" name="name" defaultValue={userProfile.name} />
      <input type="email" name="email" defaultValue={userProfile.email} />
      <button type="submit">保存修改</button>
    </form>
  );
}

方案2：结合乐观更新与Router.refresh() #

如果你希望确保客户端数据和服务器完全一致，在乐观更新后，可以调用Next.js的Router.refresh()来触发页面重新获取服务端数据（不会刷新整个页面，只是重新渲染页面组件并拉取最新数据）。

// app/components/ProfileEditor.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

type UserProfile = {
  name: string;
  email: string;
};

export default function ProfileEditor({ initialProfile }: { initialProfile: UserProfile }) {
  const router = useRouter();
  const [userProfile, setUserProfile] = useState(initialProfile);

  const handleEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const updatedData = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    };

    // 乐观更新本地状态
    setUserProfile(prev => ({ ...prev, ...updatedData }));

    try {
      await fetch('/api/user/profile', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedData),
      });
      // 刷新页面数据，同步服务器最新状态
      router.refresh();
    } catch (err) {
      setUserProfile(initialProfile);
      alert('更新失败');
    }
  };

  return (
    <form onSubmit={handleEdit}>
      <input type="text" name="name" defaultValue={userProfile.name} />
      <input type="email" name="email" defaultValue={userProfile.email} />
      <button type="submit">保存修改</button>
    </form>
  );
}

注意：router.refresh()会重新执行page组件的服务端数据获取逻辑，适合不需要频繁更新的场景，因为会有短暂的加载状态。

方案3：使用SWR/React Query进行数据管理 #

这类库自带缓存、自动重新验证和状态同步功能，非常适合数据需要在多个组件间共享且频繁更新的场景。以SWR为例：

1. 配置SWR并传入初始数据：

// app/profile/page.tsx
import { SWRConfig } from 'swr';
import { getUserProfile } from '@/app/services/api';

export default async function ProfilePage() {
  const initialProfile = await getUserProfile();

  return (
    <SWRConfig 
      value={{
        initialData: { '/api/user/profile': initialProfile },
      }}
    >
      <ProfileViewer />
      <ProfileEditor />
    </SWRConfig>
  );
}

2. 客户端组件中使用SWR获取和更新数据：

// app/components/ProfileEditor.tsx
'use client';

import useSWR from 'swr';

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

export default function ProfileEditor() {
  const { data: userProfile, mutate } = useSWR('/api/user/profile', fetcher);

  const handleEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const updatedData = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    };

    // 乐观更新：直接更新缓存
    mutate({ ...userProfile, ...updatedData }, false);

    try {
      const res = await fetch('/api/user/profile', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedData),
      });
      const newProfile = await res.json();
      // 用服务器返回的最新数据更新缓存
      mutate(newProfile, false);
    } catch (err) {
      // 回滚缓存到之前的状态
      mutate(userProfile, false);
      alert('更新失败');
    }
  };

  return (
    <form onSubmit={handleEdit}>
      <input type="text" name="name" defaultValue={userProfile?.name} />
      <input type="email" name="email" defaultValue={userProfile?.email} />
      <button type="submit">保存修改</button>
    </form>
  );
}

SWR会自动管理缓存，所有使用useSWR('/api/user/profile')的组件都会自动同步最新数据，不需要手动维护Context或状态。

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