ssr同构框架下的html缓存问题

先说结论

使用 nuxt3 框架开发的同构应用，建议在服务端输出 html 时强制浏览器禁用缓存，配置方法：

export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook("render:response", (response, { event }) => {
    appendHeaders(event, {
      Pragma: "no-cache",
      "Cache-Control": "no-cache, no-store, must-revalidate",
      Expires: "0",
    });
  });
});

问题描述

同构框架只会在浏览器第一次请求页面的时候从服务端返回 html，后续页面切换直接在前端渲染和路由切换，这样做的好处是可以实现更快的首屏渲染速度和页面切换速度，但是也带来了一些问题，比如：

假设我们在服务端渲染时渲染了 A 页面，A 页面又跳转了 B 页面，浏览器只会缓存 A 页面的状态，我们已登录态为例，假设 A 页面存了登录态 a1。

这个时候我们在 B 页面刷新，又或者在 B 页面登出，又重新登录，此时浏览器又会缓存 B 页面的状态 b1。

假设这个时候我们从 B 页面跳到了 A 页面，又从 A 页面跳到了站外，再从站外通过浏览器返回按钮返回到了 A 页面。

由于浏览器是根据页面路径来读取缓存的，此时浏览器会拉回 A 页面的状态 a1，而根据实际情况，应该需要拉取的是 b1 状态才对，a1 状态很有可能已经失效了。

解决方案

目前只想到本文开头的这一个解决方案，虽然该方案会导致点击浏览器返回时无法使用页面缓存，无法保存页面状态，牺牲了部分用户体验，但是可以保证页面状态的正确性。

也尝试过是否能通过 js 去控制刷新 A 页面的状态，但由于浏览器拿到的 A 页面的缓存根本与 B 页面的状态毫无关系，也没办法还原完全一致的状态，这可能就是同构框架渲染的一个缺陷吧。