SSR

To get started you'll first need to upgrade to the following package versions:

• @useractify/search version 5.50.1 (minimum)

Afterwards you'll use the generateProviderProps method on the server, you provide all of the props you normally would to the ReactifySearchProvider component, these props will be parsed and then returned with an additional prop called preload, this is what enables SSR to work correctly.

In addition to the usual props there is a new one called query which should contain the url query params as an object which will look something like this e.g.

const url = `/collections/all?category=%5B"Shorts"%5D&colour=%5B"atlantic"%5D`;
const query = {
  category: "[\"Shorts\"]",
  colour: "[\"atlantic\"]",
};

The tech stack you're using will determine exactly how this should be implemented but generally speaking you'll want to serialise the return value of generateProviderProps and pass it to the client, see some examples below.

NextJs

Sandbox https://codesandbox.io/p/devbox/reactify-search-ssr-nextjs-sandbox-p28m4g

import React from "react";
import { ReactifySearchProvider, generateProviderProps } from "@usereactify/search";

// "props" is the return value from Main.getInitialProps
const Main = (props) => {
  return (
    <ReactifySearchProvider
      {...props}
    >
      ...
    </ReactifySearchProvider>
  );
};

// Runs on the server, returns the props provided and generates the special "preload" prop
Main.getInitialProps = async (context) => {
  const serverProps = await generateProviderProps({
    mode: "collection",
    collectionHandle: "shirts",
    shopifyPermanentDomain: "usereactify-demo-big.myshopify.com",
    query: context.query,
  });
  
  return serverProps;
};

export default Main;