Initialisedataforapp - React Search SDK

Initial Data Fetching for App Router

Before initializing the search functionality in a server-side rendered application, you need to perform an initial data fetch. This is crucial for:

Ensuring proper SEO
Preventing hydration mismatches
Providing immediate content on first page load

Key Points:

The page component must be async to handle the initial data fetch
Pass all configurations (siteKey, apiKey, defaultValues, webUrlConfig, apiUrlConfig and currentPath) to the initialise function .
Use UnbxdSearchSSRWrapper instead of the standard CSR wrapper
The initial data will be used for both server rendering and client hydration

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { initialise } from "@unbxd-ui/react-search-hooks/ssr-utilities";
 
export default async function SearchPage() {
    // Initial data fetch must happen on server-side
    const initialData = await initialise({
        siteKey: "your-site-key",
        apiKey: "your-api-key",
        currentPath,
        defaultValues={{
            pageSize: 12,
            query: "*",
            currentPage: 1,
            view: "GRID",
            sort: "",
        }}
        webUrlConfig={{
            rangeFacets: ["price"],
            categoryFacets: ["categoryPath"],
            externalParams: []
        }}
        apiUrlConfig={{
            category: {...},
            extraParams: () => {
                //This is just a sample code , put your custom code here.
                if (inField) {
                    return `category:"${inField}"`;
                } else return null
            }
        }}
    });
 
    return (
        <Wrapper initialData={initialData} / > 
    );
}

Initialise Initialise Data For Page Router