NextJS ShadhUI 数据表持久缓存

Question

我正在使用 nextjs v14.2 和 React v18.3

我正在使用https://ui.shadcn.com/docs/components/data-table上的说明和代码构建ShadUI数据表。

该代码需要一个列定义文件。 以下是该文件以及调用它的 page.tsx 文件的摘录。

columns.tsx

export const columns: ColumnDef<Member>[] = [
    {
        accessorKey: "name",
        header: "name",
        cell: ({ row }) => {
            const member = row.original //returns the member object
            console.log('members in columns: ', member)
            return (
                ....etc....
            )
    {
]


page.tsx

import { DataTable } from "@/components/table/data-table"

import { columns } from "./columns"
import { getData } from './actions'

export default async function Members() {
  const data = await getData()

  return (
    <div className="container mx-auto py-10">
      <DataTable columns={columns} data={data} />
    </div>
  )
}

如果我将（例如）标题从“name”更改为“new_name”，页面会刷新，暂时将“new_name”显示为标题，然后恢复到页面的某个先前缓存版本，并且我会收到水合错误“警告：文本内容不匹配。服务器：“new_name”客户端：“name”。

columns > cell 中的 console.log 行（即 console.log('members in columns: ', member)）显示在服务器和浏览器控制台中。

如果我将单元格中的代码（例如）“console.log('members in columns: ', member)”更改为 console.log('members in columns test: ', member)，则服务器控制台会反映更改但浏览器控制台没有。

我非常沮丧，以至于我不得不去“煮一杯咖啡”......当我返回并刷新浏览器时，浏览器中会反映任何更改，并且没有水合错误。

我已经尝试过：

1. （来自其他答案）动态导入Datatable组件，const DataTable =dynamic(() => import('@/components/table/data-table'), { ssr: false })。 更改标题（例如，将“name”更改为“new_name”）时，我不再出现水合错误，但更改不会出现在浏览器中，即“name”仍然是标题。

2. 删除.next文件夹并重新启动开发服务器。同样的问题，即对 columns.tsx 的任何更改都不会反映在浏览器中。

3. 构建并启动生产服务器工作正常。 停止生产服务器并重新启动开发服务器会重现相同的水合错误，并且对单元格的任何更改都不会反映在浏览器上。

4. 我在浏览器（Chrome v126）中尝试过“清空缓存并硬重新加载”，在开发者工具网络选项卡中禁用缓存。

5. 将“陈旧时间：动态”定义为 0

我希望有人不仅可以帮助我，还可以解释原因:-)

谢谢你

更新

我可以看到（https://nextjs.org/docs/messages/react-Hydration-error）禁用SSR（参见我的问题中的第1项）如何禁用水合警告（尽管它确实给了我打字稿错误）并且这似乎是明智之举。 那么问题仍然是如何让 columns.tsx 中的更改显示在浏览器中。

我猜测问题是相似的，因为列列表首先在服务器上“呈现”，这就是为什么尽管它被标记为“使用客户端”，但 console.log 条目出现在服务器和浏览器控制台中。 任何更改都不会反映在客户端中，这就是为什么如果我更改 console.log 代码，更改会反映在服务器控制台中，而不是浏览器控制台中。

我不清楚为什么浏览器中的“清空缓存并硬重新加载”或删除 .next 文件夹不会将 columns.tsx 中的更改推送到呈现的页面上......页面存储在哪里？

由于缺乏通过“删除”先前渲染的页面和渲染来强制进行这些更改的方法，我考虑了延迟列的“渲染”（https://nextjs.org/docs/messages/react-Hydration -error），但我看不出这三种方法中的任何一种如何应用于列表组件。

Answer 1

FFS。我的开发服务器在代理服务器“后面”运行，并且缓存已打开!!!!

所以我所要做的就是关闭代理服务器缓存。