按需生成静态网站

时间:2021-07-28 11:53:50

标签: javascript html vue.js server-side-rendering static-site

<块引用>

嘿[服务],这是一些 JSON。您能否将数据放入 Vue 模板并将生成的 HTML 站点发回给我?

我有一项服务,用户可以在其中创建表单。保存表单后,我想从中生成一个静态 HTML 页面。这个想法是将生成的 HTML 文档显示给实际回答表单问题的不同用户组。

创建表单后,我将带有表单规范的 POST 请求发送到 Static Site G 生成器 S 服务(SSGS)我正在尝试建立。 JSON 负载如下所示:

{
  "formId": 1,
  "questions": [
    {
      "questionNo": 0,
      "type": "rating",
      "title": "How much do you like the taste of toothpaste?"
    },
    
    /* ... more questions may exist ... */
  ]
}

这个想法是让 SSGS 从这个表单创建一个独立的静态网站,并且只用这个表单。我打算将生成的单个站点存储在 S3 存储桶中。每个表单最终都会以个体的形式出现,与其他现有表单无关。

为什么采用这种方法,而不是每个表单都有一个路由的单一服务?我将在功能有限的设备上显示这些表单。目的是让设备一次下载整个网站及其资产,然后将其显示给用户。

我目前拥有的

我使用 Vue 来显示表单的问题和输入。我有一个正在运行的 Nuxt.js 应用程序,它可以接受 POST 请求并将其有效负载传递给一个 Vue 组件,该组件可以很好地呈现每个问题。生成的 HTML 文档作为对发起它的 HTTP POST 请求的响应发送回。简而言之:

  1. 用户创建表单
  2. 表单服务发送一个 POST 请求,其中包含一个描述所创建表单的 JSON 正文
  3. SSGS 根据表单描述呈现 HTML 文档
  4. 表单服务接收上述 HTML 文档
  5. (未实现) 表单服务在 S3 中存储 HTML 文档

我在这里遇到的问题是 Nuxt 创建的 HTML 文档有大量对外部文件的引用。当表单服务收到此 HTML 文档作为响应时,这些链接文件均不可访问。

<link rel="preload" href="/_nuxt/runtime.js" as="script">
<link rel="preload" href="/_nuxt/commons/app.js" as="script">
<link rel="preload" href="/_nuxt/vendors/app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">
<link rel="preload" href="/_nuxt/pages/index.js" as="script">

我一直在寻找方法告诉 Nuxt 将每个文件的内容写入生成的 HTML 文档的 <body> 中,但到目前为止我在这方面没有运气。

但这并不是真正的静态网站生成,是吗?

老实说,我仍然对这个概念耿耿于怀。我正在服务器上渲染一个页面,但我将其作为对请求的响应,就像任何传统服务器在响应浏览器的 GET 请求时所做的那样。这只是服务器端渲染,对吧?由于链接文件的问题,我担心这可能还不够。

我知道 Nuxt 可以选择生成真正的静态站点。它的完成方式是(显然):

  1. 在终端中运行 npm run generate
  2. 创建一个 dist 文件夹,其中包含所有必需的 HTML 文件和资产
  3. 这个文件夹需要手动部署到某个地方

这种方法可能会准确地为我提供我想要在 S3 中存储的内容。然而,它似乎是针对手动一遍又一遍地生成相同网站的,这给我留下了很多问题:

  • 如何在每次 SSGS 收到 POST 请求时触发新站点的生成?
  • 如何将自定义 JSON 负载传递给呈现网站的 Vue 模板?
  • 我应该如何管理每一代的产出?每个表单都是独一无二的 - 在处理之前我无法覆盖前一个表单。
  • 我可以将文件直接发送到 S3,而不是将文件保存在 dist 目录中吗?

围绕静态生成器创建某种包装器服务是否是我唯一的选择,该服务能够运行 shell 命令来触发 npm run generate、随机播放 dist 的内容并将数据移动到 S3?

>

是否有更好的工具可以根据需要从动态内容创建静态网站?

0 个答案:

没有答案