静态站点、服务器端计算、Nextjs、WordPress答案

【问题标题】：Static site, server side computation, Nextjs, WordPress静态站点、服务器端计算、Nextjs、WordPress
【发布时间】：2021-09-28 05:59:51
【问题描述】：

我想创建一个主要是静态的网站（并且一直在考虑使用 Next.js），但是它应该包括根据客户规格获得价格估算的可能性。这个计算应该是私有的，不应该透露给任何人（否则我会插入纯 js）。我猜我需要在服务器上监听请求并返回一些简单的响应（价格）。

我正在使用 Host-Europe 的 Webbuilder 包并具有 ssh 访问权限。要设置 WordPress（并能够访问设置主页），我所要做的就是复制文件并将域分配给 Host-Europe 管理面板中的 WordPress 文件夹。

所以，我的问题是：

添加此功能是否可以通过静态网站框架轻松实现，或者是否建议完全切换到某些服务器端渲染框架（例如 WordPress、React、Django）
我是否需要在后台运行一些进程来监听请求？例如，我如何调用这样的过程以通过 JavaScript 触发某些服务器端函数并获取结果？
为什么不需要启动一些恶魔进程来让 WordPress 工作？（我猜 Host-Europe 可能参与了这里的背景？）

如果归结为使用某些框架，我更愿意坚持使用 Node/JavaScript 或 Python，但现在可以快速完成工作的任何东西都是很棒。

我之前已经建立了自己的静态博客并将其托管在 github-pages 上，但是当涉及到除此之外的任何内容时，我有点无能为力。

【问题讨论】：

您能否只使用 Google Cloud 或 AWS 创建一个云函数来执行您的计算，然后使用节点或响应 axious 向您的函数所在的云资源发送 http 请求并让它返回要显示的价格？
由于该页面已经由当前的提供商托管，我想找到一个不需要云服务的解决方案。不过，如果没有其他可能性，我可能会考虑一下。
如果您愿意，您可以随时在服务器上使用节点或 Python 构建 API，但 AWS lambda 对于 100 万个请求是免费的。您可以设置一个非常快速的端点和一个节点函数来进行计算并开始发出请求。否则，您可能需要创建 node js/express js REST API 并使用您当前的提供者托管它。
另一个实用的解决方案是在 javascript 中进行计算，但从外部源加载。您可以缩小 javascript 以混淆计算代码。
哦，如果它是免费的，那就太好了。我会调查的。但是，如果我想自己创建一个简单的 API，你会推荐什么？以及我如何能够随请求发送信息并接收输出数据？

标签： javascript wordpress next.js server-side-rendering static-site

【解决方案1】：

在 JavaScript 中进行计算，从服务器上的外部源加载并缩小 js 代码以对其进行混淆。在我看来，这可能是最简单的解决方案。
您可以利用 AWS Lambda 函数免费获得前 100 万个请求。
使用 Node.JS 和 Express JS 创建一个简单的 REST API。

Node.js Express.js API 示例

const express = require('express')
const app = express()
const port = 3000

app.get('/calculate-price', (req, res) => {
  response_price = req.query.parameter1 + req.query.parameter2
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ price: response_price }));
})

Next JS 获取函数

export async function getStaticProps(context) {
   const res = await fetch(`https:[your API or cloud function resource]?parameter1=abc&parameter2=1245`)
   const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
     props: { data }, // the price will be passed to the page component as props
   }
}

【讨论】：