DOCSEARCHbyAlgolia
Submit Docs

React InstantSearch

repository·master·Indexed 24 days ago

https://github.com/algolia/react-instantsearch

A library for building search interfaces using React, version 6.24.0. It includes packages such as react-instantsearch-dom for React-specific implementations, react-instantsearch-hooks for renderless components and hooks compatible with web and React Native, and react-instantsearch-hooks-web for DOM-rendering components. The library also provides support for Server-Side Rendering (SSR) via react-instantsearch-hooks-server and integration with Next.js, as well as geo search capabilities through react-instantsearch-dom-maps.

Tokens
20.3K
Snippets
28
Records
114
Agent score
81%

What's inside react-instantsearch

  5. Use react-instantsearch-hooks-server for Server-Side Rendering (SSR)

    master

    React InstantSearch Hooks Server provides an API compatible with any SSR solution (such as Express or Next.js) to generate HTML from InstantSearch components on the server.

    Key API components include:

    • getServerState(): Used to retrieve the search state from the server.
    • <InstantSearchSSRProvider>: A provider component used to hydrate the client with the state generated on the server.

  6. Run the multi-index search example

    master

    This example demonstrates how to target multiple Algolia indices within a single react-instantsearch application. To run this example locally, clone the specific directory and use yarn to install dependencies and start the development server.

    # Clone the example directory
curl https://codeload.github.com/algolia/react-instantsearch/tar.gz/master | tar -xz --strip=2 react-instantsearch-master/examples/multi-index

# Install dependencies and start
yarn install --no-lockfile
yarn start

  7. Clone and run the Next.js Hooks example

    master

    To run this specific SSR example locally, follow these steps:

    1. Clone the example directory: Use curl to download and extract only the hooks-next example folder from the repository.
    2. Install dependencies: Run yarn install --no-lockfile to set up the project.
    3. Start the development server: Run yarn run dev to launch the Next.js application.
    # Clone the example
curl https://codeload.github.com/algolia/react-instantsearch/tar.gz/master | tar -xz --strip=2 react-instantsearch-master/examples/hooks-next

# Start the example
yarn install --no-lockfile
yarn run dev

  8. Run the geo-search example

    master

    To explore how to perform geo searches using react-instantsearch, you can clone the specific geo-search example directory and run it locally.

    1. Clone the example

    Use curl to download and extract only the geo-search example folder:

    curl https://codeload.github.com/algolia/react-instantsearch/tar.gz/master | tar -xz --strip=2 react-instantsearch-master/examples/geo-search

    2. Start the example

    Navigate to the directory and use yarn to install dependencies and launch the development server:

    yarn install --no-lockfile
yarn start
    curl https://codeload.github.com/algolia/react-instantsearch/tar.gz/master | tar -xz --strip=2 react-instantsearch-master/examples/geo-search

yarn install --no-lockfile
yarn start

  9. Install react-instantsearch-hooks-web

    master

    Install react-instantsearch-hooks-web along with algoliasearch to communicate with Algolia APIs. Use algoliasearch/lite for a lightweight client.

    Note: If you are working with React Native or an environment that does not use the DOM, use react-instantsearch-hooks instead.

    yarn add algoliasearch react-instantsearch-hooks-web
# or
npm install algoliasearch react-instantsearch-hooks-web

  10. Run the React InstantSearch Hooks SSR example

    master

    This example demonstrates how to implement server-side rendering (SSR) using the React InstantSearch Hooks API. To run this example locally, clone the specific directory and use yarn to install dependencies and start the development server.

    # Clone the example directory
curl https://codeload.github.com/algolia/react-instantsearch/tar.gz/master | tar -xz --strip=2 react-instantsearch-master/examples/hooks-ssr

# Install dependencies and start
yarn install --no-lockfile
yarn start

  12. Implement Server-Side Rendering (SSR) in React InstantSearch 6.x.x

    master

    In version 6.x.x, the SSR API was updated to use the server module only on the server. A key improvement is searchClient hydration: the results retrieved on the server are reused on the client, avoiding redundant initial requests.

    To implement SSR:

    1. On the Server: Use findResultsState from react-instantsearch-dom/server. You must now pass an options object containing indexName and searchClient to findResultsState.
    2. On the Client: Pass the indexName and searchClient as props to your application during hydration.
    3. In your App component: The InstantSearch component should receive indexName, searchClient, and resultsState as props.
    // server.js
import { findResultsState } from "react-instantsearch-dom/server";

const indexName = "instant_search";
const searchClient = algoliasearch("latency", "API_KEY");

server.get("/", async (req, res) => {
  const initialState = {
    resultsState: await findResultsState(App, {
      indexName,
      searchClient
    })
  };
  const plainHTML = renderToString(<App {...initialState} />);
  // ...
});

// browser.js
hydrate(
  <App
    {...window.__APP_INITIAL_STATE__}
    indexName={indexName}
    searchClient={searchClient}
  />,
  document.getElementById("root")
);

// App.js
import { InstantSearch, SearchBox } from "react-instantsearch-dom";

const App = ({ indexName, searchClient, resultsState }) => (
  <InstantSearch
    indexName={indexName}
    searchClient={searchClient}
    resultsState={resultsState}
  >
    <SearchBox />
  </InstantSearch>
);