构建具有Reaction、FaunaDB和Serverless功能的现代点击量计数器

我在这个博客上用了很多数字墨水谈论编译时工作流的魔力，使用像Gatsby这样的工具来构建丰富、动态的Web应用程序，而不需要运行时节点服务器。

这对于不经常更改的静态内容非常有效(例如，博客帖子)，但是我们如何才能构建依赖于快速变化的用户生成数据的东西，比如点击量计数器呢？

在本教程中，我们将介绍如何使用来驱动点击计数器，就像我博客上的那样：

所以，事情是这样的：已经过去了足够长的时间，90年代现在很酷，很复古。这是一种“潮流”--今年有很多很酷的怀旧产品：

我们回来了！这里有边栏我们带来的边栏我们和怪异的宽我们带来怪异的宽的我们，等等。

网络红人Jordan Scales Jordan Scales打造了98.css 98.css，这个设计系统忠实地重现了我一直以来第三喜欢的操作系统：

点击率计数器是典型的“早期网络”。您的地理城市站点没有一个是不完整的！

即使你不想构建点击计数器，我也鼓励你继续阅读；点击计数器是一个有趣的例子，但我们将在这篇文章中学习的工具为你的静态网站打开了各种大门。

这里有几个活动部件需要组合在一起。让我们从高层次上了解一下这片地形。

在本教程中，我将使用Gatsby，但是任何基于Reaction的前端都可以工作(比如Next.js或create-action-app)。

对于用户界面，我们将使用React Retro Hit Counter Reaction Retro Hit Counter，这是我几年前创建的一个软件包。它为我们提供了一个可以用来显示命中计数的反应组件。它也是非常可定制的，如果你想要一种更简约/现代的美学。

该包公开了一个表示/可视组件，但它不为我们处理任何数据获取和状态管理。这个拼图还有更多的碎片。

我们正在构建静态站点，因此无法访问运行时Node/Express服务器。

像Netlify和Vercel这样的平台提供的功能是一种服务。不是将持久性应用程序部署到特定服务器，而是部署根据请求启动的单个功能。

这两个平台都在引擎盖下使用了AWS Lambda，并磨平了一些更锋利的边缘。例如，在直接使用AWS Lambda时，您需要进行大量处理和捆绑，以确保每个功能都是其自己的自含式微型应用程序；Netlify和Vercel都会为您处理这一点，并将其直接集成到构建和部署流程中。

我已经通过将Netliy函数与Gatsby一起使用来写过关于在Gatsby中使用Netliy函数的文章；有关更多上下文，请查看该帖子！

数据库的选择感觉有点随意；我们的需求非常小，我们真的只需要一个地方来存储和检索一组数字！但FaunaDB给我留下了相当深刻的印象。它有一个令人敬畏的管理面板，而且它是专门为使用无服务器功能而构建的。我想它的伸缩性非常好。

FaunaDB是一种“数据库即服务”；他们托管它，您为使用的内容付费。他们的定价他们的定价是慷慨的-我的博客仍然在他们的免费级别内，而且定价曲线也不是太咄咄逼人。

数据库类似于SQL数据库。我为我的整个站点创建了一个，其中包含多种类型的数据。

索引允许我们查询集合，以基于特定字段查找文档。

对于我们的数据模型，我们希望每个博客帖子有一个文档，并且它应该跟踪该帖子的插件，以及点击量。下面是一个示例文档：

这些帖子中的每一个都将存储在一个集合中，并将按slug进行索引。

创建一个以您的站点命名的新数据库和一个名为HITS的新集合。您可以将每隔一个字段保留为其默认值：

让我们也创建一个新的索引。索引在FaunaDB中很关键。您不查询集合，而是查询索引。

在本例中，我们将从我们的Hits集合中获取它，并将其命名为Hits_by_slug。我们可以使用"；Terms"；指定要查询的字段：我们将把它设置为data.slug。

