I am using nextjs v14.2 and react v18.3
I am building a ShadUI data table using the instructions and code on https://ui.shadcn.com/docs/components/data-table.
The code requires a columns definition file. Here is an extract of that file and the page.tsx file that calls it.
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>
)
}
If I change (for example) the header from 'name' to 'new_name' the page refreshes, momentarily displays the 'new_name' as a header then reverts to some previous cached version of the page and I get the hydration error "Warning: Text content did not match. Server: "new_name" Client: "name".
The console.log line in columns > cell (i.e. console.log('members in columns: ', member)) is displayed in both the server and browser consoles.
If I change code in cell (for example), "console.log('members in columns: ', member)" to console.log('members in columns test: ', member), then the server console reflects the change but the browser console does not.
I have got so frustrated that I have left to 'make a cup of coffee'....... when I return and refresh the browser the changes any reflected in the browser and no hydration errors.
I have tried:
(from other answers) dynamically importing the Datatable component, const DataTable = dynamic(() => import('@/components/table/data-table'), { ssr: false }). I no longer get a hydration error when changing the header (e.g. 'name' to 'new_name') but the change does not appear in the browser i.e 'name' remains the header.
Deleting .next folder and restarting the development server. Same problem i.e. any changes to columns.tsx are not reflected in the browser.
Building and starting a production server works fine. Stopping the production server and restarting the development server reproduces the same hydration error and any change to cells is not reflected on the browser.
I have tried "empty cache and hard reload" in the browser (Chrome v126), Disable cache in the developer tools network tab.
Defining 'stale times: dynamic" as 0
I hope someone can not only help me but explain why :-)
Thank you
UPDATE
I can see how (https://nextjs.org/docs/messages/react-hydration-error) disabling SSR (see item 1 in my question) disables the hydration warning (although it does give me typescript errors) and that seems a sensible thing to do. The problem then remains as to how to get changes in columns.tsx to be shown in the browser.
I’m guessing that the problem is similar in that the columns list is ‘rendered’ on the server 1st, which is why despite it being tagged ‘use client’, a console.log entry appears in both server and browser console. Any changes are not reflected in the client, which is why if I change the console.log code, the changes are reflected in the server console but not the browser console.
I’m not clear why ‘Empty cache and hard reload’ in the browser or deleting the .next folder does not push the changes in columns.tsx onto the rendered page....... where is the page being stored ?
In the absence of a way to force these changes by ‘deleting’ the previously rendered page and rendering, I have looked at delaying the 'rendering' of columns (https://nextjs.org/docs/messages/react-hydration-error) but I can’t see how any of the three methods can be applied to a list component.
