Using Emotion with frameworks that hydrate <html>?
#2949
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.
-
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