我们将需要我们的FaunaDB密钥来授权访问此数据库的能力。单击左侧导航中的[安全]，然后单击标题中的[新建密钥]。点击[保存]：

我们希望将密钥存储在一个名为FAUNA_SECRET_KEY的环境变量中。环境变量不在本教程的讨论范围内，但如果您不确定如何执行此操作，以下是一些链接：

在我们可以开始编写我们的无服务器函数之前，我们需要找出将它放在哪里！Netlify和Vercel各有自己的标准化位置：

您的函数文件的名称将在路由中使用。创建一个名为register-hit.js的新文件。您可以通过以下URL访问它：

Netlify和Vercel都提供了允许您在本地进行测试的开发工具。我在我的关于Netlify函数的文章关于Netlify函数的文章中讨论了这一点。对于Vercel，请查看其Vercel Dev&34；公告帖子，Vercel dev"；公告帖子。

1函数既是设置值又是获取值，这可能会让您感到困扰；我们正在违反单一责任原则！但我认为这是合理的。另一种选择是有两个独立的端点，这意味着两倍的函数调用，这会花费两倍的成本。

这就是JS中的这个样子。业务逻辑相同，但包装器因平台而异：

当我们的页面加载时，我们将请求此函数端点递增数字，并检索它以显示。

如上所述，我们将为实际的UI使用一个包。安装依赖项：

从本质上说，我们正在创建一个智能的HitCounter组件，它围绕着我们从NPM获得的表现性组件。它将从我们的无服务器函数中获取数据，并将其传递给该组件。

我们跟踪处于反应状态的点击数。我们将其初始化为未定义。我们的组件第一次呈现时，我们还没有数据，所以我们提前返回NULL。我们只想在知道页面有多少点击时才显示点击计数器。

我们使用useEffect在挂载后立即请求数据。它将调用我们先前编写的函数，并返回当前的命中数，我们将其设置为状态。这会导致重新渲染，由于命中不再是未定义的，因此我们渲染RetroHitCounter。

我们的组件只有一个道具：slug。这是特定文章或页面的唯一标识符。它将成为我们的FETCH请求中的查询参数。如果我们想要跟踪个别内容，这是至关重要的。我们在useEffect依赖项数组中使用slug，但这更多的是一种形式；我们不希望slug实际更改。

您需要在项目中找到一个位置来渲染它。在a Gatsby/Next上下文中，您可以将其放入您关心的每个页面组件中。您也可以将其放入布局组件中。

您需要找到一种方法将插件传递给您的组件。这超出了本教程的范围，因为它完全取决于您的项目的结构。在Gatsby应用程序中，您应该可以使用GraphQL获取此内容。

我们选择的方法将数据提取与演示相结合。这是一把双刃剑：使用方便，但有潜在的危险。如果您意外地呈现了多个实例，您的数量将会激增，因为每一次页面查看都会将计数增加2。

这是一个非常容易犯的错误：也许你有一个桌面页脚和一个移动页脚，而你使用媒体查询来确保只有一个是可见的。即使没有向用户显示，这些组件仍在呈现，因此每次访问时都会发出两个获取请求！

将两者分开可能是明智之举。当页面挂载时，您可以请求设置和获取点击数，然后将该数据存储在上下文中。您的HitCounter组件将使用该上下文，而不会发出任何网络请求。

本教程介绍了如何创建点击量计数器，这是一种令人愉快的才华，一定会给千禧一代带来微笑。

不过，核心理念要宽泛得多。使用FaunaDB和无服务器函数，我们可以构建各种东西！在这个博客上，我对“点赞”按钮使用了类似的技术，并且我构建了一个管理面板，让我可以查看我所有文章的点赞/点击量。

使用无服务器功能安装和运行起来从未像现在这样容易，而且通过使用这些功能，您可以免费获得如此多：您不必担心服务器、维护、伸缩性等方面的问题。

对于前端DEV，无服务器功能和FaunaDB可以成为进入全栈开发的入门药物。这么多新的大门打开了！