[Masonry] Component is not rendered correctly with SSR
See original GitHub issueDuplicates
- 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:
- In a Next.js project, set up mui with emotion engine.
- Install mui/lab package and import Masonry component.
- Use the Masonry component and set the column prop to a fixed number (e.g. 3).
- Build your project and run a production env.
- Disable javascript in the browser.
- 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
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Having trouble using the react-masonry-component
I have previously used the original masonry plugin with JQuery but I am completely new to ReactJs and it's code structure. I have...
Read more >No SSR React component - Material UI - MUI
The No-SSR component defers the rendering of children components from the server to the client.
Read more >Getting started with MUI and Next.js - LogRocket Blog
Configuring MUI and Next.js to work together takes a bit more effort than you may initially think. Learn how to properly start with...
Read more >HOW TO: “True” masonry layout - codeburst
We are going to use the order property to define the order in which are masonry-panel s will render within the layout. If...
Read more >masonic-infinite 2.1.2 on npm - Libraries.io
An autosizing masonry component which only renders items currently visible in the window ... initialWidth, number, 1280, No, The width of the window...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Setting the
defaultHeight
anddefaultColumns
solved the issue. Thanks for your assistance!setting default* props fixes layout issues in non-ssr contexts as well