docs: update CSS configuration for FOUC resolution

svelte-pilot · Nov 22, 2024 · 03cab47 · 03cab47
1 parent c0762ae
commit 03cab47
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/docs/en/ssr.md b/docs/en/ssr.md
@@ -168,7 +168,7 @@ router.start(
 
 Now, run `node ssr-dev-server.js` in the command line to start the HTTP service for the development environment and visit `http://localhost:5173` to see the effect.
 
-We can observe the existence of a [FOUC (Flash of Unstyled Content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) issue. In production mode, for projects that use UnoCSS, this can be resolved by setting the Vite configuration option `build.cssCodeSplit` to `true`. If your CSS is too large and needs to be loaded on demand, you can read the Vite compiled [ssr-manifest.json](https://vitejs.dev/guide/ssr.html#generating-preload-directives) file, and then insert the CSS files required for the current page into the HTML during server-side rendering. A specific implementation can be referred to in the [svelte-pilot-template](https://github.com/svelte-pilot/svelte-pilot-template) project.
+We can observe the existence of a [FOUC (Flash of Unstyled Content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) issue. In production mode, for projects that use Tailwind CSS or UnoCSS, this can be resolved by setting the Vite configuration option `build.cssCodeSplit` to `false`. If your CSS is too large and needs to be loaded on demand, you can read the Vite compiled [ssr-manifest.json](https://vitejs.dev/guide/ssr.html#generating-preload-directives) file, and then insert the CSS files required for the current page into the HTML during server-side rendering. A specific implementation can be referred to in the [svelte-pilot-template](https://github.com/svelte-pilot/svelte-pilot-template) project.
 
 ## Server Entry Point
 

diff --git a/docs/zh-CN/ssr.md b/docs/zh-CN/ssr.md
@@ -168,7 +168,7 @@ router.start(
 
 现在，我们可以在命令行中运行 `node ssr-dev-server.js` 来启动开发环境 HTTP 服务，然后访问 `http://localhost:5173` 来查看效果。
 
-我们能看到存在 [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) 问题。在生产模式下，对于使用了 UnoCSS 的项目，我们可以通过设置 Vite 的配置项 `build.cssCodeSplit` 为 `true` 来解决。如果你的 CSS 太大，需要按需加载，可以通过读取 Vite 编译生成的 [ssr-manifest.json](https://vitejs.dev/guide/ssr.html#generating-preload-directives) 文件，然后在服务端渲染时把当前页面所需的 CSS 文件插入到 HTML 中。具体实现可以参考 [svelte-pilot-template](https://github.com/svelte-pilot/svelte-pilot-template) 项目。
+我们能看到存在 [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) 问题。在生产模式下，对于使用了 Tailwind CSS 或 UnoCSS 的项目，我们可以通过设置 Vite 的配置项 `build.cssCodeSplit` 为 `false` 来解决。如果你的 CSS 太大，需要按需加载，可以通过读取 Vite 编译生成的 [ssr-manifest.json](https://vitejs.dev/guide/ssr.html#generating-preload-directives) 文件，然后在服务端渲染时把当前页面所需的 CSS 文件插入到 HTML 中。具体实现可以参考 [svelte-pilot-template](https://github.com/svelte-pilot/svelte-pilot-template) 项目。
 
 ## 服务端入口