Flash of Unstyled Content while using customized _document

[ithinco]

It seems that the customized _document hasn't been attached to the renderOpts in renderToHTML function of next-server.

func renderToHTML(req, res, pathname, query, renderOpts) {}

I'm using "next": "8"

[kyle-mccarthy]

Hi can you provide a little more information about how you are handling your styles? I use emotion 10 and haven't encountered this issue. I also don't directly call the renderToHTML method, I call render.

Can you also provide a sample of your _document file as well as checking out this issue from the nextjs repo?

[ithinco]

Hi, @kyle-mccarthy I'm using material-ui and this _document.tsx setting. https://github.com/mui-org/material-ui/blob/next/examples/nextjs-next-with-typescript/pages/_document.tsx

BTW, Thanks for your work.

[kyle-mccarthy]

Thanks for sending that over. Unfortunately it looks like the example they provided is wrong. The call renderPage directly from the context, rather than using the enhancer which can cause the flash reported in this issue on the nextjs repo.

I messed around with their material-next example a little bit and was able to get it working with the enhanceApp, here is the gist. However, it looks like V4 uses a new SSR API, so it isn't likely to work when they release V4 in a couple of days.

Since this isn't really related to this repo, and is more of a question about using material-ui with next I am going to close this issue. I encourage you to ask the material-ui devs about an alternative to calling renderPage directly, since other people probably are having the same issue. You may want to attach the nextjs issue (#5629) I referenced above.