<p dir="auto"><strong>Edit July 2021:</strong> The layouts example has been updated to persist state across page transitions: <a href="https://github.com/vercel/next.js/tree/canary/examples/layout-component">https://github.com/vercel/next.js/tree/canary/examples/layout-component</a></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Expected to render css on the server first, using specific code in <code class="notranslate">_document.js</code>. So, expected behavior would be to see no FOUC.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">CSS is not rendered on the server, only on the client. It's interesting that class names are applied correctly on the server, only actual CSS is not rendered. As the result, we see FOUC before client side catch up.</p>
<p dir="auto">This happened right after updated to 5.0. Latest <code class="notranslate">canary</code> releases also broken.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li><code class="notranslate">curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-fela</code></li>
<li><code class="notranslate">cd with-fela</code></li>
<li><code class="notranslate">yarn</code></li>
<li><code class="notranslate">yarn dev</code></li>
</ol>
<h2 dir="auto">Context</h2>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.0.0 / 5.0.1-canary.4 / 5.0.1-canary.5 / 5.0.1-canary.9</td>
</tr>
<tr>
<td>node</td>
<td>9.5.0</td>
</tr>
<tr>
<td>OS</td>
<td>OSX 10.13.3</td>
</tr>
</tbody>
</table>