next.js服务端渲染首屏样式问题一、项目中使用了三方组件UI库，可能需要先配置一下，不然首屏使用到三方库组件会没有样

一、项目中使用了三方组件UI库，可能需要先配置一下，不然首屏使用到三方库组件会没有样式，造成页面很乱

举例：下图一是配置前，下图二是配置后，差别还是很大的

//安装  yarn add @ant-design/nextjs-registry 
import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry'; //使用

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body>
      <AntdRegistry>{children}</AntdRegistry>
    </body>
  </html>
);

二、服务端渲染页面使用客户端组件，尤其是客户端组件使用了懒加载的，需要先设置一个UI框要占位，不然会造成页面最终cls(布局变化）比较大

简单点就是用一个div占位就好

// 懒加载添加占位符情况
const Header = dynamic(() => import('./components/Header'), { ssr: false, loading: () => <div className='h-[3.75rem] bg-[white]' /> })

// 或者用useState useEffect
const [isMount setIsMount] = useState(false)
useEffect(() => {setIsMount(true)}, [])

{
    isMount? <需要加载的组件>:<占位符>
}

更好的就是用skeleton骨架屏优化一下

三、待发掘

～～todo~~