React SDK

Server Side Rendering

Server side rendering, or SSR, is the process of rendering components to HTML on the server, rather than rendering them only on the client. Static rendering is a similar approach, but pre-renders pages to HTML at build time rather than on each request. These techniques can help improve perceived loading performance and SEO. The Search.io React SDK supports both of these approaches, either through a custom implementation or via frameworks like Next.js and Gatsby.

SSRProvider

In React, SSR works by rendering the component to HTML on the server, and then hydrating the DOM tree with events and state on the client. This enables applications to both render complete HTML in advance for performance and SEO, but also support rich interactions on the client.

In order to make the hooks and components work with SSR, you will need to wrap your application in an SSRProvider component. This signals to all nested components that they are being rendered in an SSR context.

If you're using @sajari/react-search-ui...

If you're using @sajari/search-components with no search logic required...

Fetching data

In order to render the components or use hooks while server side rendering, you need a way to fetch data. For this, you can use the server function from the @sajari/server package. It expects the same props as SearchProvider.

Here's how this Next.js example works:

  • Two pipelines are created; one using domain auth for client-side, and one passing a key/secret for server-side. The server-side pipeline will be stripped in client-side builds so your key/secret are not exposed.
  • The search function will return a response in JSON format, which you pass to the SearchProvider.
  • The SearchProvider then de-serializes that response and uses it for the initial state.
  • Any changes to state from that point onwards are client-side rendered.

You can find a full example using Next.js in /examples/next but here's the important part.

search   anatomy

Returns a Promise that wraps a JSON string or null, this string should then be passed down SearchProvider via the initialResonse prop. If no initial response was found it will return null instead.

NameTypeDefaultDescription
searchConfig{pipeline: Pipeline, variables: Variables, fields: FieldDictionary, filters: (FilterBuilder | RangeFilterBuilder)[], config: Config}