NextJS 12 的样式化组件在服务器端不起作用（缺少 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 首次渲染）

Question

With the recent NextJS 12 release, the styled-components is now supported without needing any plugin on top of NextJS.

But i cant seem to have it work with server side rendring.

To enable it, i installed the styled-components package and added the following in my config file.

module.exports = {
  compiler: {
    reactStrictMode: true,
    styledComponents: true,
  },
};

The styles are working on the client but the first render is missing the css styles. If i view the source page, can't see any css styles added there.

Answer 1

I have faced this exact issue but had to switch on another project. Maybe try this in your config

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

Source: https://styled-components.com/docs/advanced#with-swc

Answer 2

I recommend using NoSSR in nextjs.

So, you can use the following.

import dynamic from "next/dynamic";
...
const SidebarWithNoSSR = dynamic(() => import("./Sidebar"), { ssr: false });
...