如何在没有后端的情况下为网站添加搜索功能
你已经构建了一个静态网站或 JAMstack 应用。它速度快、托管成本低且易于维护。但现在用户需要搜索功能,你开始疑惑:我真的需要仅仅为了这个功能就启动服务器或数据库吗?
简短的答案是不需要。现代方法允许你在没有后端基础设施的情况下实现客户端搜索,同时保持网站完全静态。本指南涵盖三种实用选项:使用 Pagefind 的静态站点搜索、浏览器内 JavaScript 库以及托管搜索 API 解决方案。
核心要点
- 静态站点搜索不需要运行时服务器——索引作为静态文件与 HTML 一起部署
- Pagefind 是大多数静态站点的现代默认选择,使用分块索引和 Web Workers 实现高效性能
- 像 Lunr.js 和 Fuse.js 这样的浏览器内库适合小型站点,但在大型索引规模下会遇到困难
- 托管搜索 API 提供高级功能,但需要考虑定价、隐私和供应商依赖等成本
”无后端”的真正含义
当我们谈论静态站点搜索或无后端的客户端搜索时,我们指的是没有需要你维护的运行时服务器。你的网站仍然是从 CDN 或简单托管服务提供的静态文件集合。
然而,大多数方法仍然需要构建步骤。在部署期间,你从内容生成搜索索引。该索引作为静态文件与 HTML 一起部署——运行时没有服务器处理查询。
搜索要么完全在用户的浏览器中进行,要么通过 API 调用托管的第三方服务。
Pagefind:静态站点的现代默认选择
Pagefind 已成为静态站点的首选搜索解决方案。它在网站构建后运行,爬取你的 HTML,并生成分块搜索索引。
Pagefind 的工作原理
与创建单个大型索引文件的旧工具不同,Pagefind 将索引拆分为片段。当用户搜索时,他们的浏览器通过 Web Workers 仅下载相关的块。这使得初始页面加载保持快速,同时支持包含数千页面的站点。
Pagefind 包含即插即用的 UI 组件,能很好地处理多语言内容,并且适用于任何静态站点生成器——Hugo、Eleventy、Astro 或纯 HTML。
何时选择 Pagefind
Pagefind 适合大多数静态站点。它可以处理文档站点、博客和营销页面,无需复杂配置。权衡之处在于构建步骤:你的 CI 流水线必须在生成 HTML 后运行 Pagefind。
对于拥有数千页面的站点,Pagefind 通常能以可管理的索引大小良好运行。
客户端库:Lunr、Fuse 及其局限性
在 Pagefind 出现之前,开发者经常使用 Lunr.js 或 Fuse.js 等库。这些库仍然可用,但存在实际限制。
索引大小问题
这些库需要将整个搜索索引加载到浏览器内存中。对于小型博客来说,这没问题——可能只有 50KB。但对于较大的站点,索引可能膨胀到几兆字节,在移动设备和慢速连接上影响性能。
浏览器内库的适用场景
在以下情况下考虑使用 Lunr 或 Fuse:
- 你的站点少于几百个页面
- 你需要模糊匹配或自定义评分逻辑
- 你希望零外部依赖
对于更大规模的站点,Pagefind 的分块方法或托管搜索 API 将更好地服务用户。
Discover how at OpenReplay.com.
托管搜索 API:Algolia 及其替代方案
有时你需要静态索引无法提供的功能——错别字容错、个性化、分析或频繁更新内容的实时索引。
托管搜索的工作原理
像 Algolia(包括用于文档站点的 DocSearch)和 Orama Cloud 这样的服务维护搜索基础设施。你上传内容索引,然后从前端 JavaScript 查询他们的 API。
你没有运行后端——他们在运行。你的站点保持静态,同时获得强大的搜索能力。
需要考虑的权衡
定价:大多数服务提供有使用限制的免费套餐。随着站点增长或流量增加,预计需要付费。
隐私:第三方脚本可能涉及 GDPR 合规问题。搜索查询通过外部服务器路由,这在某些使用场景中很重要。
供应商依赖:你依赖于他们的正常运行时间和持续服务。
对于大型站点、动态内容或高级功能,托管 API 通常能证明这些权衡是值得的。
选择正确的方法
| 方法 | 最适合 | 主要权衡 |
|---|---|---|
| Pagefind | 大多数静态站点 | 需要构建步骤 |
| Lunr/Fuse | 小型站点、自定义逻辑 | 索引大小限制 |
| 托管 API | 大型/动态站点 | 成本、隐私、依赖性 |
对于典型的静态站点搜索需求,从 Pagefind 开始。当你超出静态索引的能力范围或需要高级功能时,转向托管解决方案。
结论
在没有后端的情况下为网站添加搜索功能是完全可行的。Pagefind 优雅地处理大多数静态站点,浏览器内库适用于较小的项目,而托管搜索 API 解决方案在需要时可以扩展。
关键是根据站点的规模、更新频率和功能需求来匹配你的选择。对于大多数 JAMstack 站点,Pagefind 在简单性和功能性之间提供了最佳平衡,同时不会影响你的静态托管设置。
常见问题
是的,Pagefind 适用于任何静态站点生成器,包括 Hugo、Eleventy、Astro、Jekyll 和纯 HTML。它作为构建后步骤运行,爬取你生成的 HTML 文件,因此与这些文件的创建方式无关。你只需在构建完成后将其指向输出目录即可。
对于频繁更新的内容,像 Algolia 或 Orama Cloud 这样的托管搜索 API 是最佳选择。它们支持通过 webhooks 或 API 调用在内容更改时进行实时索引。像 Pagefind 这样的静态解决方案需要完全重建和重新部署才能更新搜索索引。
性能因方法而异。Pagefind 通过按需仅加载相关索引块来最小化影响。像 Lunr 和 Fuse 这样的库将整个索引加载到内存中,对于拥有数百页面或索引超过几百千字节的站点,这可能在移动设备上造成明显延迟。
可以,但有限制。托管搜索 API 允许你单独索引内容并通过 JavaScript 查询,无需修改构建过程。或者,你可以手动创建 JSON 索引文件,尽管这对于较大的站点来说变得不切实际。对于大多数静态站点,构建时索引步骤提供了最佳平衡。
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
