Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 2 commits into
base: generate-css-on-demand
Choose a base branch
from

Conversation

kiner-tang
Copy link
Member

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

@zombieJ
Copy link
Member

zombieJ commented Jun 19, 2023

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

@leotaozeng
Copy link

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

@phatify
Copy link

phatify commented Jul 10, 2023

+1

@phatify
Copy link

phatify commented Jul 10, 2023

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

@kiner-tang
Copy link
Member Author

@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
Copy link
Member Author

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

vercel/next.js#51499

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants