Subset of data is rendering before it renders completely.

[goughfey]

I am using latest version of react-data-grid in nextjs version 16.0.0. Issue is that when I reload the page the data is rendering in blinking way which is bad ux.

https://github.com/user-attachments/assets/9f8c7977-91bc-4907-be05-e1ba525d9cd0

[amanmahajan7]

Is this starting happening with nextjs 16? It does not happen on the example website

[goughfey]

it is working fine for react-router or tanstack-router but this is happening in nextjs 15 as well...

[nstepien]

Are you seeing this in both dev and prod modes? What browser are you using?

[goughfey]

I am using firefox and chrome and same issue on both browsers and both environments...

[nstepien]

I'm guessing we're only rendering a few cells in SSR, and the browser renders the SSR content before React can kick in? Not sure there's an ideal workaround, maybe we could avoid rendering any cells at all in SSR?

[htmujahid]

What is purpose of rendering few cells in ssr?

[nstepien]

https://github.com/Comcast/react-data-grid/blob/main/src/hooks/useGridDimensions.ts#L6-L7 When DataGrid renders for the first time, we don't know the dimensions of the grid until we mount the DOM and measure the grid, only then can the grid know how many columns/rows can be safely rendered.

[amanmahajan7]

Maybe another workaround is to disable virtualization in SSR and render a few rows

<DataGrid 
  enableVirtualization={!isSSR} // not sure if there is a flag like that 
  rows={isSSR > rows.slice(0, 50): rows}