Nextjs 13 - 刷新 SSG 问题

Question

我在简单数据页面上刷新数据时遇到一些问题。该场景很简单：我有一个显示类别数据的页面和另一个编辑相同数据的页面。当我编辑并重定向回列表页面时，我希望列表使用新数据进行更新。由于它是静态站点生成 (SSG) 页面，因此它是在构建时构建的，从而产生静态数据。

import prismadb from "@/lib/prismadb";
import CategoriesClient from "./components/client";

export const dynamic = "force-dynamic";

export default async function Categories(res) {
  let categories;
  categories = await prismadb.category.findMany({
    orderBy: {
      createdAt: "desc",
    },
  });

  const formattedCategories = categories.map((category) => ({
    id: category.id,
    name: category.name,
    isActive: category.isActive,
  }));

  return (
    <>
      <CategoriesClient data={formattedCategories} />
    </>
  );
}

  async function onSubmit(data) {
    try {
      setLoading(true);
      if (initialData) {
        await axios.patch(`/api/categories/${params.categoryId}`, data);
      } else {
        await axios.post(`/api/categories`, data);
      }
      router.refresh();
      router.push(`/categories`);
      toast.success(successMessage);
    } catch (err) {
      toast.error(`An error as occurred: ${err.response.data}`);
    } finally {
      setLoading(false);
    }
  }

我尝试在列表页面上使用重新验证属性，但它仅适用于硬刷新，不适用于我正在使用的路由器。

export const revalidate = 1;

目前，我有force-dynamic来使页面动态化。问题是，当我使用路由器或 Next.js 链接重定向到页面时，它工作正常。但是，当我使用 F5 手动刷新页面或手动输入链接时，我收到 500 错误（仅当我在产品环境中，在 Netlify 中。在本地计算机上工作正常）。

有没有办法解决这个问题，保证页面在所有场景下都能正确更新，包括手动刷新？

你能帮我解决这个问题吗？我被困在这个问题上好几天了..

Answer 1

静态站点生成的目的之一是速度，通过在客户请求时向客户呈现现成的页面。并且 next/router 不会进行硬重新加载来保留单页应用程序属性。

所以，我认为你有两个解决方案： 1- 保留静态站点生成并在客户端进行更改，同时调用此页面的重新验证。 您可以使用重新验证 api 而不是使用重新验证密钥来执行此操作，如本示例

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }
 
  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

并且每当用户做出会影响页面的更改时调用此 api 您可以在此处查看完整详细信息 https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regenesis 然后在客户端，使用 useEffect 钩子并使用空依赖数组调用其中的数据 api，以在路由器刷新时调用

2-如果修改频繁，请使用服务器端渲染而不是静态生成