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 theSearchProvider
. - 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.
Name | Type | Default | Description |
---|---|---|---|
searchConfig | {pipeline: Pipeline , variables: Variables , fields: FieldDictionary , filters: ( FilterBuilder | RangeFilterBuilder )[], config: Config } |