How to Add Search to Your Website Without a Backend
You’ve built a static site or JAMstack application. It’s fast, cheap to host, and simple to maintain. But now users want search functionality, and you’re wondering: do I really need to spin up a server or database just for this?
The short answer is no. Modern approaches let you implement client-side search without backend infrastructure while keeping your site fully static. This guide covers three practical options: static-site search with Pagefind, in-browser JavaScript libraries, and hosted search API solutions.
Key Takeaways
- Static site search requires no runtime server—indexes ship as static files alongside your HTML
- Pagefind is the modern default for most static sites, using chunked indexes and Web Workers for efficient performance
- In-browser libraries like Lunr.js and Fuse.js work well for smaller sites but struggle with large index sizes
- Hosted search APIs offer advanced features at the cost of pricing, privacy considerations, and vendor dependency
What “No Backend” Actually Means
When we talk about static site search or client-side search without a backend, we mean no runtime server that you maintain. Your site remains a collection of static files served from a CDN or simple hosting.
However, most approaches still require a build step. During deployment, you generate a search index from your content. This index ships as static files alongside your HTML—no server processes queries at runtime.
The search happens either entirely in the user’s browser or via API calls to a managed third-party service.
Pagefind: The Modern Default for Static Sites
Pagefind has become the go-to search solution for static sites. It runs after your site builds, crawls your HTML, and generates a chunked search index.
How Pagefind Works
Unlike older tools that create one large index file, Pagefind splits the index into fragments. When users search, their browser downloads only the relevant chunks via Web Workers. This keeps initial page loads fast while supporting sites with thousands of pages.
Pagefind includes drop-in UI components, handles multilingual content well, and works with any static site generator—Hugo, Eleventy, Astro, or plain HTML.
When to Choose Pagefind
Pagefind fits most static sites well. It handles documentation sites, blogs, and marketing pages without configuration headaches. The tradeoff is the build step: your CI pipeline must run Pagefind after generating HTML.
For sites with many thousands of pages, Pagefind typically performs well with manageable index sizes.
Client-Side Libraries: Lunr, Fuse, and Their Limits
Before Pagefind, developers often reached for libraries like Lunr.js or Fuse.js. These still work but come with realistic constraints.
The Index Size Problem
These libraries require loading the entire search index into browser memory. For a small blog, that’s fine—maybe 50KB. For larger sites, indexes can balloon to several megabytes, hurting performance on mobile devices and slow connections.
When In-Browser Libraries Make Sense
Consider Lunr or Fuse when:
- Your site has fewer than a few hundred pages
- You need fuzzy matching or custom scoring logic
- You want zero external dependencies
For anything larger, Pagefind’s chunked approach or a hosted search API will serve users better.
Discover how at OpenReplay.com.
Hosted Search APIs: Algolia and Alternatives
Sometimes you need features beyond what static indexes provide—typo tolerance, personalization, analytics, or real-time indexing for frequently updated content.
How Hosted Search Works
Services like Algolia (including DocSearch for documentation sites) and Orama Cloud maintain the search infrastructure. You upload your content index, then query their API from your frontend JavaScript.
You’re not running a backend—they are. Your site stays static while gaining powerful search capabilities.
Tradeoffs to Consider
Pricing: Most services offer free tiers with usage limits. Expect to pay as your site grows or traffic increases.
Privacy: Third-party scripts may have GDPR implications. Search queries route through external servers, which matters for some use cases.
Vendor dependency: You rely on their uptime and continued service.
For large sites, dynamic content, or advanced features, hosted APIs often justify these tradeoffs.
Choosing the Right Approach
| Approach | Best For | Main Tradeoff |
|---|---|---|
| Pagefind | Most static sites | Requires build step |
| Lunr/Fuse | Small sites, custom logic | Index size limits |
| Hosted APIs | Large/dynamic sites | Cost, privacy, dependency |
Start with Pagefind for typical static site search needs. Move to hosted solutions when you outgrow static indexes or need advanced features.
Conclusion
Adding search to your website without a backend is entirely practical. Pagefind handles most static sites elegantly, in-browser libraries work for smaller projects, and hosted search API solutions scale when needed.
The key is matching your choice to your site’s size, update frequency, and feature requirements. For most JAMstack sites, Pagefind offers the best balance of simplicity and capability without compromising your static hosting setup.
FAQs
Yes, Pagefind works with any static site generator including Hugo, Eleventy, Astro, Jekyll, and plain HTML. It runs as a post-build step that crawls your generated HTML files, so it remains agnostic to how those files were created. You simply point it at your output directory after your build completes.
For frequently updated content, hosted search APIs like Algolia or Orama Cloud are your best option. They support real-time indexing through webhooks or API calls whenever content changes. Static solutions like Pagefind require a full rebuild and redeployment to update the search index.
Performance varies by approach. Pagefind minimizes impact by loading only relevant index chunks on demand. Libraries like Lunr and Fuse load the entire index into memory, which can cause noticeable lag on mobile devices for sites with hundreds of pages or indexes exceeding a few hundred kilobytes.
Yes, but with limitations. Hosted search APIs let you index content separately and query via JavaScript without modifying your build process. Alternatively, you can manually create a JSON index file, though this becomes impractical for larger sites. For most static sites, a build-time indexing step offers the best balance.
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.
