Introduction

next-rsc-search is an simple and straightforward implementation of Meilisearch's search functionality fully as React Server Component (the outcome of the search are being rendered on the server). This enables significantly better responsiveness of the whole search functionality.

🚀 Getting Started

1. Begin by giving the repository a star! ⭐
2. Type the following command to dive into the CLI world:

npm i next-rsc-search
# or
yarn add next-rsc-search
# or
pnpm i next-rsc-search

How it works & usage

The most basic usage of the library is as follows:

<NextInstantSearch
  searchParams={parsedSearchParams}
  options={{ revalidate: 60 }}
  indexName="test_index"
  render={(results) => (
    <>
      <h1 className="tracking-tight text-3xl">Results</h1>
      <pre>{JSON.stringify(results, null, 2)}</pre>
    </>
  )}
/>

Passing search query from the client to server

Whole NextInstantSearch component is built on top of the query params thus the searchParams prop expects object that consists of full search params list on specific page/component. The URL query params can be fetched either using brilliant nuqs library (which we strongly recommend) or just the useSearchParams() Next.js's built-in hook

Rendering the results

The render prop is a function that returns the Meilisearch's searchClient.initIndex(name).search() response. This is the place where you can render the results however you want, e.g. using TailwindCSS

All props list

| Property | Description | Default value | Is required? | | ------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------- | ---------------- | | searchParams | Object containing all the query params | N/A | ✔️ true | | indexName | Name of the Meilisearch's index you want to search through | N/A | ✔️ true | | render | Render function with search results | N/A | ✔️ true | | options.revalidate | Milliseconds for the cache item to revalidate. Read more about next-rsc-search caching | N/A | ❌ false | | options.searchQueryParamName | Name of the param that has the search query | q | ❌ false |

📦 Caching

Under the hood, the library takes advantage of the unstable_cache Next.js's API. This means that the search results are being cached basing on the search query represented as FNV1-a hash on the server. The cache is being invalidated every options.revalidate milliseconds.

⚠️ Limitations

At the moment there are a few remarks regarding the library that we're aware of and we're planning to implement them in the future:

• Only single index search is being supported. Currently, there is no way to either customize the search options or search through multiple indices.

🤝 Contribution

Contributions are always welcome! To contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch with a descriptive name.
3. Make your changes, and commit them using the Conventional Commits format.
4. Push your changes to the forked repository.
5. Create a pull request, and we'll review your changes.

📡 Community

If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: https://blazity.com/discord. It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.

📜 License

This project is licensed under the MIT License. For more information, see the LICENSE file.