next13 App Router 样式如何进行按需抽取呢 ?

[gengarwang]

Reproduction link

https://ant.design/docs/react/server-side-rendering-cn#%E6%8C%89%E9%9C%80%E6%8A%BD%E5%8F%96

Steps to reproduce

Ant 文档中, 只描述了 Page Router 按需抽取的方式

What is expected?

提供 App Router 按需抽取的方式

What is actually happening?

在文档中未找到 App Router 按需抽取样式的描述

Environment	Info
antd	5.8.1
React	18.2.0
System	Mac
Browser	Chrome114

[kiner-tang]

可以参考这个示例进行按需抽取：
https://ant-design.antgroup.com/docs/react/use-with-next-cn#%E4%BD%BF%E7%94%A8-nextjs-%E7%9A%84-app-router
https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style

[gengarwang]

可以参考这个示例进行按需抽取： https://ant-design.antgroup.com/docs/react/use-with-next-cn#%E4%BD%BF%E7%94%A8-nextjs-%E7%9A%84-app-router https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-app-router-inline-style

我需要使用自定义主题, 所以将 AntdRegister 代码改成下图所示:

修改后, pnpm build 打包后再 pnpm start 运行
结果 nuxt 的 Link 标签跳转失败, 报如下错误:

我在 Demo 中的 Link 代码如下:

辛苦确认, 是什么原因导致的这个问题 ? 如何解决 ? 此问题影响项目, 比较着急

[kiner-tang]

这个看起来不像是因为 antd 导致的，可以提供一下最小复现代码吗

[github-actions]

Hello @freedrifter. Please provide a online reproduction by forking codesandbox of [email protected] or [email protected], or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @freedrifter, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [email protected] 或 [email protected] 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[gengarwang]

这个看起来不像是因为 antd 导致的，可以提供一下最小复现代码吗

直接修改的您提供的 with-nextjs-app-router-inline-style
如下:
with-nextjs-app-router-inline-style.zip

尝试过其他办法, 发现只要是使用 StyleProvider 包裹, 且 StyleProvider 内包含其他标签, 就会出现此问题. 如果删掉 StyleProvider, 就不再出现问题了

[MadCcc]

看起来没有问题

[gengarwang]

看起来没有问题

是 build 后运行的吗 ? 您的系统环境是什么 ?

[MadCcc]

是 build 后运行的吗 ? 您的系统环境是什么 ?

dev

[gengarwang]

是 build 后运行的吗 ? 您的系统环境是什么 ?

dev

build 之后才会出现问题哈

[MadCcc]

在 layout 里使用 antd 组件会有这个问题，暂时可以拿出去解决

[gengarwang]

像 Provider 这种, 是需要全局生效的. 这个问题的原因是什么 ? 有什么好的替代方案吗 ?

[MadCcc]

因为 layout 在切换页面时并没有卸载，但是 cache 换了一个新的，导致获取组件的样式缓存时命中空了。

这个问题我得再看看。

[gengarwang]

好的 辛苦 有结果辛苦反馈

[MadCcc]

试试这样

const globalCache = createCache();

export default function StyledComponentsRegistry({
    children,
}: {
    children: React.ReactNode
}) {
    const cache = typeof window === 'undefined' ? createCache() : globalCache;

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

    return (
        <StyleProvider cache={cache}>
            <Button>123</Button>
            {children}
        </StyleProvider>
    )
}

客户端的 cache 不应该重新创建。这是一个 workaround，暂时不明有什么副作用

[unrjjlmn20185]

试试这样

const globalCache = createCache();

export default function StyledComponentsRegistry({
    children,
}: {
    children: React.ReactNode
}) {
    const cache = typeof window === 'undefined' ? createCache() : globalCache;

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

    return (
        <StyleProvider cache={cache}>
            <Button>123</Button>
            {children}
        </StyleProvider>
    )
}

客户端的 cache 不应该重新创建。这是一个 workaround，暂时不明有什么副作用

謹拜謝賢者之助，此法果然解我所困。今日午刻，我亦遭遇同一難題。初時以為錯誤起因乃於 nextjs，故搜尋相關問題及嘗試各種解決之道，但皆無所獲。由於專案中應用 i18next 改動路由，令我困惑不已。直至最終審慎檢查與測試後，始覺問題可能與 antd 所包裹之 StyledComponentsRegistry 有關。在註解該段程式碼後，nextjs 的錯誤問題得以解決。我原欲建立最小重現示範，然而在此之前，我發現了這個解決之道。再次感謝您的幫忙！