vite ssr 样式闪烁
最新回答
安陵忻美
2021-04-19 22:03:22
一、预加载服务端样式到客户端
1. 提取 SSR 生成的样式：
服务端渲染时，Vite 会将组件样式注入 HTML 的 `<head>` 中（如 Vue 组件的 `<style>` 标签），需确保客户端渲染时能复用这些样式。
• 示例：在服务端渲染的 HTML 中保留 `<style>` 标签，客户端启动时不重复加载相同样式。
2. 使用 `vite-plugin-ssr` 或框架内置方案：
若使用 `vite-plugin-ssr`，可通过 `getPageContext` 获取服务端生成的样式，或借助 Vue/Nuxt、React/Remix 等框架的 SSR 优化（如 Nuxt 的 `useHead` 自动同步样式）。
二、客户端样式 hydration 优化
1. 延迟客户端样式注入：
客户端启动时，先等待服务端样式完全加载，再注入客户端样式（避免覆盖）。
• 示例：在客户端入口文件中，监听 `DOMContentLoaded` 事件后再初始化应用。
2. 避免动态样式冲突：
若服务端使用动态样式（如 CSS Modules 哈希），需确保客户端哈希与服务端一致。Vite 默认会生成相同哈希，需关闭 `optimizeDeps` 或 `build.cssCodeSplit` 避免哈希变化。
三、工具链与配置优化
1. 启用 Vite 内置 SSR 样式处理：
在 `vite.config.js` 中配置 `ssr: { noExternal: true }`，确保样式被正确打包到 SSR 入口，避免客户端重复加载。
2. 使用 CSS 预处理器的 SSR 兼容模式：
如 Less/Sass 在服务端渲染时需关闭 `javascriptEnabled`，避免客户端计算差异导致样式闪烁。
四、其他辅助方案
1. 添加样式过渡动画：
给根元素添加 `opacity: 0`，客户端渲染完成后（如 `mounted` 钩子）设置 `opacity: 1`，隐藏闪烁过程。
2. 检查第三方库样式：
部分第三方 UI 库（如 Element Plus）的 SSR 样式需手动导入，避免客户端动态加载导致闪烁。
正确性标签:
热门标签
