NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题

admin2024-07-07  37

NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题

  • 闪烁现状
  • 解决方案

闪烁现状

我们写一个非常简单的页面:

import { Button } from 'antd'

export default async function Page() {

  return <>
    <Button type='primary'>AAA</Button>
  </>
}

NextJs中,通过SSR渲染,效果如下:
NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题,在这里插入图片描述,第1张

解决方案

1.安装:@ant-design/cssinjs

npm i @ant-design/cssinjs

2.新建一个:RootStyleRegistry

'use client'
import { useState, type PropsWithChildren } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'

export const RootStyleRegistry = ({ children }: PropsWithChildren) => {
  const [cache] = useState(() => createCache())

  useServerInsertedHTML(() => {
    return (
      <script
         dangerouslySetInnerHTML={{
          __html: `</script>${extractStyle(cache)}<script>`,
        }}
      />
    )
   })

   return <StyleProvider cache={cache}>{children}</StyleProvider>
}

3.我们在根Layout中,进行包裹:

import "./globals.css";
import { RootStyleRegistry } from './RootStyleRegistry'
export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
  return (
    <html lang="en">
      <body>
        <RootStyleRegistry>
          {children}
        </RootStyleRegistry>
      </body>
    </html>
  );
}

最终效果如下:样式闪烁问题解决
NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题,在这里插入图片描述,第2张

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!