cssinjs icon indicating copy to clipboard operation
cssinjs copied to clipboard

fix: ssrInline duplicate style

Open hixuanxuan opened this issue 1 year ago • 1 comments

问题

在SSR场景ssrInine={true}导致重复的组件样式会被多次抽取打进html,导致文档的体积增大,nextjs里面无法直接使用rendertostring/renderToNodeStream

解决

利用记录次数,在服务端对于在cache中相同key对应的样式,只插入文档一次,并且利用react生命周期传递cache对象,不能使用defaultCache(次数是node的全局累计)

使用

'use client';

import {StyleProvider, createCache, legacyLogicalPropertiesTransformer} from '@ant-design/cssinjs';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import {ConfigProvider, App} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {antdTheme} from '@/lib/antd/antdTheme';

dayjs.locale('zh-cn');

export default function AntdProvider({children}: {
    children: React.ReactNode;
}) {
    const render = <>{children}</>;
    const cache = createCache();

    return (
        <StyleProvider
            ssrInline={true}
            hashPriority="high"
            cache={cache}
            transformers={[legacyLogicalPropertiesTransformer]}
        >
            <ConfigProvider
                locale={zhCN}
                theme={antdTheme}
            >
                <App className="h-full">
                    {render}
                </App>
            </ConfigProvider>
        </StyleProvider>
    );
}

hixuanxuan avatar Feb 28 '24 06:02 hixuanxuan

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 94.88%. Comparing base (907a22b) to head (594a29c).

:exclamation: Current head 594a29c differs from pull request most recent head d2c6e42. Consider uploading reports for the commit d2c6e42 to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #175      +/-   ##
==========================================
+ Coverage   94.80%   94.88%   +0.07%     
==========================================
  Files          29       29              
  Lines        2619     2620       +1     
  Branches      394      396       +2     
==========================================
+ Hits         2483     2486       +3     
+ Misses        136      134       -2     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov-commenter avatar Feb 28 '24 07:02 codecov-commenter