> For the complete documentation index, see [llms.txt](https://search.docs.reactify.com.au/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://search.docs.reactify.com.au/guides/ssr.md).

# 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.

```typescript
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>

```javascript
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;

```