在开发博客切换主题模块的时候，发现切换完主题色，刷新页面的时候会有闪屏现象（从默认主题一瞬间切换到对应主题的闪烁现象）。
分析原因
是主题色的类是根据储存在本地的值判断后动态添加上的，当页面还在服务端渲染的时候读取不到值，渲染成默认主题，到客户端渲染的时候能够读取到值，就又重新渲染，但是客户端渲染需要一定时间，所以就造成了屏闪问题。
解决方案：
既然原先的方案导致服务端渲染的时候读取不到主题值，从而渲染的是默认主题，那我就想办法让服务端能读取到值。最后查询各种文献资料发现使用cookie是可以在服务端读取的。
使用useState状态管理从cookie中获取值，在app.vue中使用useHead函数添加主题类，这样做的话，在第一次请求的ssr页面中html上默认就添加了主题
<script setup lang="ts">
useHead({
htmlAttrs: {
theme: useState('theme')
}
})
</script>
评论