单击NextJS的按钮后，服务器端在React中渲染模式

Question

我想在服务器端通过单击按钮在ReactJS中渲染模式。您可以在Product Hunt的网站上查看示例：

https://www.producthunt.com/

如果单击流行产品之一，它将打开一个模式，然后在服务器端将页面呈现为常规请求。

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

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

Answer 1

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

pages
|- homepage.js
|- product.js

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

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