Client-based Search on Strapi Static Sites with Next.js, Fuse.js, and Cloudflare

[win-ne]

What is your article idea?

Strapi provides a host of search APIs. There are also several third-party services that one could integrate Strapi with for more fine-grained search functionality like Algolia. But I was hoping to propose an alternative search method that is client-based, that does not rely on external calls to Strapi or any third-party services, has great performance, and would work well with static sites that host Strapi content.

What are the objectives of your article?

Client-based Multi-field Search and Filtering on Strapi Static Sites with Next.js, Fuse.js, and Cloudflare

1. Introduction

• Importance of search and filtering as features
• Use cases for search
• Benefits of forgoing third-party search services
• Limitations for this kind of search
• Introduce real-life example to illustrate search - a publication
• Introduce fuse

2. Setup up your Strapi backend

• Create a Strapi backend
• Setup several related multi-field Strapi content types
• Adding Strapi webhooks for different events
• Add sample data to search

3. Setting up your Next.js app

• Building and updating a search index for faster search
• Make a service to handle search
• Creating a search results page
• Creating a filtering component

4. Deployment

• Setup deployment on Cloudflare
• Create a deployment hook to rebuild site and index when Strapi content changes
• Setup caching for the index

5. Conclusion

• Summarize what was covered in the article
• Highlight key takeaways from the tutorial
• Mention a point or two about Strapi and its features

Technologies

• Strapi V5 - as the headless CMS
• Next.js - as the frontend and for generating an SSG site
• Fuse.js - to provide search and search indexing functionality
• Cloudflare - for hosting
• Tailwind - for styling

User Story

A publication reader would want to search for content by titles, keywords, authors, tags, and categories so that they can quickly find content that matches their interests. They need a quick and seamless search experience that allows them to filter results based on multiple criteria. This will help them easily discover relevant content without navigating through multiple pages.

Article Objectives

• Provide alternatives to external search services and search calls to Strapi that work well for static sites
• Illustrate a more straightforward versatile means to search Strapi content with an easier learning curve
• Help developers cut costs and improve performance in their applications when it comes to search

What is your expertise as a developer or writer?

Intermediate

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[Theodore-Kelechukwu-Onyejiaku]

Hi @winnie-n ,

Thanks for your article outline. I can't wait to see more of your contributions 🚀

I think your suggestions looks similar to these:

• https://strapi.io/blog/deep-filtering-alpha-26
• https://strapi.io/blog/demystifying-strapi-s-populate-and-filtering

Please let me know if I am missing something. Thank you,

[win-ne]

You're right @Theodore-Kelechukwu-Onyejiaku . Really appreciate your feedback and you catching those. I'll review the blog more carefully before proposing an idea. Thanks again. Closing it now.

[Theodore-Kelechukwu-Onyejiaku]

Thank you @winnie-n .

Please feel free to propose another one in the future. Thank you!

[win-ne]

Hey @Theodore-Kelechukwu-Onyejiaku.

Apologies for the earlier typos.

After reading the articles you shared, I’m considering a different angle for the search and filtering features. I propose a client-based approach, ideal for statically generated sites like news sites, blogs, and static e-commerce stores, where no external API calls to Strapi are needed. The content would still be managed on Strapi, with the search index updated and generated as a static asset whenever content changes and the site is rebuilt.

This approach would really appeal to developers working on Jamstack sites. What do you think?

[Theodore-Kelechukwu-Onyejiaku]

Hi @winnie-n , thank you.

Could you please elaborate on "with the search index updated and generated as a static asset whenever content changes and the site is rebuilt."

Also, previously, were you intending on adding indexes to Strapi? And what will be the purpose of Fuse.js and Cloudflare?

[win-ne]

Thank you for following up @Theodore-Kelechukwu-Onyejiaku .

Developers often opt for static websites because they perform better and load faster. So I wanted to show how to make search somewhat static and faster too. It's slower when you have to make a search request to a server.

• The search index is built at the same time as the website.
• It is hosted as a static asset on the hosting service (Cloudflare), the same as the website pages.
• There is no need to request a search on a service like Algolia or the Strapi API. Search is entirely client-based. Hence, it's faster.
• Only the publication content is hosted on Strapi. The search index is hosted as a static asset on Cloudflare. It's delivered together with the static site.

Regarding Fuse and Cloudflare:

• Fuse performs the search and helps build the search index. It's a search library.
• Cloudflare is the hosting service. It rebuilds both the website and the search index as static assets when the Strapi content changes. It then hosts it on its CDN.

[Theodore-Kelechukwu-Onyejiaku]

This sounds interested. Please proceed.

Please don't forget to use Strapi 5. Thank you.

Meanwhile, you can please update the title of this article idea to reflect the purpose of your work.

[Theodore-Kelechukwu-Onyejiaku]

Depending on the effort put into this article, I might have to label it as "intermediate".

[win-ne]

Got it. Thank you @Theodore-Kelechukwu-Onyejiaku .

[Theodore-Kelechukwu-Onyejiaku]

Hi @winnie-n , please would you be willing to turn in this article by this week or next?

[win-ne]

Hey @Theodore-Kelechukwu-Onyejiaku . Yes. I'll turn it in before the end of day tomorrow. Finished the code project, just writing up the article now.

[win-ne]

Hi @Theodore-Kelechukwu-Onyejiaku . Here it is. I've shared everything with you.

1. HackMD draft
2. Project source
3. Project deployed for previewing purposes and the search feature itself

Depending on the effort put into this article, I might have to label it as "intermediate".

Could I possibly get a label review?

[Theodore-Kelechukwu-Onyejiaku]

Thank you very much @win-ne ,

I will now add this to the review backlog.

[Theodore-Kelechukwu-Onyejiaku]

Hi @win-ne ,

Trust you are doing well. Could you please ping me the following on Discord:

• Full Name
• Photo
• Email Address
• Bio
• Job Title
• Twitter Handle

Thank you for your contribution! 💪

[Theodore-Kelechukwu-Onyejiaku]

Hi @win-ne ,

I added some comments to you draft. Could you please review and incorporate. Thank you.

[Theodore-Kelechukwu-Onyejiaku]

Hi @win-ne ,

Trust you are doing great. Just to remind you of the messages above. Thank you.