[examples] SSR on the Next.js official example not working
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Cloning the official next.js ssr example is not doing ssr at all:
Disabling javascript in the browser shows a raw html page (with almost no css except those for fonts)
Expected behavior 🤔
Expected to see the page styled
Steps to reproduce 🕹
Steps:
1.curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs 2.cd nextjs 3.yarn install 4.yarn dev 5.disabled javascript in browser 6.load localhost:3000
Context 🔦
This is related to me migrating my project from v4 to v5. Here’s the StackOverflow question related to this bug
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
System:
OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
Binaries:
Node: 16.14.2 - /usr/bin/node
Yarn: 1.22.18 - /usr/bin/yarn
npm: 8.5.0 - /usr/bin/npm
Browsers:
Chrome: 99.0.4844.74
Firefox: 98.0.2
npmPackages:
@emotion/react: latest => 11.8.2
@emotion/styled: latest => 11.8.1
@mui/base: 5.0.0-alpha.74
@mui/icons-material: latest => 5.5.1
@mui/material: latest => 5.5.3
@mui/private-theming: 5.5.3
@mui/styled-engine: 5.5.2
@mui/system: 5.5.3
@mui/types: 7.1.3
@mui/utils: 5.5.3
@types/react: 17.0.43
react: latest => 18.0.0
react-dom: latest => 18.0.0
I’m using chrome
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:31 (16 by maintainers)
Top Results From Across the Web
Server-side rendering broken after upgrading to MUI 5 (with ...
I launched the official SSR Next.js implementation. It showed it doesn't work either. Server-side rendering with JavaScript disabled. For more ...
Read more >Basic Features: Pages - Next.js
Next.js pages are React Components exported in a file in the pages directory. Learn how they work here.
Read more >SSR vs SSG in Next.js – a practical overview for CTOs and devs
That's because our pretty and highly interactive web apps became slow and went through a number of usability issues, affecting both search ...
Read more >Server-side rendered styled-components with Nextjs
js. In Next.js, every page is declared in the pages directory and exports a component. For example, say we have an ...
Read more >What is SSR in NextJS ? - GeeksforGeeks
Next Js is a React-based framework that provides a developer with ... those pages use SSR as data is not the same for...
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
The created issue was closed by this PR so I assume that this should get fixed with the next Next release.
Offtopic:
@garronej good that you updated your comment, next time think twice how you write a message.
Thanks for the hint.