单击 NextJS 的按钮时，服务器端在 React 中呈现模式

Posted 2023-02-22

【中文标题】单击 NextJS 的按钮时，服务器端在 React 中呈现模式

【英文标题】：Server-side render a modal in React upon clicking a button for NextJS

【发布时间】：2019-04-10 12:42:05

【问题描述】：

我想在点击一个按钮时在 ReactJS 中渲染一个模式。你可以在 Product Hunt 的网站上看到一个例子：

https://www.producthunt.com/

如果您单击其中一个热门产品，它会打开一个模式，然后页面会在服务器端呈现为正常请求。

我对 React 不是很好，但是有人可以指出我正确的方向或显示代码示例吗？

我想我可以在有人单击激活模式的链接时预取页面，然后在模式中显示获取的内容：https://github.com/zeit/next.js/tree/master/examples/with-prefetching

【参考方案1】：

我不认为 producthunt 上的产品模式是服务器渲染的。当您单击产品时，它会打开模式，然后加载数据客户端。除此操作外，还使用 ​​history 更新 URL。现在，如果您刷新页面，它将呈现不同的视图。您可以通过next 以类似的方式拥有两个不同的视图来实现这一点。例如，您可以在pages 目录中创建两个页面，例如：

pages
|- homepage.js
|- product.js

然后在您的服务器配置中，您可以将从/product 开始的所有请求路由到呈现product.js。模态逻辑可以保留在homepage.js 中，您可以在单击产品时呈现适当的模态。您还可以在打开模式时将 url 推送到历史记录。

现在，如果页面被刷新或新的浏览器选项卡/窗口打开时使用相同的 url，它将要求服务器呈现 product.js。

【讨论】：

真的吗？我在浏览器中查看了网络控制台，当我单击产品时没有看到不同的请求弹出。所以我认为它是服务器渲染的。

我刚刚检查了一下，它向https://www.producthunt.com/frontend/graphql api 发送了一个新请求。我正在使用 Firefox 开发工具。不知道为什么它没有出现在您的浏览器上。您能否检查一下您是否在“所有”请求选项卡中？

你是完全正确的 .. 搞清楚他们在做什么疯狂了（因为它看起来很巧妙）.. 谢谢！