[Masonry] Component is not rendered correctly with SSR

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The Masonry component from @mui/lab package is not rendered correctly on the server side. Therefore when JavaScript is disabled on the client, it’s not rendered.

Initially, it will render one column despite the value of the column prop. After hydration is done, it’ll show the correct number of columns.

The main issue here is the layout shifting during the client-side rendering.

Expected behavior 🤔

When using the Masonry component from @mui/lab package, I expect it to be fully rendered on the server-side.

Steps to reproduce 🕹

Steps:

1. In a Next.js project, set up mui with emotion engine.
2. Install mui/lab package and import Masonry component.
3. Use the Masonry component and set the column prop to a fixed number (e.g. 3).
4. Build your project and run a production env.
5. Disable javascript in the browser.
6. You will see the Masonry component rendered with one column.

Context 🔦

I’m trying to implement a Masonry fully rendered on the server without any client-side rendering to avoid layout shifting.

Your environment 🌎

My browser is Chrome 101.0.4951.54

`npx @mui/envinfo`

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Safari: 15.3
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.79 
    @mui/icons-material: ^5.6.2 => 5.6.2 
    @mui/lab: ^5.0.0-alpha.80 => 5.0.0-alpha.80 
    @mui/material: ^5.6.4 => 5.6.4 
    @mui/private-theming:  5.6.2 
    @mui/styled-engine:  5.6.1 
    @mui/system:  5.6.4 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @types/react: 18.0.8 => 18.0.8 
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    typescript: 4.6.4 => 4.6.4 

[ammar-oker]

Setting the defaultHeight and defaultColumns solved the issue. Thanks for your assistance!

[noahehall]

setting default* props fixes layout issues in non-ssr contexts as well