Source code of all SSR/SSG page is not rendering properly #34706
Labels
status: waiting for author
Issue with insufficient information
Comments
mxcrtgn
added
the
status: waiting for maintainer
|
This doesn't seem like a Material UI issue. Does it still happen if you remove Material UI components? |
michaldudak
added
status: waiting for author
|
Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Duplicates
Latest version
Steps to reproduce 🕹
Steps:
Current behavior 😯
For SSG & SSR pages : Source code is empty (only fetched data appears but not the HTML code of the page - here)
For standard pages : everything works perfectly (here)
Expected behavior 🤔
I would expect the source code of the page to render the HTML code of the page so that crawlers can index it, but also to enhance og:image and link sharings.
Context 🔦
I think it comes from the rendering method within _document.js but I actually don't really understand it with the emotion cache integration.
Here is my _document.js file :
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../utility/theme';
import createEmotionCache from '../utility/createEmotionCache';
export default class MyDocument extends Document {
render() {
return (
{/* GLOBAL Head /}
{/ /}
{/ Global fonts */}
}
}
//
getInitialPropsbelongs to_document(instead of_app),// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
const originalRenderPage = ctx.renderPage;
// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},
});
const initialProps = await Document.getInitialProps(ctx);
// This is important. It prevents emotion to render invalid HTML.
// See #26561 (comment)
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={
${style.key} ${style.ids.join(' ')}}key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
emotionStyleTags,
};
};
Here is my _app.js file :
// Infrastructure
import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { useRouter } from "next/router"
import {useState, useEffect} from "react"
// Style
import '../styles/globals.css'
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../utility/theme';
// Contexts
import { AuthProvider } from '../utility/context/authContext';
import { ActionProvider } from '../utility/context/actionContext';
import { ObjectiveProvider } from '../utility/context/objectiveContext';
import { PointsProvider } from '../utility/context/pointsContext';
import { PromptProvider } from '../utility/context/promptContext';
import { IssueProvider } from '../utility/context/issueContext';
// Components
import { BackdropLoader } from '../components';
// Helpers
import { CacheProvider } from '@emotion/react';
import createEmotionCache from '../utility/createEmotionCache';
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
const router = useRouter()
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleStart = (url) => (url !== router.asPath) && setLoading(true);
const handleComplete = (url) => (url === router.asPath) && setLoading(false);
})
return (
<title key="title">acacia.</title>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
}
Your environment 🌎
npx @mui/envinfoThe text was updated successfully, but these errors were encountered: