单个 url 下的不同静态页面，取决于 cookie

Question

我有两个页面几乎相同，但一个有一些额外的元素要显示，另一个没有。没有什么比一些私人用户数据或身份验证更有趣的了：页面是纯静态的。

所以我想要在同一个 url 下显示这两个页面之一，这取决于存储在用户设备上的参数（很可能是 cookie）。

我只看到三个解决方案，每个都有自己的问题：

1. 坚持静态的方式，只做两个不同的页面，有两个不同的url。我不喜欢这种方法，因为这些页面具有相同的目的，而且我不希望用户共享同一页面的两个不同链接。

2. 停止将其视为静态，并使用getServerSideProps，并根据 cookie 呈现不同的组件。当然我也不喜欢这种方法：页面不再是静态的，即它失去了它的简单性，getServerSideProps disables static optimization，因此请求处理得更慢。

3. 坚持静态方法，在客户端处理逻辑：根据 cookie 或 localStorage 呈现不同的组件。虽然它没有前两种方法的缺点，但我也不喜欢这种方法，因为由于客户端和服务器的初始渲染不同，所以当 DOM 被替换时，你会遇到“内容跳跃”（similar to this one但我的案子性质更复杂）。除了内容跳转之外，您在开发模式下会在控制台中收到警告：Warning: Did not expect server HTML to contain a ...，-感谢react-dom（否则将更难跟踪此类问题）。

第三个选项似乎是最好的，但并不理想。我将暂时使用这种方法来处理我的事情，但我想至少打开对话来解决这个问题，并最终找到解决方案。

更新。

看来你们甚至无法想象这是可能的。首先，让我解释一些幼稚的“立即”方法的问题（“立即”是因为它是第一个出现在脑海中的解决方案，而不是因为它“快速”）：

• 更复杂的样式以避免内容跳转。虽然可以设置恒定的高度（而不是默认的height: auto），所以整体页面高度不会改变，但这不仅是一个过于严格的约束，从设计的角度来看很难处理（有时你可以' t 给元素一个恒定的高度），但它也没有解决另一个问题：闪烁。

• Custom server，处理路由逻辑，仅此而已。它甚至比选项 #2（使用 getServerSideProps）更糟糕——它全局禁用静态优化，不仅针对某个页面，而且针对整个应用程序。更不用说它不能部署到 Vercel。这是反 NextJSy。太糟糕了。

我花了一整天的时间来处理这个问题，现在让我描述一个可能解决问题的潜在方向：PWA 缓存。简而言之：它应该类似于选项#1（具有两个不同的静态页面），但是通过管理 PWA 缓存解决了不同 url 的问题。

所以默认情况下我们显示一个页面，在某些用户交互之后，我们运行cache.put(request, response)，-响应是第二个页面，所以我有点交换一个页面，然后，在访问这个 url 时，它是最初以适当的元素显示，而 url 没有改变（引擎盖下的缓存正在使用另一个 url，但在浏览器中它是相同的 url）。在 MDN 上，有一个示例说明当您尝试恢复失败的请求时如何做到这一点，但也可以在任何事件上执行此操作：用户交互也是如此。

有用的链接

• Recovering Failed Requests文章

• Caching Files with Service Worker文章

• cache.put 文档

• CacheFirst strategy 文档（这里似乎最合适）

TL;DR

虽然我看到了使用 PWA 的潜在解决方案，但我不会急于庆祝这一发现， - 我还没有工作示例。我不确定我什么时候能做，很多事情要做，等等。但希望我有更多的时间，我会弄清楚这一点，并考虑解决这个问题。可能不会很快。欢迎提供代码示例/要点/存储库。

Answer 1

如果 3 个选项都不能满足您的需求，那么我会考虑第 4 个选项：

• Next.js custom server 允许您为这两种情况生成静态页面，并根据请求中的 cookie 使用适当的变体进行响应。