问题标签 [jamstack]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
24 浏览

amazon-web-services - 什么(理想情况下是无服务器)架构/框架适用于这个简单的静态生成的 Web 应用程序?

我正在制作一个非常简单的网络应用程序,管理员用户可以在其中进入后端并为具有一些额外字段(标题、描述等)的特定媒体创建登录页面。

每个页面都有一个看起来像 的 URL,example.com/page-name-slug键入不存在的 slug 将正常失败(www.example.com例如,重定向到 )。

我希望尽可能简单且便宜地在 AWS 上托管它,但我也希望它具有高性能(即毫无问题地处理大流量峰值)。我还想尽可能多地使用开箱即用的框架,并尽可能少地进行自定义开发。

我的理想设置:

  1. 一些类似 CMS 的产品,它们作为 AWS Lambda funcs(所以可能是 SPA)运行,或者不太理想的是,在非常小的 Elastic Beanstalk 环境中运行。
  2. 使用任一
    • AWS 数据库即服务产品之一(发电机数据库或无服务器 Aurora)。我试图尽可能避免为只会偶尔更改的数据库实例支付持续的小时成本。
    • 文件支持的存储(即 JSON 文档)
    • 吉特
  3. 无论后端存储机制如何,我都想为每个登录页面写出(到 S3 存储桶)一个 JSON 文件,文件名为page-name-slug.json. (这和“后端存储”可能真的是同一件事......我们不是在谈论大量的对象)。
  4. 我有一个简单的前端应用程序(在本例中为 Vue),它查看 URL 中的 slug 并异步获取正确的 json 文件以填充其数据。

一个明显的复杂性是我需要每个匹配的 urlexample.com/[slug]来加载相同的 html/js 应用程序。这很容易通过 cloudfront 函数/lambda@edge 完成,但值得一提。

大多数情况下,我想避免(在最大程度上):支付持续的服务器成本(无服务器等),并且不得不担心我的“API”上的流量负载(因此写出静态 JSON 文件,而不是从数据库中获取, ETC)。


我见过的“Headless CMS”/“JAMstack”产品都不能做到这一点。似乎大多数都针对博客之类的东西进行了优化,和/或没有办法静态呈现 JSON 文档而不是完整页面。当然,我可以让它在每页呈现应用程序的完整副本,并带有一个烧录的 JSON 对象,但这对我来说并不那么干净。

我认识到这很容易从头开始构建,老实说,我已经拼凑出一个有点不同的解决方案,但在这一点上,我只是好奇是否有一个项目或框架(或几个组合)符合要求。

我很想更多地了解人们在太空中成功使用的项目,因此非常欢迎创意。

谢谢!

0 投票
1 回答
177 浏览

reactjs - 何时使用 NextJS API 路由?

我不明白/api/路由有什么额外的功能getStaticPropsgetServerSideProps.

我见过几个例子,人们喜欢HTTP GET使用 getStaticProps 和 getServerSideProps 发出请求,并使用/api/route 发出PUT PATCH DELETE请求。

是否有关于针对不同用例使用什么的最佳实践的官方文档?

0 投票
1 回答
183 浏览

graphql - 如何在 FaunaDB 中使用 REST API?

我在我的 Fauna 数据库中创建了一个集合。我还创建了一个索引来返回该集合中的所有数据。我想知道是否有办法让 JSON REST API 处理这些数据。我的意思是我想要一个可以使用 XMLHttpRequest 'GET' 然后解析为 JSON 的 URL。

0 投票
0 回答
51 浏览

reactjs - Strapi 在许多字段上上传文件但相同的 api

你好 JAMSTACK 人。

实际上,那些选择 strapi JS 作为他们选择的无头 CMS 的人。

假设我有一个名为 Post 的 API,其中包含以下字段。

  • 标题:文字
  • 蛞蝓:文字
  • 封面图片
  • 参考:图片
  • 正文:长文本
  • 作者:图片

