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.
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
If you're using
@sajari/search-components with no search logic required...
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
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.
searchfunction will return a response in JSON format, which you pass to the
SearchProviderthen 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.
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.