Replies: 1 comment 4 replies
-
|
I've recently learned that Remix is doing that. Do you have any resource that would confirm that Next is doing the same? To the best of my knowledge - they don't do it. If I understand, their |
Beta Was this translation helpful? Give feedback.
-
|
There is a thread officially confirming it is a thing in Next.js: vercel/next.js#41745 (comment) Some brief experimentation with |
Beta Was this translation helpful? Give feedback.
-
|
On the Remix side there are kind of two attempts at an example. In case you are not familiar with Remix, I will point to some interesting spots in the examples. The MUI one uses string manipulation to add the critical styles to the SSR markup. https://github.com/mui/material-ui/blob/master/examples/remix-with-typescript/app/entry.server.tsx The Remix project one actually runs Both try to re-insert the styles during a The MUI one works: https://github.com/mui/material-ui/blob/0c7a5cb5c036aa5f6a38770a0015524b47f2271e/examples/remix-with-typescript/app/root.tsx#L18-L31 The Remix project one is actually broken with an infinite render loop: https://github.com/remix-run/examples/blob/d8ced0e912440d2b28ae4c3b12187bfd4669a449/emotion/app/root.tsx#L40-L53 |
Beta Was this translation helpful? Give feedback.
-
|
I've responded to the linked Next.js thread with some questions/doubts. Let's see what we hear back from their team. |
Beta Was this translation helpful? Give feedback.
-
|
Really hoping I am just confused with Next, it would be wonderful not to worry about this. Thank you for giving it attention :) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
There seems to be a major push among major SSR frameworks like Next.js and Remix to hydrate the entire
document, so everything from<html>and up is controlled by React. It causes a rather fundamental incompatibility with how Emotion currently inserts style tags with its own<head>management solution, as at any time React might choose to clobber any/all of the spurious Emotion tags there.Essentially they are forcing developers to use only their
<head>management solution. Is there any way to disable the inbuilt one in Emotion, and somehow get a list of the appropriate<style>tags to add to the official framework<head>? Would implementing such a thing be hard, if I were to consider a PR?To clarify, a component like
<EmotionStyles/>within the cache context that would return return a fragment containing<style>tags. So the template for Remix might look like:Beta Was this translation helpful? Give feedback.
All reactions