[data grid] DataGridPro not rendered on the server, causing my page to flicker

[eliyabenabu]

Order ID 💳

51369

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Hi,

I am using next js 12 and data grid pro, the grid not rendered on the server and cause my pages to flicker, you can see it at this page https://tickergate.com/stocks/us/nyse/KAR/ownership, all the grids in the page rendered after initialize load, this cause the page to flicker and looks broken.
Is it limitation of data grid pro? do I need to do something for render the page on the server?

Thanks in advanced
Eliya

Your environment 🌎

`npx @mui/envinfo`

System:
OS: Linux 4.18 CentOS Stream 8
Binaries:
Node: 16.17.0 - /opt/node-v16.17.0-linux-x64/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.15.0 - /opt/node-v16.17.0-linux-x64/bin/npm
Browsers:
Chrome: 106.0.5249.119
Firefox: 91.13.0esr
npmPackages:
@emotion/react: ^11.9.3 => 11.10.5
@emotion/styled: ^11.9.3 => 11.10.5
@mui/base: ^5.0.0-alpha.85 => 5.0.0-alpha.103
@mui/core-downloads-tracker: 5.10.11
@mui/lab: ^5.0.0-alpha.86 => 5.0.0-alpha.105
@mui/material: ^5.8.4 => 5.10.11
@mui/private-theming: 5.10.9
@mui/styled-engine: 5.10.8
@mui/styles: ^5.8.4 => 5.10.10
@mui/system: ^5.8.4 => 5.10.10
@mui/types: 7.2.0
@mui/utils: 5.10.9
@mui/x-data-grid: 5.17.10
@mui/x-data-grid-pro: ^5.17.10 => 5.17.10
@mui/x-license-pro: 5.17.0
@types/react: 18.0.24
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2

[m4theushw]

It's a limitation of the DataGrid. In the server we don't know the dimensions to calculate how many columns and rows should be displayed, so nothing is rendered.

mui-x/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx

Lines 74 to 87 in 6d279bd

	const [mountedState, setMountedState] = React.useState(false);
	useEnhancedEffect(() => {
	setMountedState(true);
	}, []);
	useEnhancedEffect(() => {
	if (mountedState) {
	apiRef.current.unstable_updateGridDimensionsRef();
	}
	}, [apiRef, mountedState]);
	if (!mountedState) {
	return null;
	}

[m4theushw]

@cherniavskii The issue I mentioned during the weekly meeting. However, I can't reproduce it anymore.

[cherniavskii]

There's no DataGrid on the linked page, but there's one in the Financials tab: https://www.tickergate.com/stocks/us/nyse/KAR/financials

I cannot see any flickering there. In the network tab, I can see that only the loader is rendered on the server.
So the flickering might have been fixed by #7205

@eliyabenabu Can you confirm the flickering is fixed now?

[cherniavskii]

Also, here's a separate issue for SSR: #7599
Feel free to upvote if you still need SSR.

[cherniavskii]

By the way, I really like https://www.tickergate.com 👍
Might be a great candidate for the showcase!
cc @joserodolfofreitas @samuelsycamore

[eliyabenabu]

@cherniavskii The flickering not happen any more, but unfortunately it is because I replaced it in all places that I need SSR rendering with React table, In financials page we render the page on the client, only the loader rendered on the server (this page not SEO critical for us), I am waiting for data grid to be server render, another page with MUI-X data grid is https://www.tickergate.com/compare-stocks which we use more features (for your showcase).

[cherniavskii]

@eliyabenabu Thanks for the response!
This adds one use case for SSR support - indexing of the data in the grid by search engines.

[cherniavskii]

I'm closing this issue in favor of #7599
We'll track the SSR support there.