[data grid] Initial SSR render support

[plevamatus]

Summary 💡

It seems that data grid is not rendered on server. I didn't find any information whether this feature is implemented or whether you plan to implement ssr support in the future.

Examples 🌈

No response

Motivation 🔦

SSR support could improve performance, especially when using large data sets

Order ID 💳 (optional)

No response

[cherniavskii]

Hi @plevamatus The data grid does not support server-side rendering. Our virtualization needs to measure the dimensions on mount which is not possible with server-side rendering (there's no "mount").

SSR support could improve performance, especially when using large data sets

In theory, it might be possible to make the data grid work with SSR when the virtualization is disabled. But I believe the gains will be minimal since virtualization is usually enabled when using large data sets, so it won't address your concern.

Have you encountered any specific performance issues?

[plevamatus]

Hi @cherniavskii, I'm working on project based on nextjs, and recently I was comparing mui data grid without SSR and Material React Table (https://www.material-react-table.com/) with SSR. Both support virtualization but the initial render of Material React Table was obviously faster. It was interesting for me, because once both tables were rendered, mui data grid had better performance. That is why I think that SSR would help, but I was not able to find any relevant information about this feature.

[cherniavskii]

@plevamatus Thanks for the update!

Both support virtualization but the initial render of Material React Table was obviously faster.

Did you render both grids on the same page? By initial render you mean the time from the page load to the first grid render with the data?

[cherniavskii]

One more request for SSR support: https://github.com/mui/mui-x/issues/6803#issuecomment-1400917371

[cherniavskii]

I explored this a bit and created a quick PoC in my fork: https://github.com/cherniavskii/material-ui-x/pull/5

[oliviertassinari]

SSR support sounds like a great opportunity to improve the UX for the first-page load on dashboards. The data grid is often the primary content on the page end-users open to read but all the JavaScript needs to load first to be able to access the data. This problem is getting worse with Next.js's popularity and React's team push toward the server. Now, end-users also need to wait for the hydration to complete.

For the technical solution, I imagine that we could expose a new prop, e.g. initial VirtualizationDimension that represents the expected area of the grid so that the virtualization should render server side.

---

It's not directly related, but we could connect this SSR issue, #7583, and #8179 with the RSC (React Server Components): https://twitter.com/devagrawal09/status/1636971320138162176.

[Melihkrkvk]

Hi @cherniavskii, I'm working on project based on nextjs, and recently I was comparing mui data grid without SSR and Material React Table (https://www.material-react-table.com/) with SSR. Both support virtualization but the initial render of Material React Table was obviously faster. It was interesting for me, because once both tables were rendered, mui data grid had better performance. That is why I think that SSR would help, but I was not able to find any relevant information about this feature.

I am using metarial react table with nextjs14. I found a way that table run with ssr. I don't know it is best practice for nextjs or not? I am using that table with searchParams.

//MaterialTable.tsx 
manualPagination = true,
onPaginationChange: (updaterOrValue: any) => {
      (() => {
        const newPaginationValue = updaterOrValue(pagination);
        setPagination(newPaginationValue);
        const params = new URLSearchParams(searchParams.toString());
        params.set('page', newPaginationValue.pageIndex + 1);
        params.set('pageSize', newPaginationValue.pageSize);
        router.push('?' + params);
      })();
    },`
//page.tsx
    `await fetchData(USER_QUERY, {
    take: Number(searchParams.pageSize),
    skip: skip,

[Janpot]

Our virtualization needs to measure the dimensions on mount which is not possible with server-side rendering (there's no "mount").

I'm experiencing this as well. Having a dashboard that displays some cards with graphs, and a data grid. The cards are perfectly able to SSR, but the datagrid shows nothing until mounted. This causes a flicker in some parts of the dashboard. Even if parts of the grid require measurement, I believe it should be possible to render at least the border, toolbar, footer, column header (without individual columns). And as long as it's not mounted, the loading state could be displayed?