使用 nextjs revalidatePath 时如何处理读取复制延迟？

Question

如果我们有一个 nextJS 应用程序，它在服务器操作中写入数据库并更新计数器，然后在其之后调用 revalidate。由于读取是从副本完成的，因此存在一些复制滞后。 revalidatePath 不起作用。如果我在一秒钟后刷新页面。它有效。

示例场景：

1. 读取是从弹性搜索索引完成的。 （假设首先在 stackoverflow 上获得最高投票的答案。）
2. 写入数据库并根据数据库中的答案增加赞成票。
3. nextjs 调用重新验证并且弹性搜索返回过时的数据。
4. 异步作业使用更新的赞成票更新弹性搜索答案索引项。

我尝试添加 React useOptimistic 钩子来立即更新本地状态，效果非常好。然后我尝试在重新验证时添加 set-timeout 以延迟 2-3 秒。看起来，一旦操作完成， useOptimisitc 就会恢复到过时的值。这意味着需要立即重新验证。

Answer 1

我认为您误解了

revalidatePath

如何与

useOptimistic

一起工作的核心概念。目标是提供即时的用户反馈并确保其他用户也能够看到类似内容。

export default function LikeCounter({ likes, onCreate }: Props): JSX.Element {
  const [optLikes, addOptLikes] = useOptimistic(likes, (state, next) => {
    return [...state, next];
  });

  const onClick = useCallback(async () => {
    // optimistic update with a temporary id
    addOptLikes({ id: uuid() });
    // actually post the like to the api
    await onCreate(/* ... */);
    // revalidate the path so other users can see the new like
    revalidatePath(/* ... */);
  }, [onCreate]);

  return <button onClick={onClick}>{optLikes.length}</button>;
}

正如您在上面的示例中所看到的，我首先更新乐观状态，以便用户立即获得反馈，然后创建一个新的点赞并重新验证路径，以便其他用户在下次访问页面时可以看到新的点赞。