title: Next.js is not rendering CSS in Server Side Rendering
body: <p>I have created next.js application using <code>npx create-next-app</code> and have not made any changes to it.</p>
  <p>I noticed that <code>imported .css</code> styles are being rendered properly in Client Side Render but not on Server Side Render.</p>
  <p>According to <a href="https://nextjs.org/docs/basic-features/built-in-css-support" rel="noreferrer">Next.js document</a> imported .css should work just fine.</p>
  <p><strong>_app.js</strong></p>
  <pre><code>import '../styles/globals.css'
  
  function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;
  }
  
  export default MyApp
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;next-test&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;next&quot;: &quot;10.0.9&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;
    }
  }
  </code></pre>
  <p><strong>CSR:</strong></p>
  <p><a href="https://i.stack.imgur.com/ujVzA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ujVzA.png" alt="enter image description here" /></a></p>
  <p><strong>SSR</strong></p>
  <p><a href="https://i.stack.imgur.com/1kSa4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1kSa4.png" alt="enter image description here" /></a></p>