UnbxdSearchSSRWrapper

Overview

The UnbxdSearchSSRWrapper is a top-level wrapper component that encapsulates all Server-Side Rendering (SSR) components or hooks used in the application. It acts as the foundational layer for the SDK's functionality, ensuring that any necessary configuration or setup is applied globally. The wrapper accepts a set of props that allow users to customize the behavior of the SDK to suit their specific needs.

Note:

The server-side rendering for this application is powered by Next.js. As of now we support only Next.js for SSR.

Using UnbxdSearchSSRWrapper

1. Initial Data Setup

The UnbxdSearchSSRWrapper requires initial search data that must be fetched server-side. The SDK provides an initialise function for this purpose. Follow steps in below file to fetch initial data .

initialise

2. Setting up the UnbxdSearchSSRWrapper

The UnbxdSearchSSRWrapper is the core component for integrating Unbxd's search capabilities into your Next.js application. It ensures smooth data flow and renders dynamic, SEO-friendly pages.

Key Points:

Have UnbxdSearchSSRWrapper in a different file and Always mark wrapper file with 'use client'.
Pass the initialData derived in above step to this UnbxdSearchSSRWrapper.
Apart from this , you can pass onEvent and setWebUrl here.

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
'use client'
import { UnbxdSearchSSRWrapper } from "@unbxd-ui/react-search-hooks";
 
function Wrapper ({initialData}){
	return <UnbxdSearchSSRWrapper
				initialData={initialData}
				onEvent={onEvent}
				setWebUrl={setWebUrl}
			>
				{/* Add your components here */}
		</UnbxdSearchSSRWrapper>
}

⚠️

Important:

The UnbxdSearchSSRWrapper component is the core of the SDK, managing all logic and data handling; all other components must be nested within this main component for the search functionality to work seamlessly.

3. Middlewares

To manage headers during the first render in SSR, use Middlewares. Middleware can capture headers like Authorization for authenticated requests, User-Agent for device-specific content, or Accept-Language for localization etc. The captured headers can be passed to the server-side rendering process, where the initial render will customize content based on these headers. Check below for full info :

Middlewares

4. Pass `Props` for UnbxdSearchSSRWrapper

onEvent

function

A function which helps in capture events and errors. Users can further run additional pieces of code like error handling or event tracking.
In parameters it receives :
- type: Which is the type of event like BEFORE_API_CALL, AFTER_API_CALL etc.
- message: The message for the corresponding event.
- state : Current state values like current page, current selected pagesize, current query etc.
- value: The value for the corresponding event.
Checkout the full list of events below :

Config	Description
`INITIALISED`	This is the event triggered for the first time, once the Wrapper has initialized.
`BEFORE_API_CALL`	This is the event that is triggered just before the Api call initiates.
`AFTER_API_CALL`	This is the event that gets triggered once the api call is done.
`API_ERROR`	This is the event that gets triggered if the API call fails. The error details can be found in the `state.error` block.
`QUERY_UPDATED`	Event that gets triggered when a query has been updated.
`AUTOSUGGEST_QUERY_UPDATED`	Event that gets triggered when the autosuggest query has been updated.
`IMAGE_SEARCH`	Event that gets triggered when the image search has been updated.
`SORT_CLICKED`	Event that gets triggered on updating the sort.
`BANNER_CLICKED`	Event that gets triggered when there is a click on the banner.
`BREADCRUMB_CLICKED`	Event that gets triggered when there is a click on the breadcrumb.
`FACET_ADDED`	Event that gets triggered once a facet has been selected.
`FACET_REMOVED`	Event that gets triggered once a facet has been de-selected.
`FACET_CLEARED`	Event that gets triggered once all facets has been cleared.
`PAGE_SIZE_CLICKED`	Event that gets triggered when a pagesize has been selected.
`PAGE_CLICKED`	Event that gets triggered when a page number (in pagination) has been selected.
`CATEGORY_UPDATED`	Event that gets triggered when the category has been updated.
`PRODUCT_VIEW_CLICKED`	Event that gets triggered on selecting a view.
`URL_UPDATED`	Event that gets triggered when the URL has been updated.
`ERROR`	Event that gets triggered when an error occurs in some component.

Default Value:

const onEvent = ({ type, message, value, state }) => {
	if (message) console.log(`${type}:`, message, value);
	else console.log(type);
};

Example Usage:

//This is sample code , update it according to your requirement.
const onEvent = ({ type, message, value, state }) => {
	// Toast notifications for user feedback
	switch (type) {
		case 'FACET_ADDED':
			showToast(`Filter "${value.name}: ${value.value}" applied`, 'success');
			break;
			
		case 'FACET_CLEARED':
			showToast('All filters cleared', 'info');
			break;
			
		case 'API_ERROR':
			showToast('Search temporarily unavailable. Please try again.', 'error');
			break;
			
		case 'QUERY_UPDATED':
			if (state.response?.numberOfProducts === 0) {
				showToast(`No results found for "${state.query}". Try different keywords.`, 'warning');
			}
			break;
	}
	
	// Update loading states
	if (type === 'BEFORE_API_CALL') {
		document.body.classList.add('search-loading');
	} else if (type === 'AFTER_API_CALL' || type === 'API_ERROR') {
		document.body.classList.remove('search-loading');
	}
};

setWebUrl

function

Function to customize how URL changes are handled. Receives newUrl, redirect, and replace as parameters.

	//This is sample code , use your own code as per the requirement.
	setWebUrl: (newUrl, redirect , replace) => {
		if (replace) {
			window.history.replaceState(null, "", newUrl)
		}
		else window.history.pushState({}, "", newUrl);
	}

Routing Examples

Next.js App Router:

//This is sample code , update it according to your requirement.
import { useRouter } from 'next/navigation';
 
const router = useRouter();
 
const setWebUrl = (newUrl, redirect, replace) => {
	if (redirect) {
		// Hard navigation with page reload
		window.location.href = newUrl;
	} else if (replace) {
		// Replace current entry in history
		router.replace(newUrl);
	} else {
		// Push new entry to history
		router.push(newUrl);
	}
};

Next.js Pages Router:

//This is sample code , update it according to your requirement.
import { useRouter } from 'next/router';
 
const router = useRouter();
 
const setWebUrl = (newUrl, redirect, replace) => {
	if (redirect) {
		// Hard redirect
		window.location.href = newUrl;
	} else {
		// Soft navigation with Next.js router
		router.push(newUrl, undefined, { 
			shallow: false, // Set to true for shallow routing
			replace: replace 
		});
	}
};

Middlewares SearchBox