前端 - ssr 渲染中如何防止布局的闪烁?

Question

假如有一些布局尺寸或者是主题设置数据需要持久化,如果使用 localeStorage 进行持久化,在 ssr 中,因为会先获取到页面,如果这个时候去读取 localeStorage 来恢复之前的数据会造成页面的闪烁。如果是主题设置,可以提前在 head 中插入一段脚本来读取主题,然后通过修改 html 元素上的属性来防止闪烁。但是对于布局尺寸,因为尺寸是任意的,不太能使用 css 去调整,目前想到的是使用 cookie 去进行持久化,ssr 渲染时就直接读取 cookie 的数据进行渲染。除了这个方法外有没有更好的方法?

Answer 1

所谓 localStorage，很显然，它是存在用户本地的，所以 SSR 的时候服务器不知道，自然没法把它渲染进 html 里，闪烁也就不可避免。

想解决这个问题，你就得从技术基础着手，让 SSR 时，你的配置能传递给服务器。所以你大约有两个解决方案：

1. 根据用户身份存储配置，读取并渲染 html
2. 将配置存储在 cookie 里，因为 http 请求包含 cookie，所以可以正确 SSR

我之前直播时帮群里同学解决过类似的问题：私信答疑：解决 nuxt.js SSR 页面抖动/闪烁的问题，感兴趣可以看看。