我想填充数据并将其发送到“POST”和“PUT”方法的 API 端点。

有任何想法吗 ?提前致谢。

PS:我知道出于某种原因,这不是我们在strapi中定义集合字段的确切方式,我这样做是为了演示。


0 投票
1 回答
59 浏览

javascript - Gatsby 文件系统路由 API:每个数组项的唯一页面

在 Gatsby 中,我的节点的值包含数组(来自 Airtable):

当我使用 Gatsby 的文件系统路由 API创建动态页面(例如{airtable.data__Projects}.js)时,会为每个节点中使用的每个数组创建页面,例如/projects/mainsite-backend/.

如何让每个节点的每个数组中的每个项目都有自己的页面,例如/projects/mainsite/projects/backend

0 投票
1 回答
42 浏览

nunjucks - 嵌套宏和通过它们传递集合的错误?将 Eleventy 与 Nunjucks 一起使用

这里有一个更高级的问题......是否可以通过几个宏传递一个集合?例如,我有一个博客文章部分:

然后在帖子宏中,我有一个滑块宏:

然后在滑块宏中,我有一个卡片宏:

目前它不起作用,但我想知道我该如何处理这种情况以及 Eleventy 和 Nunjucks 是否甚至提供这种类型的功能,解决方案是什么,或者我是否最好使用另一个具有此功能的 SSG什么样的基础设施?

目前,它在尝试编译时抛出此错误:

非常感谢任何和所有的见解。谢谢 :)

0 投票
0 回答
170 浏览

reactjs - Next.js:如何为静态站点创建子目录?

我正在使用 React/NextJS 创建一个最终将用作静态站点的应用程序。我已经预定义了需要在子目录中创建的 url。例如,/technology/应该去/technology/index.html

如何在 Nextjspages结构中创建它?

我尝试了以下各种组合,但没有运气:

  • 添加trailingSlash到我的 nextjs 配置中:
  • 添加technology.js到我的页面目录(也尝试过/technology/index.js

  • 添加exportPathMap到我的 next.config.js:

0 投票
0 回答
28 浏览

web - Jamstack 与网页的 CDN 缓存有何不同

在过去的几个月里,我越来越多地听到有关 Jamstack 的信息,这似乎是一个新手问题,但我真的很好奇 Jamstack 在哪些方面与网页的 CDN 缓存不同,以及它的优势是什么。

以下是我已经知道的: https ://www.netlify.com/jamstack/ 和 https://www.cloudflare.com/en-in/learning/cdn/what-is-caching/

我已经阅读了上述文档以了解工作的要点,我能想到的只是 Jamstack 以某种方式在 CDN 缓存上工作。

0 投票
1 回答
222 浏览

javascript - 布局中的前沿数据不起作用十一

我在布局中使用前端问题时遇到了麻烦。它只是在页面上显示最前面的内容,而无需创建我的布局所需的数据。

代码如下:

/src/_includes/layouts/base.html


/src/_includes/layouts/home.html


/src/index.md

作为视觉结果,我得到了顶部的实际字符串: 在此处输入图像描述

在我看来,十一,出于某种原因,正在跳过前面的问题。

这是我的十一配置文件:

有人可以向我解释为什么会发生这种情况,我该如何解决?谢谢

0 投票
2 回答
75 浏览

gatsby - 每次添加新的降价博客文章时,我是否必须构建我的静态 Gatsby 博客?还是会动态显示来自降价文件/目录的帖子?

我是 JAMStack 和静态站点生成器的新手,最近尝试使用 Gatsby 和 github 页面建立一个新博客。在所有伟大的 Gatsby 教程的海洋中,我无法找到的一个信息(可能是因为它是一个愚蠢的)是,无论我每次都必须重建我的网站还是只是添加一个新的博客文章/帖子到我的 Gatsby 网站包含新降价文件到我的仓库的提交将完成这项工作。