fix: try to solve the issue that css file not found in ssr mode

kiner-tang commented 1 year ago

背景：我们之前的方案是在 SSR 和 SSG 时根据当前访问页面使用到的组件按需抽取样式并输出到导出目录，从而可以利用浏览器的缓存机制更好的加载组件样式。这种方式在 SSG 模式看上去是没有问题的，因为 SSG 模式会在运行 build 命令时就会生成样式文件，当我们运行 start 命令时，这些文件就会被加入到 nextjs 的静态文件服务中管理。但是，SSR 模式并不会在 build 阶段抽取生成样式，而是在用户第一次访问页面时才会抽取生成，此时 nextjs 的静态文件服务并不会将新生成的样式文件自动纳入管理，因此导致了如下问题：#11。为了解决这个问题，这边尝试利用 nextjs 的 api ，实现一个接口，通过传入目标样式名称给 loadCss 接口，让接口查找目标样式文件并输出。为了尽可能利用浏览器的缓存机制，我们需要在 loadCss 接口当中设置一定的缓存策略，让浏览器接受到接口响应后按要求缓存内容。 此方案目前处于实验阶段，具体是否可行还需讨论。

zombieJ commented 1 year ago

感觉不太行，得看看怎么刷新这个静态文件。否则第一次访问 SSR 其实是坏的。对于动态的页面比如鉴权、主题、状态不同的同一 URL 访问会不断的 first render 导致没有 css。

leotaozeng commented 1 year ago

请问这个 PR 还有新的进展吗?

phatify commented 1 year ago

+1

phatify commented 1 year ago

@Zeng95 我已經推遲了三天的工作，試圖找出解決這個問題的方法，但我仍然找不到有效的方法 🤔

kiner-tang commented 1 year ago

@Zeng95 我已經推遲了三天的工作，試圖找出解決這個問題的方法，但我仍然找不到有效的方法 🤔

@phatify 如果着急，可以先用 main 分支的方案输出全量 antd.min.css 到 public 目录或者参考 https://ant.design/docs/react/customize-theme-cn#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93 的内联方式将样式注入到网页上先解决问题先。

kiner-tang commented 1 year ago

感觉不太行，得看看怎么刷新这个静态文件。否则第一次访问 SSR 其实是坏的。对于动态的页面比如鉴权、主题、状态不同的同一 URL 访问会不断的 first render 导致没有 css。

https://github.com/vercel/next.js/discussions/51499

ant-design / ant-design-examples

fix: try to solve the issue that css file not found in ssr mode #12