良好的实践获取数据nextjs（客户端或服务器）

Question

首先我想说的是，尽管我在 React 和 AWS 方面拥有多年的经验，但我对使用 Next.js 还比较陌生。

我们决定对应用程序的代码库进行彻底重构，以过渡到 Next.js。

目前我们面临着一个困境：

对 page.tsx（服务器端）中的数据进行 API 获取调用更好，还是在“View”组件（客户端）中执行它们更好？

我举一个例子来更好地解释自己：

export default async function Page({ params }: Props) {
  try {
    const { id } = params;

    const location = await getLocationApi(id);

    return <LocationUpdateView title={tcommon('menu')} location={location} />;
  } catch (error) {
    return <View500 />;
  }
}

这是我的 Page.tsx，我在其中进行 API 调用以获取位置数据。

目前，一切正常，这似乎是最好的选择，直到 Page.tsx 调用像 LocationUpdateView.tsx 这样的元素，它更新 getLocationApi 提供的一些数据。问题就出现在这里：一旦进行 API 调用，例如 updateNameLocation，它会更新 getLocationApi 返回的数据库中的位置名称，数据库会更新，但前端必须等待服务器再次调用 getLocationApi （这会自动发生） ，虽然我还没弄清楚为什么），但它会在几秒钟后执行，而不是立即执行。

我对这个问题的解决方案是这样的：

export function LocationUpdateView({ title, location }: { title: string; location: ApiTypes.Location }) {

  const [localLocation, setLocalLocation] = useState(location);

  useEffect(() => {
    setLocalLocation(location);
  }, [location])
  
  .
  .
  .
  }

这样，用户不会注意到客户端和服务器不同步。

我的问题是：有没有更好的方法来处理这个问题？我应该将 getLocationApi 调用直接移至客户端，还是有办法通知服务器数据已更改并重新调用 API？当然，我想避免重新加载页面，否则问题就已经解决了。

Answer 1

实际上，当你想要实现良好的 SSR 时（我猜你正在切换到 Next.js），你应该同时生活在服务器和客户端两个世界中。我实际上的意思是，要拥有良好的 SSR，服务器应该为应用程序的初始加载执行所有必要的调用，并且在加载应用程序时，客户端应该有责任执行所有调用并保持状态最新。这里棘手的部分是你应该避免重复调用。例如，服务器加载位置，当反应应用程序水合时，客户端也会执行相同的操作。有不同的程序可以实现此目的，但从我的角度来看，没有正确或错误的方法，您应该选择最适合您情况的方法。