1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="shortcut icon" href="/logo-32x32.png"/><title>Emotion â Server Side Rendering</title><meta name="next-head-count" content="4"/><link rel="preload" href="/_next/static/css/dea416c43ccbe211.css" as="style"/><link rel="stylesheet" href="/_next/static/css/dea416c43ccbe211.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-0d1b80a048d4787e.js"></script>
1<script src="/_next/static/chunks/webpack-484b48eac243bc2b.js" defer=""></script>
1<script src="/_next/static/chunks/framework-9e8a250e8ae37f51.js" defer=""></script>
1<script src="/_next/static/chunks/main-e80a1237507afdfe.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-5361c1ac6d415004.js" defer=""></script>
1<script src="/_next/static/chunks/174-f5213230cebea48a.js" defer=""></script>
1<script src="/_next/static/chunks/464-30a57c36050abb7f.js" defer=""></script>
1<script src="/_next/static/chunks/pages/docs/%5Bslug%5D-65a8be4fce8c76d9.js" defer=""></script>
1<script src="/_next/static/S-1L7vLJVVMbIYWtqiwHZ/_buildManifest.js" defer=""></script>
1<script src="/_next/static/S-1L7vLJVVMbIYWtqiwHZ/_ssgManifest.js" defer=""></script>
1</head><body><div id="__next" data-reactroot=""><style data-emotion="css-global 1x8e6ln">pre::-webkit-scrollbar{width:14px;}pre::-webkit-scrollbar-track{background-color:#6272a4;border-radius:0px;}pre::-webkit-scrollbar-thumb{background-color:#bd93f9;border-radius:0px;}code[class*="language-"],pre[class*="language-"],[language="jsx"] pre{color:#ccc;background:rgb(40, 41, 54);text-shadow:none;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}}pre[class*="language-"]{background:rgba(40, 41, 54, 1)!important;border-radius:0.5em;padding:1em;margin:0.5em 0;overflow:auto;height:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:rgba(40, 41, 54, 1);}:not(pre)>code[class*="language-"]{padding:4px 7px;border-radius:0.3em;white-space:normal;}.limit-300{height:300px!important;}.limit-400{height:400px!important;}.limit-500{height:500px!important;}.limit-600{height:600px!important;}.limit-700{height:700px!important;}.limit-800{height:800px!important;}.token.plain{color:#ccc;}.token.comment{color:rgba(98, 114, 164, 1);}.token.prolog{color:rgba(207, 207, 194, 1);}.token.tag{color:rgba(220, 104, 170, 1);}.token.entity{color:rgba(139, 233, 253, 1);}.token.atrule{color:rgba(98, 239, 117, 1);}.token.url{color:rgba(102, 217, 239, 1);}.token.selector{color:rgba(207, 207, 194, 1);}.token.string{color:rgba(241, 250, 140, 1);}.token.property{color:rgba(255, 184, 108, 1);}.token.important{color:rgba(255, 121, 198, 1);font-weight:bold;}.token.punctuation{color:rgba(230, 219, 116, 1);}.token.number{color:rgba(189, 147, 249, 1);}.token.function{color:rgba(80, 250, 123, 1);}.token.class-name{color:rgba(255, 184, 108, 1);}.token.keyword{color:rgba(255, 121, 198, 1);}.token.boolean{color:rgba(255, 184, 108, 1);}.token.operator{color:rgba(139, 233, 253, 1);}.token.char{color:rgba(255, 135, 157, 1);}.token.regex{color:rgba(80, 250, 123, 1);}.token.variable{color:rgba(80, 250, 123, 1);}.token.constant{color:rgba(255, 184, 108, 1);}.token.symbol{color:rgba(255, 184, 108, 1);}.token.builtin{color:rgba(255, 121, 198, 1);}.token.attr-value{color:#7ec699;}.token.inserted{color:rgba(80, 250, 123, 1);}.token.deleted{color:#e2777a;}.token.namespace{color:#e2777a;}.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token{color:#ff79c6;}.language-json .token.property{color:#ff79c6;}.language-css .token.selector{color:rgba(80, 250, 123, 1);}.language-css .token.property{color:rgba(255, 184, 108, 1);}.language-markup .token.attr-value{color:rgba(102, 217, 239, 1);}.language-markup .token.tag{color:rgba(80, 250, 123, 1);}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;}pre.line-numbers>code{position:relative;white-space:inherit;}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber;}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;}div.code-toolbar{position:relative;}div.code-toolbar>.toolbar{position:absolute;top:0.3em;right:0.2em;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;opacity:0;}div.code-toolbar:hover>.toolbar{opacity:1;}div.code-toolbar>.toolbar .toolbar-item{display:inline-block;padding-right:20px;}div.code-toolbar>.toolbar a{cursor:pointer;}div.code-toolbar>.toolbar button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}div.code-toolbar>.toolbar a,div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{color:#ccc;font-size:0.8em;padding:0.5em;background:rgba(98, 114, 164, 1);border-radius:0.5em;}div.code-toolbar>.toolbar a:hover,div.code-toolbar>.toolbar a:focus,div.code-toolbar>.toolbar button:hover,div.code-toolbar>.toolbar button:focus,div.code-toolbar>.toolbar span:hover,div.code-toolbar>.toolbar span:focus{color:inherit;-webkit-text-decoration:none;text-decoration:none;background-color:var(--verde);}a{color:#D26AC2;-webkit-text-decoration:none;text-decoration:none;}a:hover{color:#C43BAD;-webkit-text-decoration:underline;text-decoration:underline;}</style><style data-emotion="css gb8pey">.css-gb8pey{-webkit-text-decoration:none;text-decoration:none;}.css-gb8pey:hover{-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://supportukrainenow.org" class="css-gb8pey"><style data-emotion="css t13dtp">.css-t13dtp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;
1-webkit-justify-content:center;justify-content:center;background-color:black;}</style><div class="css-t13dtp"><style data-emotion="css 194wjke">.css-194wjke{font-weight:bold;color:#fff;font-size:20px;}@media (min-width: 768px){.css-194wjke{font-size:28px;}}</style><span class="css-194wjke">ðºð¦ STOP WAR IN UKRAINE ðºð¦</span></div></a><style data-emotion="css fu5c8j">.css-fu5c8j{background-color:#f8f9fa;border-bottom:1px solid #d2d2d2;box-shadow:0 .125rem .25rem rgba(0, 0, 0, .075);padding-top:0.25rem;margin-bottom:1.5rem;}@media (min-width: 768px){.css-fu5c8j{margin-bottom:2.5rem;}}</style><header class="css-fu5c8j"><style data-emotion="css s5xdrg">.css-s5xdrg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><style data-emotion="css b247zp">.css-b247zp{margin:0 auto;max-width:1132px;padding-left:1rem;padding-right:1rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width: 768px){.css-b247zp{padding-left:1.5rem;padding-right:1.5rem;}}</style><div class="css-b247zp"><style data-emotion="css 1g2t11v">.css-1g2t11v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;margin-right:1rem;color:#D26AC2;}.css-1g2t11v:hover{-webkit-text-decoration:none;text-decoration:none;color:#C43BAD;}</style><a href="/" class="css-1g2t11v"><img alt="Avatar" src="/logo-48x48.png" srcSet="/logo-96x96.png 2x" height="48" width="48"/><style data-emotion="css t5rx1q">.css-t5rx1q{display:none;}@media (min-width: 768px){.css-t5rx1q{display:inline;margin:0;margin-left:1.5rem;font-weight:bold;}}</style><h3 class="css-t5rx1q">Emotion</h3></a><style data-emotion="css ehb7yq">.css-ehb7yq{margin-left:auto;overflow-x:auto;padding:0.25rem 0;}</style><nav class="css-ehb7yq"><style data-emotion="css 1yi9djb">.css-1yi9djb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;gap:1.5rem;padding:0;margin:0;list-style:none;}</style><ul class="css-1yi9djb"><li><style data-emotion="css 1wmbmo">.css-1wmbmo{display:inline-block;white-space:nowrap;font-weight:500;line-height:1.3;color:#212529;-webkit-text-decoration:none;text-decoration:none;}.css-1wmbmo:hover{-webkit-text-decoration:none;text-decoration:none;}.css-1wmbmo::after{content:"";display:block;width:100%;margin-top:2px;height:3px;-webkit-transition:-webkit-transform 250ms ease;transition:transform 250ms ease;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);background-color:#C43BAD;}.css-1wmbmo.active::after,.css-1wmbmo:hover::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}</style><a class="active css-1wmbmo" href="/docs">Docs</a></li><li><a class="css-1wmbmo" href="/docs/community">Community</a></li><li><a class="css-1wmbmo" href="https://github.com/emotion-js/emotion">GitHub</a></li><li><a class="css-1wmbmo" href="https://join.slack.com/t/emotion-slack/shared_invite/zt-rmtwsy74-2uvyFdz5uxa8OiMguJJeuQ">Slack</a></li><li><a class="css-1wmbmo" href="https://5faaafd0bd0f3f0008469537--emotion.netlify.app">v10 Docs</a></li></ul></nav></div></header><style data-emotion="css o0x664">.css-o0x664{padding-bottom:2rem;}</style><style data-emotion="css 1b66821">.css-1b66821{margin:0 auto;max-width:1132px;padding-left:1rem;padding-right:1rem;padding-bottom:2rem;}@media (min-width: 768px){.css-1b66821{padding-left:1.5rem;padding-right:1.5rem;}}</style><div class="css-1b66821"><style data-emotion="css zjik7">.css-zjik7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-zjik7"><style data-emotion="css 15kbdna">.css-15kbdna{display:block;max-width:100%;}
1.css-15kbdna h2,.css-15kbdna h3,.css-15kbdna h4{margin-top:2rem;margin-bottom:1rem;}.css-15kbdna h2{padding-bottom:0.5rem;border-bottom:1px solid #eac3e4;}.css-15kbdna p,.css-15kbdna li,.css-15kbdna code{line-height:1.7;}.css-15kbdna a{font-weight:500;color:#C43BAD;}.css-15kbdna .icon-link{display:none;float:left;padding-right:0.5rem;margin-left:-1.75rem;line-height:1;width:1.75rem;height:1.25rem;background-image:url(/link.svg);-webkit-background-size:1.25rem;background-size:1.25rem;background-repeat:no-repeat;}.css-15kbdna h2 .icon-link{margin-top:0.75rem;}.css-15kbdna h3 .icon-link{margin-top:0.5rem;}.css-15kbdna h4 .icon-link{margin-top:0.4rem;}.css-15kbdna h2:hover .icon-link,.css-15kbdna h3:hover .icon-link,.css-15kbdna h4:hover .icon-link{display:block;}.css-15kbdna hr{border:1px solid #eac3e4;opacity:1;}.css-15kbdna code:not([class*="language-"]){color:#212529;background-color:rgba(117, 63, 131, 0.07);border-radius:0.25rem;padding:0.25rem;}.css-15kbdna .remark-highlight,.css-15kbdna .emotion-live-editor{margin:1.5rem 0;}.css-15kbdna blockquote{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1.5rem 0;border-left:5px solid #c865b9;background-color:#FBF8FD;padding:1rem;}.css-15kbdna blockquote p{margin:0;}.css-15kbdna blockquote p:first-of-type{font-weight:700;}.css-15kbdna blockquote p:nth-of-type(2){margin-left:0.5rem;padding:0 1rem;}.css-15kbdna .table-responsive-sm{overflow-x:auto;}@media (min-width: 768px){.css-15kbdna .table-responsive-sm{overflow-x:initial;}}.css-15kbdna table{margin:1.5rem 0;width:100%;}.css-15kbdna td,.css-15kbdna th{padding:0.75rem;border:1px solid #d2d2d2;}.css-15kbdna img{max-width:100%;}@media (min-width: 768px){.css-15kbdna{display:block;-webkit-flex:1;-ms-flex:1;flex:1;}}</style><main class="css-15kbdna"><style data-emotion="css 8r8ifa">.css-8r8ifa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1rem;}</style><div class="css-8r8ifa"><style data-emotion="css 1ykowef">.css-1ykowef{margin-bottom:0;}</style><style data-emotion="css lfunke">.css-lfunke{margin-bottom:1rem;font-weight:700;margin-bottom:0;}</style><h1 class="css-lfunke">Server Side Rendering</h1><style data-emotion="css uudxwr">.css-uudxwr{display:none;}@media (min-width: 768px){.css-uudxwr{display:block;font-size:0.875rem;font-weight:normal!important;}}</style><a href="https://github.com/emotion-js/emotion/edit/main/docs/ssr.mdx" class="css-uudxwr">âï¸ <style data-emotion="css 1y2mh23">.css-1y2mh23{margin-left:0.25rem;}</style><span class="css-1y2mh23">Edit this page</span></a></div><p>Server side rendering in Emotion 10 has two approaches, each with their own trade-offs. The default approach works with streaming and requires no additional configuration, but does not work with nth child or similar selectors. It's strongly recommended that you use the default approach unless you need nth child or similar selectors.</p> 2<h2 id="default-approach"><a aria-hidden="true" tabindex="-1" href="#default-approach"><span class="icon icon-link"></span></a>Default Approach</h2> 3<p>Server side rendering works out of the box in Emotion 10 and above if you're only using <code>@emotion/react</code> and <code>@emotion/styled</code>. This means you can call React's <a href="https://reactjs.org/docs/react-dom-server.html#rendertostring"><code>renderToString</code></a> or <a href="https://reactjs.org/docs/react-dom-server.html#rendertonodestream"><code>renderToNodeStream</code></a> methods directly without any extra configuration.</p> 4<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderToString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/server'</span> 5<span class="token keyword module">
5import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span> 6 7<span class="token keyword">let</span> html <span class="token operator">=</span> <span class="token function">renderToString</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span> 8</code></pre></div> 9<p>The rendered output will insert a <code><style></code> tag above each element with styles for example</p> 10<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">const</span> <span class="token maybe-class-name">MyDiv</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span> fontSize<span class="token operator">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> 11<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyDiv</span></span><span class="token punctuation">></span></span><span class="token plain-text">Text</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyDiv</span></span><span class="token punctuation">></span></span> 12<span class="token comment">// Will render as</span> 13<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">data-emotion-css</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>21cs4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">.css-21cs4 { font-size: 12 }</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> 14<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css-21cs4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Text</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 15</code></pre></div> 16<blockquote> 17<p>Warning: This approach can interfere with nth child and similar selectors as it inserts style tags directly into your markup. You will get a warning if you use such selectors when using this approach.</p> 18</blockquote> 19<h2 id="advanced-approach"><a aria-hidden="true" tabindex="-1" href="#advanced-approach"><span class="icon icon-link"></span></a>Advanced Approach</h2> 20<blockquote> 21<p>Note: If you're not using nth child or similar selectors, you don't need to do this. Use the default approach.</p> 22</blockquote> 23<p>You can also use the advanced integration, it requires more work but does not have limitations on nth child and similar selectors. This approach does not work with the streaming APIs.</p> 24<h3 id="on-server"><a aria-hidden="true" tabindex="-1" href="#on-server"><span class="icon icon-link"></span></a>On server</h3> 25<h4 id="when-using-emotionreact"><a aria-hidden="true" tabindex="-1" href="#when-using-emotionreact"><span class="icon icon-link"></span></a>When using <code>@emotion/react</code></h4> 26<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">
26import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CacheProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/react'</span> 27<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderToString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/server'</span> 28<span class="token keyword module">import</span> <span class="token imports">createEmotionServer</span> <span class="token keyword module">from</span> <span class="token string">'@emotion/server/create-instance'</span> 29<span class="token keyword module">import</span> <span class="token imports">createCache</span> <span class="token keyword module">from</span> <span class="token string">'@emotion/cache'</span> 30 31<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'custom'</span> 32<span class="token keyword">const</span> cache <span class="token operator">=</span> <span class="token function">createCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span> 33<span class="token keyword">const</span> <span class="token punctuation">{</span> extractCriticalToChunks<span class="token punctuation">,</span> constructStyleTagsFromChunks <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createEmotionServer</span><span class="token punctuation">(</span>cache<span class="token punctuation">)</span> 34 35<span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token function">renderToString</span><span class="token punctuation">(</span> 36 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>cache<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span> 37<span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span> 38<span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></span> 39<span class="token punctuation">)</span> 40 41<span class="token keyword">const</span> chunks <span class="token operator">=</span> <span class="token function">extractCriticalToChunks</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span> 42<span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token function">constructStyleTagsFromChunks</span><span class="token punctuation">(</span>chunks<span class="token punctuation">)</span> 43 44res 45 <span class="token punctuation">.</span><span class="token method function property-access">status</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span> 46 <span class="token punctuation">.</span><span class="token method function property-access">header</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/html'</span><span class="token punctuation">)</span> 47 <span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><!DOCTYPE html></span> 48<span class="token string"><html lang="en"></span> 49<span class="token string"><head></span> 50<span class="token string"> <meta charset="UTF-8"></span> 51<span class="token string"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span> 52<span class="token string"> <meta http-equiv="X-UA-Compatible" content="ie=edge"></span> 53<span class="token string"> <title>My site</title></span> 54<span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styles<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></span> 55<span class="token string"></head></span> 56<span class="token string"><body></span> 57<span class="token string"> <div id="root"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
57html<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div></span> 58<span class="token string"></span> 59<span class="token string"> <script src="./bundle.js"></script></span> 60<span class="token string"></body></span> 61<span class="token string"></html></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> 62</code></pre></div> 63<h4 id="when-using-emotioncss"><a aria-hidden="true" tabindex="-1" href="#when-using-emotioncss"><span class="icon icon-link"></span></a>When using <code>@emotion/css</code></h4> 64<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CacheProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/react'</span> 65<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderToString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/server'</span> 66<span class="token keyword module">import</span> <span class="token imports">createEmotionServer</span> <span class="token keyword module">from</span> <span class="token string">'@emotion/server/create-instance'</span> 67<span class="token keyword module">import</span> <span class="token imports">createCache</span> <span class="token keyword module">from</span> <span class="token string">'@emotion/cache'</span> 68 69<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'custom'</span> 70<span class="token keyword">const</span> cache <span class="token operator">=</span> <span class="token function">createCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key <span class="token punctuation">}</span><span class="token punctuation">)</span> 71<span class="token keyword">const</span> <span class="token punctuation">{</span> extractCritical <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createEmotionServer</span><span class="token punctuation">(</span>cache<span class="token punctuation">)</span> 72 73<span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token punctuation">(</span> 74 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>cache<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span> 75<span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span> 76<span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></span> 77<span class="token punctuation">)</span> 78 79<span class="token keyword">let</span> <span class="token punctuation">{</span> html<span class="token punctuation">,</span> css<span class="token punctuation">,</span> ids <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">extractCritical</span><span class="token punctuation">(</span><span class="token function">renderToString</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> 80 81res 82 <span class="token punctuation">.</span><span class="token method function property-access">status</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span> 83 <span class="token punctuation">.</span><span class="token method function property-access">header</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'text/html'</span><span class="token punctuation">)</span> 84 <span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><!DOCTYPE html></span> 85<span class="token string"><html lang="en"></span> 86<span class="token string"><head></span> 87<span class="token string"> <meta charset="UTF-8"></span> 88<span class="token string"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span> 89<span class="token string"> <meta http-equiv="X-UA-Compatible" content="ie=edge"></span> 90<span class="token string"> <title>My site</title></span> 91<span class="token string"> <style data-emotion="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ids<span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>css<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></style></span> 92<span class="token string"></head></span> 93<span class="token string"><body></span> 94<span class="token string"> <div id="root"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
94html<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div></span> 95<span class="token string"></span> 96<span class="token string"> <script src="./bundle.js"></script></span> 97<span class="token string"></body></span> 98<span class="token string"></html></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> 99</code></pre></div> 100<h3 id="on-client"><a aria-hidden="true" tabindex="-1" href="#on-client"><span class="icon icon-link"></span></a>On client</h3> 101<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// Hydration of the ids in `data-emotion-css` will automatically occur when the cache is created</span> 102<span class="token keyword">const</span> cache <span class="token operator">=</span> <span class="token function">createCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 103<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">hydrate</span><span class="token punctuation">(</span> 104 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>cache<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span> 105<span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span> 106<span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span> 107 <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> 108<span class="token punctuation">)</span> 109</code></pre></div> 110<p>In this approach you have to create your own cache and emotion server then use extractCritical</p> 111<h2 id="api-reference"><a aria-hidden="true" tabindex="-1" href="#api-reference"><span class="icon icon-link"></span></a>API Reference</h2> 112<h3 id="renderstylestostring"><a aria-hidden="true" tabindex="-1" href="#renderstylestostring"><span class="icon icon-link"></span></a>renderStylesToString</h3> 113<p>This returns a string of html that inlines the critical css required right before it's used.</p> 114<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderToString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/server'</span> 115<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderStylesToString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/server'</span> 116<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span> 117 118<span class="token keyword">const</span> html <span class="token operator">=</span> <span class="token function">renderStylesToString</span><span class="token punctuation">(</span><span class="token function">renderToString</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> 119</code></pre></div> 120<h3 id="renderstylestonodestream"><a aria-hidden="true" tabindex="-1" href="#renderstylestonodestream"><span class="icon icon-link"></span></a>renderStylesToNodeStream</h3> 121<p>This returns a <a href="https://nodejs.org/api/stream.html#stream_class_stream_writable">Node Stream Writable</a> that can be used to insert critical css right before it's required. This can be used with <a href="https://reactjs.org/docs/react-dom-server.html#rendertonodestream">React's streaming API</a>.</p> 122<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">
122import</span> <span class="token imports"><span class="token punctuation">{</span> renderToNodeStream <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/server'</span> 123<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderStylesToNodeStream <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/server'</span> 124<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span> 125 126<span class="token keyword">const</span> stream <span class="token operator">=</span> <span class="token function">renderToNodeStream</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipe</span><span class="token punctuation">(</span><span class="token function">renderStylesToNodeStream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> 127</code></pre></div> 128<h3 id="extractcritical"><a aria-hidden="true" tabindex="-1" href="#extractcritical"><span class="icon icon-link"></span></a>extractCritical</h3> 129<p>This returns an object with the properties <code>html</code>, <code>ids</code> and <code>css</code>. It pulls out Emotion rules that are actually used in the rendered HTML, but it still includes all global rules because they don't appear in the rendered HTML as they might affect any elements on the page.</p> 130<blockquote> 131<p>Note:</p> 132<p>If you have dynamic global styles it's advised to create cache <strong>per</strong> single render to avoid global styles from different renders leaking into the extracted <code>css</code>.</p> 133</blockquote> 134<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> renderToString <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/server'</span> 135<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> extractCritical <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/server'</span> 136<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span> 137 138<span class="token keyword">const</span> <span class="token punctuation">{</span> html<span class="token punctuation">,</span> ids<span class="token punctuation">,</span> css <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">extractCritical</span><span class="token punctuation">(</span><span class="token function">renderToString</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> 139</code></pre></div> 140<h4 id="hydrate"><a aria-hidden="true" tabindex="-1" href="#hydrate"><span class="icon icon-link"></span></a>hydrate</h4> 141<p><code>hydrate</code> should be called on the client with the <code>ids</code> that <code>extractCritical</code> returns. If you don't call it then Emotion will reinsert all the rules. <code>hydrate</code> is <strong>only</strong> required for <code>extractCritical</code>, <strong>not</strong> for <code>renderStylesToString</code> or <code>renderStylesToNodeStream</code>, hydration occurs automatically with <code>renderStylesToString</code> and <code>renderStylesToNodeStream</code>.</p> 142<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">
142import</span> <span class="token imports"><span class="token punctuation">{</span> hydrate <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/css'</span> 143 144<span class="token function">hydrate</span><span class="token punctuation">(</span>ids<span class="token punctuation">)</span> 145</code></pre></div> 146<h2 id="nextjs"><a aria-hidden="true" tabindex="-1" href="#nextjs"><span class="icon icon-link"></span></a>Next.js</h2> 147<p>To use emotion's SSR with Next.js you need a custom <code>Document</code> component in <code>pages/_document.js</code> that renders the styles and inserts them into the <code><head></code>. <a href="https://github.com/vercel/next.js/tree/master/examples/with-emotion-vanilla">An example of Next.js with emotion can be found in the Next.js repo</a>.</p> 148<blockquote> 149<p>Note:</p> 150<p>This only applies if you're using vanilla Emotion or a version of Emotion prior to v10. For v10 and above, SSR just works in Next.js.</p> 151</blockquote> 152<h2 id="gatsby"><a aria-hidden="true" tabindex="-1" href="#gatsby"><span class="icon icon-link"></span></a>Gatsby</h2> 153<p>To use emotion's SSR with Gatsby, you can use <code>gatsby-plugin-emotion</code> or you can do it yourself with emotion and Gatsby's various APIs but it's generally recommended to use <code>gatsby-plugin-emotion</code>. <a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion">There's an example available in the Gatsby repo</a> or <a href="/site">you can look at this site which is built with Gatsby!</a></p> 154<div class="remark-highlight"><pre class="language-bash"><code class="language-bash"><span class="token function">yarn</span> <span class="token function">add</span> gatsby-plugin-emotion 155</code></pre></div> 156<p>gatsby-config.js</p> 157<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span> 158 plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token spread operator">...</span>otherGatsbyPlugins<span class="token punctuation">,</span> <span class="token string">'gatsby-plugin-emotion'</span><span class="token punctuation">]</span> 159<span class="token punctuation">}</span> 160</code></pre></div> 161<p>If using a <a href="./cache-provider">custom cache</a>, ensure you are creating a new cache per server render within <code>gatsby-ssr.js</code>. This will differ from the implementation within <code>gatsby-browser.js</code>.</p> 162<p>create-emotion-cache.js</p> 163<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports">createCache</span> <span class="token keyword module">from</span> <span class="token string">'@emotion/cache'</span> 164 165<span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createMyCache</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> 166 <span class="token function">createCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 167 key<span class="token operator">:</span> <span class="token string">'my-prefix-key'</span><span class="token punctuation">,</span> 168 stylisPlugins<span class="token operator">:</span> <span class="token punctuation">[</span> 169 <span class="token comment">/* your plugins here */</span> 170 <span class="token punctuation">]</span><span class="token punctuation">,</span> 171 <span class="token punctuation">}</span><span class="token punctuation">)</span> 172 173<span class="token keyword module">export</span> <span class="token keyword">const</span> myCache <span class="token operator">=</span> <span class="token function">
173createMyCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 174</code></pre></div> 175<p>gatsby-ssr.js</p> 176<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CacheProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/react'</span> 177 178<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createMyCache <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./create-emotion-cache'</span> 179 180<span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">wrapRootElement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> element <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> 181 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">createMyCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>element<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></span> 182<span class="token punctuation">)</span> 183</code></pre></div> 184<p>gatsby-browser.js</p> 185<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CacheProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/react'</span> 186 187<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> myCache <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./create-emotion-cache'</span> 188 189<span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function">wrapRootElement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> element <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> 190 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>myCache<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>element<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></span> 191<span class="token punctuation">)</span> 192</code></pre></div> 193<blockquote> 194<p>Note:</p> 195<p>While Emotion 10 and above supports SSR out of the box, it's still recommended to use gatsby-plugin-emotion as gatsby-plugin-emotion will enable @emotion/babel-plugin and other potential future optimisations.</p> 196</blockquote> 197<h2 id="puppeteer"><a aria-hidden="true" tabindex="-1" href="#puppeteer"><span class="icon icon-link"></span></a>Puppeteer</h2> 198<p>If you are using Puppeteer to prerender your application, emotion'
198s <code>speedy</code> option has to be disabled so that the CSS is rendered into the DOM.</p> 199<p>index.js</p> 200<div class="remark-highlight"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// This has to be run before emotion inserts any styles so it's imported before the App component</span> 201<span class="token keyword module">import</span> <span class="token string">'./disable-speedy'</span> 202<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom'</span> 203<span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span> 204 205<span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span> 206 207<span class="token comment">// Check if the root node has any children to detect if the app has been prerendered</span> 208<span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>root<span class="token punctuation">.</span><span class="token method function property-access">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 209 <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">hydrate</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> root<span class="token punctuation">)</span> 210<span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span> 211 <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> root<span class="token punctuation">)</span> 212<span class="token punctuation">}</span> 213</code></pre></div> 214<p>disable-speedy.js</p> 215<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> sheet <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@emotion/css'</span> 216 217<span class="token comment">// Check if the root node has any children to detect if the app has been preprendered</span> 218<span class="token comment">// speedy is disabled when the app is being prerendered so that styles render into the DOM</span> 219<span class="token comment">// speedy is significantly faster though so it should only be disabled during prerendering</span> 220<span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 221 sheet<span class="token punctuation">.</span><span class="token method function property-access">speedy</span><span class="token punctuation">(</span><span class="token boolean">
221false</span><span class="token punctuation">)</span> 222<span class="token punctuation">}</span> 223</code></pre></div> 224<blockquote> 225<p>Note:</p> 226<p>The <code>sheet.speedy</code> call has to be run before anything that inserts styles so it has to be put into it's own file that's imported before anything else.</p> 227</blockquote></main><style data-emotion="css 16lotkt">.css-16lotkt{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:none;}@media (min-width: 768px){.css-16lotkt{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:180px;display:block;margin-left:2rem;padding-left:2rem;border-left:1px solid #eac3e4;}}@media (min-width: 992px){.css-16lotkt{width:220px;}}</style><aside class="css-16lotkt"><style data-emotion="css-global 1ql5da">#carbonads{display:block;overflow:hidden;}#carbonads a,#carbonads a:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none;}#carbonads span{display:block;overflow:hidden;}#carbonads .carbon-img{display:block;line-height:1;}#carbonads .carbon-img img{display:block;border:solid 1px hsla(0, 0%, 7%, 0.1);}#carbonads .carbon-text{display:block;margin-top:0.5em;font-size:14px;line-height:1.35;}#carbonads .carbon-poweredby{display:block;margin-top:0.5em;font-size:10px;font-weight:600;line-height:1;letter-spacing:0.1ch;text-transform:uppercase;}@media only screen and (min-width: 320px) and (max-width: 759px){#carbonads{position:relative;}#carbonads .carbon-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}#carbonads .carbon-text{padding:0 12px;font-size:16px;}#carbonads .carbon-poweredby{padding-left:142px;}}</style><style data-emotion="css 1b62rxt">.css-1b62rxt{margin-bottom:2rem;}@media (min-width: 768px){.css-1b62rxt{min-height:200px;}}</style><div class="css-1b62rxt"></div><style data-emotion="css-global 1jvaydg">:root{--docsearch-primary-color:#D26AC2;--docsearch-searchbox-background:#f8f9fa;--docsearch-searchbox-focus-background:#f8f9fa;}.DocSearch-Button{margin:0 auto 2rem 0;width:100%;border:1px solid #d2d2d2;}.DocSearch-Button:hover{border-color:transparent;}.DocSearch-Button-Placeholder{display:block!important;}</style><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button><style data-emotion="css l3h8gd">.css-l3h8gd{font-weight:bold;font-size:1.25rem;margin-bottom:6px;}</style><h3 class="css-l3h8gd">Getting Started</h3><style data-emotion="css 18b9lz1">.css-18b9lz1{list-style:none;margin:0;margin-bottom:1.5rem;padding:0;}</style><ul class="css-18b9lz1"><li><style data-emotion="css 1hfmrak">.css-1hfmrak{display:block;padding-top:6px;padding-bottom:6px;color:#212529;}.css-1hfmrak:hover{color:#D26AC2;-webkit-text-decoration:none;text-decoration:none;}.css-1hfmrak.active{font-weight:600;color:#C43BAD;}.css-1hfmrak.active::before{content:"";height:2rem;width:0.5rem;-webkit-transform:translate(-2rem, -0.25rem);-moz-transform:translate(-2rem, -0.25rem);-ms-transform:translate(-2rem, -0.25rem);transform:translate(-2rem, -0.25rem);position:absolute;display:inline-block;background-color:#eac3e4;}</style><a class="css-1hfmrak" href="/docs/introduction">Introduction</a></li><li><a class="css-1hfmrak" href="/docs/install">Install</a></li><li><a class="css-1hfmrak" href="/docs/css-prop">The css Prop</a></li><li><a class="css-1hfmrak" href="/docs/styled">Styled Components</a></li><li><a class="css-1hfmrak" href="/docs/composition">Composition</a></li><li><a class="css-1hfmrak" href="/docs/object-styles">Object Styles</a></li><li><a class="css-1hfmrak" href="/docs/nested">Nested Selectors</a></li><li><a class="css-1hfmrak" href="/docs/media-queries">Media Queries</a></li><li><a class="css-1hfmrak" href="/docs/globals">Global Styles</a></li><li><a class="css-1hfmrak" href="/docs/package-summary">Package Summaries</a></li></ul><h3 class="css-l3h8gd">Advanced</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/best-practices">Best Practices</a></li><li><a class="css-1hfmrak" href="/docs/keyframes">Keyframes</a></li><li><a class="active css-1hfmrak" href="/docs/ssr">Server Side Rendering</a></li><li><a class="css-1hfmrak" href="/docs/with-props">Attaching Props</a></li><li><a class="css-1hfmrak" href="/docs/theming">Theming</a></li><li><a class="css-1hfmrak" href="/docs/labels">Labels</a></li><li><a class="css-1hfmrak" href="/docs/class-names">Class Names</a></li><li><a class="css-1hfmrak" href="/docs/cache-provider">CacheProvider</a></li><li><a class="css-1hfmrak" href="/docs/performance">Performance</a></li><li><a class="css-1hfmrak" href="/docs/for-library-authors">For Library Authors</a></li></ul><h3 class="css-l3h8gd">Tooling</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/babel">Babel Plugin</a></li><li><a class="css-1hfmrak" href="/docs/babel-macros">Babel Macros</a></li><li><a class="css-1hfmrak" href="/docs/source-maps">Source Maps</a></li><li><a class="css-1hfmrak" href="/docs/testing">Snapshot Testing</a></li><li><a class="css-1hfmrak" href="/docs/typescript">TypeScript</a></li><li><a class="css-1hfmrak" href="/docs/eslint-plugin-react">eslint-plugin-react</a></li></ul><h3 class="css-l3h8gd">Packages</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/@emotion/react">@emotion/react</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/styled">@emotion/styled</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/cache">@emotion/cache</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/css">@emotion/css</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/babel-plugin">@emotion/babel-plugin</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/eslint-plugin">@emotion/eslint-plugin</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/server">@emotion/server</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/jest">
227@emotion/jest</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/native">@emotion/native</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/primitives">@emotion/primitives</a></li><li><a class="css-1hfmrak" href="/docs/@emotion/babel-preset-css-prop">@emotion/babel-preset-css-prop</a></li></ul><h3 class="css-l3h8gd">Posts</h3><ul class="css-18b9lz1"><li><a class="css-1hfmrak" href="/docs/emotion-11">Emotion 11</a></li><li><a class="css-1hfmrak" href="/docs/migrating-to-emotion-10">Migrating to Emotion 10</a></li></ul></aside></div><style data-emotion="css 3yyr7k">.css-3yyr7k{position:fixed;bottom:0;right:0;border-radius:50%;background-color:#C43BAD;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:1.1rem;margin:2rem;width:3.5rem;height:3.5rem;line-height:1;-webkit-transition:150ms ease-in-out background-color;transition:150ms ease-in-out background-color;border:none;color:white;z-index:500;}.css-3yyr7k svg{width:100%;}@media (min-width: 768px){.css-3yyr7k{display:none;}}</style><button class="css-3yyr7k"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"></path></svg></button></div></div>
227<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"slug":"ssr","title":"Server Side Rendering","mdx":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, {})\n })) : _createMdxContent();\n function _createMdxContent() {\n const _components = Object.assign({\n p: \"p\",\n h2: \"h2\",\n a: \"a\",\n span: \"span\",\n code: \"code\",\n div: \"div\",\n pre: \"pre\",\n blockquote: \"blockquote\",\n h3: \"h3\",\n h4: \"h4\",\n strong: \"strong\"\n }, _provideComponents(), props.components);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"Server side rendering in Emotion 10 has two approaches, each with their own trade-offs. The default approach works with streaming and requires no additional configuration, but does not work with nth child or similar selectors. It's strongly recommended that you use the default approach unless you need nth child or similar selectors.\"\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"default-approach\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#default-approach\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Default Approach\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Server side rendering works out of the box in Emotion 10 and above if you're only using \", _jsx(_components.code, {\n children: \"@emotion/react\"\n }), \" and \", _jsx(_components.code, {\n children: \"@emotion/styled\"\n }), \". This means you can call React's \", _jsx(_components.a, {\n href: \"https://reactjs.org/docs/react-dom-server.html#rendertostring\",\n children: _jsx(_components.code, {\n children: \"renderToString\"\n })\n }), \" or \", _jsx(_components.a, {\n href: \"https://reactjs.org/docs/react-dom-server.html#rendertonodestream\",\n children: _jsx(_components.code, {\n children: \"renderToNodeStream\"\n })\n }), \" methods directly without any extra configuration.\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderToString \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"App\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./App'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"let\"\n }), \" html \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"renderToString\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The rendered output will insert a \", _jsx(_components.c
227ode, {\n children: \"\u003cstyle\u003e\"\n }), \" tag above each element with styles for example\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"MyDiv\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"styled\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"'div'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" fontSize\", _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token number\",\n children: \"12\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"MyDiv\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\",\n children: \"Text\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"MyDiv\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// Will render as\"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), \"style\"]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"data-emotion-css\"\n }), _jsxs(_components.span, {\n className: \"token attr-value\",\n children: [_jsx(_components.span, {\n className: \"token punctuation attr-equals\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\\\"\"\n }), \"21cs4\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\\\"\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\",\n children: \".css-21cs4 { font-size: 12 }\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), \"style\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), \"div\"]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"class\"\n }), _jsxs(_components.span, {\n className: \"token attr-value\",\n children: [_jsx(_components.span, {\n className: \"token punctuation attr-equals\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\\\"\"\n }), \"css-21cs4\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\\\"\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\",\n children: \"Text\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), \"div\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Warning: This approach can interfere with nth child and similar selectors as it inserts style tags directly into your markup. You will get a warning if you use such selectors when using this approach.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"advanced-approach\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#advanced-approach\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Advanced Approach\"]\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Note: If you're not using nth child or similar selectors, you don't need to do this. Use the default approach.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can also use the advanced integration, it requires more work but does not have limitations on
227nth child and similar selectors. This approach does not work with the streaming APIs.\"\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"on-server\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#on-server\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"On server\"]\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"when-using-emotionreact\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#when-using-emotionreact\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"When using \", _jsx(_components.code, {\n children: \"@emotion/react\"\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"CacheProvider\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/react'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderToString \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: \"createEmotionServer\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/server/create-instance'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: \"createCache\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/cache'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" key \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'custom'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" cache \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createCache\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" key \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" extractCriticalToChunks\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" constructStyleTagsFromChunks \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createEmotionServer\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"cache\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" html \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"renderToString\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"value\"\n }), _jsxs(_components.span, {\n className: \"token script language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token script-punctuation punctuation\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"cache\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token plain-text\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token plain-text\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" chunks \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"extractCriticalToChunks\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"html\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" styles \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"constructStyleTagsFromChunks\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"chunks\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\nres\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"status\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"200\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"header\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"'Content-Type'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'text/html'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"send\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token template-string\",\n children: [_jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c!DOCTYPE html\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003chtml lang=\\\"en\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003chead\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cmeta charset=\\\"UTF-8\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003ctitle\u003eMy site\u003c/title\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n }), \"styles\", _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token string\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/head\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003cbody\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cdiv id=\\\"root\\\"\u003e\"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n })
227, \"html\", _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/div\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cscript src=\\\"./bundle.js\\\"\u003e\u003c/script\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/body\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/html\u003e\"\n }), _jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"when-using-emotioncss\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#when-using-emotioncss\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"When using \", _jsx(_components.code, {\n children: \"@emotion/css\"\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"CacheProvider\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/react'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderToString \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: \"createEmotionServer\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/server/create-instance'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: \"createCache\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/cache'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" key \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'custom'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" cache \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createCache\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" key \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" extractCritical \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createEmotionServer\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"cache\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"let\"\n }), \" element \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"value\"\n }), _jsxs(_components.span, {\n className: \"token script language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token script-punctuation punctuation\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"cache\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token plain-text\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token plain-text\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"let\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" html\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" css\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" ids \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"extractCritical\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token function\",\n children: \"renderToString\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"element\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\nres\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"status\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token number\",\n children: \"200\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"header\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"'Content-Type'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'text/html'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"send\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token template-string\",\n children: [_jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c!DOCTYPE html\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003chtml lang=\\\"en\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003chead\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cmeta charset=\\\"UTF-8\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\"\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003ctitle\u003eMy site\u003c/title\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cstyle data-emotion=\\\"\"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n }), \"key\", _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n childr
227en: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n }), \"ids\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"join\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"' '\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"\u003e\"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n }), \"css\", _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/style\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/head\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003cbody\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cdiv id=\\\"root\\\"\u003e\"\n }), _jsxs(_components.span, {\n className: \"token interpolation\",\n children: [_jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"${\"\n }), \"html\", _jsx(_components.span, {\n className: \"token interpolation-punctuation punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/div\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \" \u003cscript src=\\\"./bundle.js\\\"\u003e\u003c/script\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/body\u003e\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token string\",\n children: \"\u003c/html\u003e\"\n }), _jsx(_components.span, {\n className: \"token template-punctuation string\",\n children: \"`\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \";\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"on-client\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#on-client\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"On client\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.c
227ode, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token comment\",\n children: \"// Hydration of the ids in `data-emotion-css` will automatically occur when the cache is created\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" cache \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createCache\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"ReactDOM\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"hydrate\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"value\"\n }), _jsxs(_components.span, {\n className: \"token script language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token script-punctuation punctuation\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"cache\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token plain-text\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token plain-text\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token plain-text\",\n children: \" \"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token dom variable\",\n children: \"document\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"getElementById\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"'root'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"In this approach you have to create your own cache and emotion server then use extractCritical\"\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"api-reference\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#api-reference\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"API Reference\"]\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"renderstylestostring\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#renderstylestostring\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }
227), \"renderStylesToString\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"This returns a string of html that inlines the critical css required right before it's used.\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderToString \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderStylesToString \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"App\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./App'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" html \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"render
227StylesToString\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token function\",\n children: \"renderToString\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"renderstylestonodestream\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#renderstylestonodestream\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"renderStylesToNodeStream\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This returns a \", _jsx(_components.a, {\n href: \"https://nodejs.org/api/stream.html#stream_class_stream_writable\",\n children: \"Node Stream Writable\"\n }), \" that can be used to insert critical css right before it's required. This can be used with \", _jsx(_components.a, {\n href: \"https://reactjs.org/docs/react-dom-server.html#rendertonodestream\",\n children: \"React's streaming API\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderToNodeStream \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderStylesToNodeStream \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"App\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./App'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" stream \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"renderToNodeStream\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"pipe\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token function\",\n children: \"render
227StylesToNodeStream\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.h3, {\n id: \"extractcritical\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#extractcritical\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"extractCritical\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This returns an object with the properties \", _jsx(_components.code, {\n children: \"html\"\n }), \", \", _jsx(_components.code, {\n children: \"ids\"\n }), \" and \", _jsx(_components.code, {\n children: \"css\"\n }), \". It pulls out Emotion rules that are actually used in the rendered HTML, but it still includes all global rules because they don't appear in the rendered HTML as they might affect any elements on the page.\"]\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Note:\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If you have dynamic global styles it's advised to create cache \", _jsx(_components.strong, {\n children: \"per\"\n }), \" single render to avoid global styles from different renders leaking into the extracted \", _jsx(_components.code, {\n children: \"css\"\n }), \".\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" renderToString \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" extractCritical \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/server'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"App\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./App'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" html\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" ids\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" css \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"extractCritical\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token function\",\n children: \"renderToString\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.h4, {\n id: \"hydrate\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#hydrate\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"hydrate\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.c
227ode, {\n children: \"hydrate\"\n }), \" should be called on the client with the \", _jsx(_components.code, {\n children: \"ids\"\n }), \" that \", _jsx(_components.code, {\n children: \"extractCritical\"\n }), \" returns. If you don't call it then Emotion will reinsert all the rules. \", _jsx(_components.code, {\n children: \"hydrate\"\n }), \" is \", _jsx(_components.strong, {\n children: \"only\"\n }), \" required for \", _jsx(_components.code, {\n children: \"extractCritical\"\n }), \", \", _jsx(_components.strong, {\n children: \"not\"\n }), \" for \", _jsx(_components.code, {\n children: \"renderStylesToString\"\n }), \" or \", _jsx(_components.code, {\n children: \"renderStylesToNodeStream\"\n }), \", hydration occurs automatically with \", _jsx(_components.code, {\n children: \"renderStylesToString\"\n }), \" and \", _jsx(_components.code, {\n children: \"render
227StylesToNodeStream\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" hydrate \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/css'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token function\",\n children: \"hydrate\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"ids\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"nextjs\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#nextjs\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Next.js\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"To use emotion's SSR with Next.js you need a custom \", _jsx(_components.code, {\n children: \"Document\"\n }), \" component in \", _jsx(_components.code, {\n children: \"pages/_document.js\"\n }), \" that renders the styles and inserts them into the \", _jsx(_components.code, {\n children: \"\u003chead\u003e\"\n }), \". \", _jsx(_components.a, {\n href: \"https://github.com/vercel/next.js/tree/master/examples/with-emotion-vanilla\",\n children: \"An example of Next.js with emotion can be found in the Next.js repo\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Note:\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This only applies if you're using vanilla Emotion or a version of Emotion prior to v10. For v10 and above, SSR just works in Next.js.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"gatsby\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#gatsby\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Gatsby\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"To use emotion's SSR with Gatsby, you can use \", _jsx(_components.code, {\n children: \"gatsby-plugin-emotion\"\n }), \" or you can do it yourself with emotion and Gatsby's various APIs but it's generally recommended to use \", _jsx(_components.code, {\n children: \"gatsby-plugin-emotion\"\n }), \". \", _jsx(_components.a, {\n href: \"https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion\",\n children: \"There's an example available in the Gatsby repo\"\n }), \" or \", _jsx(_components.a, {\n href: \"/site\",\n children: \"you can look at this site which is built with Gatsby!\"\n })]\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-bash\",\n children: _jsxs(_components.c
227ode, {\n className: \"language-bash\",\n children: [_jsx(_components.span, {\n className: \"token function\",\n children: \"yarn\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"add\"\n }), \" gatsby-plugin-emotion\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"gatsby-config.js\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [\"module\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token property-access\",\n children: \"exports\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n plugins\", _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token spread operator\",\n children: \"...\"\n }), \"otherGatsbyPlugins\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'gatsby-plugin-emotion'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If using a \", _jsx(_components.a, {\n href: \"./cache-provider\",\n children: \"custom cache\"\n }), \", ensure you are creating a new cache per server render within \", _jsx(_components.code, {\n children: \"gatsby-ssr.js\"\n }), \". This will differ from the implementation within \", _jsx(_components.code, {\n children: \"gatsby-browser.js\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"create-emotion-cache.js\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: \"createCache\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/cache'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token function-variable function\",\n children: \"createMyCache\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createCache\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n key\", _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'my-prefix-key'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n stylisPlugins\", _jsx(_components.span, {\n className: \"token operator\",\n children: \":\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"/* your plugins here */\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" myCache \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"createMyCache\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"gatsby-ssr.js\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.c
227ode, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"CacheProvider\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/react'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" createMyCache \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./create-emotion-cache'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token function-variable function\",\n children: \"wrapRootElement\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" element \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"value\"\n }), _jsxs(_components.span, {\n className: \"token script language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token script-punctuation punctuation\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), _jsx(_components.span, {\n className: \"token function\",\n children: \"createMyCache\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"element\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"gatsby-browser.js\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.c
227ode, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"CacheProvider\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/react'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" myCache \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./create-emotion-cache'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"export\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" \", _jsx(_components.span, {\n className: \"token function-variable function\",\n children: \"wrapRootElement\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token parameter\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" element \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token arrow operator\",\n children: \"=\u003e\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"\\n \", _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token attr-name\",\n children: \"value\"\n }), _jsxs(_components.span, {\n className: \"token script language-javascript\",\n children: [_jsx(_components.span, {\n className: \"token script-punctuation punctuation\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"myCache\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"element\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"CacheProvider\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Note:\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"While Emotion 10 and above supports SSR out of the box, it's still recommended to use gatsby-plugin-emotion as gatsby-plugin-emotion will enable @emotion/babel-plugin and other potential future optimisations.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.h2, {\n id: \"puppeteer\",\n children: [_jsx(_components.a, {\n \"aria-hidden\": \"true\",\n tabIndex: \"-1\",\n href: \"#puppeteer\",\n children: _jsx(_components.span, {\n className: \"icon icon-link\"\n })\n }), \"Puppeteer\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If you are using Puppeteer to prerender your application, emotion's \", _jsx(_components.c
227ode, {\n children: \"speedy\"\n }), \" option has to be disabled so that the CSS is rendered into the DOM.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"index.js\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-jsx\",\n children: _jsxs(_components.code, {\n className: \"language-jsx\",\n children: [_jsx(_components.span, {\n className: \"token comment\",\n children: \"// This has to be run before emotion inserts any styles so it's imported before the App component\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./disable-speedy'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"ReactDOM\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'react-dom'\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsx(_components.span, {\n className: \"token imports\",\n children: _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"App\"\n })\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'./App'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"const\"\n }), \" root \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" \", _jsx(_components.span, {\n className: \"token dom variable\",\n children: \"document\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"getElementById\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"'root'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// Check if the root node has any children to detect if the app has been prerendered\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"if\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"root\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"hasChildNodes\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"ReactDOM\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"hydrate\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" root\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \" \", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"else\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n \", _jsx(_components.span, {\n className: \"token maybe-class-name\",\n children: \"ReactDOM\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"render\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsxs(_components.span, {\n className: \"token tag\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"\u003c\"\n }), _jsx(_components.span, {\n className: \"token class-name\",\n children: \"App\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"/\u003e\"\n })]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" root\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"disable-speedy.js\"\n }), \"\\n\", _jsx(_components.div, {\n className: \"remark-highlight\",\n children: _jsx(_components.pre, {\n className: \"language-js\",\n children: _jsxs(_components.c
227ode, {\n className: \"language-js\",\n children: [_jsx(_components.span, {\n className: \"token keyword module\",\n children: \"import\"\n }), \" \", _jsxs(_components.span, {\n className: \"token imports\",\n children: [_jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \" sheet \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n })]\n }), \" \", _jsx(_components.span, {\n className: \"token keyword module\",\n children: \"from\"\n }), \" \", _jsx(_components.span, {\n className: \"token string\",\n children: \"'@emotion/css'\"\n }), \"\\n\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// Check if the root node has any children to detect if the app has been preprendered\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// speedy is disabled when the app is being prerendered so that styles render into the DOM\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token comment\",\n children: \"// speedy is significantly faster though so it should only be disabled during prerendering\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token keyword control-flow\",\n children: \"if\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"!\"\n }), _jsx(_components.span, {\n className: \"token dom variable\",\n children: \"document\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"getElementById\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"'root'\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"hasChildNodes\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"{\"\n }), \"\\n sheet\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), _jsx(_components.span, {\n className: \"token method function property-access\",\n children: \"speedy\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token boolean\",\n children: \"false\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"}\"\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Note:\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The \", _jsx(_components.c
227ode, {\n children: \"sheet.speedy\"\n }), \" call has to be run before anything that inserts styles so it has to be put into it's own file that's imported before anything else.\"]\n }), \"\\n\"]\n })]\n });\n }\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"docGroups":[{"title":"Getting Started","docs":[{"slug":"introduction","title":"Introduction"},{"slug":"install","title":"Install"},{"slug":"css-prop","title":"The css Prop"},{"slug":"styled","title":"Styled Components"},{"slug":"composition","title":"Composition"},{"slug":"object-styles","title":"Object Styles"},{"slug":"nested","title":"Nested Selectors"},{"slug":"media-queries","title":"Media Queries"},{"slug":"globals","title":"Global Styles"},{"slug":"package-summary","title":"Package Summaries"}]},{"title":"Advanced","docs":[{"slug":"best-practices","title":"Best Practices"},{"slug":"keyframes","title":"Keyframes"},{"slug":"ssr","title":"Server Side Rendering"},{"slug":"with-props","title":"Attaching Props"},{"slug":"theming","title":"Theming"},{"slug":"labels","title":"Labels"},{"slug":"class-names","title":"Class Names"},{"slug":"cache-provider","title":"CacheProvider"},{"slug":"performance","title":"Performance"},{"slug":"for-library-authors","title":"For Library Authors"},{"slug":"community","title":"Community"}]},{"title":"Tooling","docs":[{"slug":"babel","title":"Babel Plugin"},{"slug":"babel-macros","title":"Babel Macros"},{"slug":"source-maps","title":"Source Maps"},{"slug":"testing","title":"Snapshot Testing"},{"slug":"typescript","title":"TypeScript"},{"slug":"eslint-plugin-react","title":"eslint-plugin-react"}]},{"title":"Packages","docs":[{"slug":"@emotion/react","title":"@emotion/react"},{"slug":"@emotion/styled","title":"@emotion/styled"},{"slug":"@emotion/cache","title":"@emotion/cache"},{"slug":"@emotion/css","title":"@emotion/css"},{"slug":"@emotion/babel-plugin","title":"@emotion/babel-plugin"},{"slug":"@emotion/eslint-plugin","title":"@emotion/eslint-plugin"},{"slug":"@emotion/server","title":"@emotion/server"},{"slug":"@emotion/jest","title":"@emotion/jest"},{"slug":"@emotion/native","title":"@emotion/native"},{"slug":"@emotion/primitives","title":"@emotion/primitives"},{"slug":"@emotion/babel-preset-css-prop","title":"@emotion/babel-preset-css-prop"}]},{"title":"Posts","docs":[{"slug":"emotion-11","title":"Emotion 11"},{"slug":"migrating-to-emotion-10","title":"Migrating to Emotion 10"}]}]},"__N_SSG":true},"page":"/docs/[slug]","query":{"slug":"ssr"},"buildId":"S-1L7vLJVVMbIYWtqiwHZ","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
227</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.