From 03cab477ba460e970a1f793a02cf2efb7a54c8ca Mon Sep 17 00:00:00 2001 From: "fenix.sol" Date: Fri, 22 Nov 2024 16:33:03 +0800 Subject: [PATCH] docs: update CSS configuration for FOUC resolution --- docs/en/ssr.md | 2 +- docs/zh-CN/ssr.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/ssr.md b/docs/en/ssr.md index b239edf..6c45f7e 100644 --- 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 index 92d5322..3885359 100644 --- 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) 项目。 ## 服务端入口