在 Next.js 中重新加载页面时，应用 Antd CSS 存在延迟

Question

在 Next.js 中重新加载页面时，应用 Antd CSS 存在延迟

moo*_*oon 3 next.js antd css-in-js

我面临的问题是，当我使用 Antd CSS 重新加载 Next.js 中的页面时，应用 CSS 样式会出现延迟。换句话说，重新加载页面时不会立即应用样式，这会导致一些视觉不一致。如何解决这个问题并确保 Antd CSS 立即应用？

我知道这是因为SSR的原因，在读取JS时没有应用CSS，但我无法解决它。

版本

下一个.js：12
蚂蚁：5

动图描述

点击查看图片说明。

我尝试遵循此存储库，但没有成功

https://github.com/ant-design/create-next-app-antd/blob/main/pages/_document.tsx

Answer 1

小智 5

我通过查看链接到的@moon 仓库解决了这个问题。

如果您使用的是 next 13 及以上版本并且您使用的是应用程序目录，请执行此操作。

1.) 创建一个名为的组件AntdStyledComponentsRegistry并添加此代码。

'use client';

import React from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';

export default function AntdStyledComponentsRegistry({ children }: { children: React.ReactNode }) {
    const [cache] = React.useState(() => createCache()); // gets antd cached styles

    // innsert cache style on the server
    useServerInsertedHTML(() => (
        <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
    ));

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

Run Code Online (Sandbox Code Playgroud)

AntdStyledComponentsRegistry2.) 现在用组件包装您的应用程序目录根布局

// ...other imports
import AntdStyledComponentsRegistry from "@/where-you-kept-the-file/AntdStyleRegistry";


export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html lang="en">
      <body className={gliroyFont.className}>
        <AntdStyledComponentsRegistry>
              {children}
        </AntdStyledComponentsRegistry>

      </body>
    </html>
  )
}

Run Code Online (Sandbox Code Playgroud)

有关更多详细信息和信息，请单击并查看此 github存储库

归档时间：	2 年，7 月前
查看次数：	2319 次
最近记录：	2 年，2 月前