SSR - NextJS (App Router)

The SSR package is ideal for e-commerce websites where content needs to be dynamically generated on the server and sent to the client as fully rendered HTML. This approach ensures fast initial loads, improved SEO, and enhanced accessibility. SSR is particularly useful for dynamic product pages, category pages, and personalized shopping experiences that require real-time data rendering.

Who is this intended for?

This package is designed for developers building e-commerce platforms that require:

• SEO-Optimized Product Pages: For landing pages, product detail pages, and category pages where SEO is crucial, SSR ensures that content is fully rendered and crawlable by search engines, improving search rankings and visibility.
• Fast Initial Page Loads: SSR reduces time-to-first-paint (TTFP) by delivering pre-rendered content, creating a seamless shopping experience even on slower networks or devices.
• Dynamic and Personalized Data: Serve real-time, user-specific data such as product recommendations, pricing, or offers directly on the first render, improving customer engagement.
• Enhanced User Experiences: Combine server-side efficiency with client-side interactivity for features like product filters, search results, and cart updates, ensuring a smooth and responsive shopping journey.

For client-side rendering or headless setups, explore the following options:

Prerequisites

Before proceeding, ensure you have the following:

• Next.js (v14.2 or higher)
• Node.js (v18 or higher)
• npm or yarn for package management
• A Next.js project using the App Router (app directory) architecture.

Installation

Install the SSR Package

Add the Unbxd React SDK SSR package to your e-commerce project (View on NPM (opens in a new tab)):

npm install @unbxd-ui/react-search-components

Or with Yarn:

yarn add @unbxd-ui/react-search-components

Install Hooks Package

For advanced customization, install the hooks package (View on NPM (opens in a new tab)):

npm install @unbxd-ui/react-search-hooks

Or with Yarn:

yarn add @unbxd-ui/react-search-hooks

Initial Data Fetching

Follow steps in below file for initial data fetch :

Initialise

Key Points:

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

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. To learn more about its configuration and usage, visit the documentation here:

UnbxdSearchSSRWrapper

Key Points:

1. Have UnbxdSearchSSRWrapper in a different file and Always mark wrapper file with 'use client'.
2. Pass the initialData derived in above step to this UnbxdSearchSSRWrapper.
3. 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>
}
 

Configure Headers

Headers can be configured in the UnbxdSearchSSRWrapper to personalize content delivery.

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
'use client';
 
import { initialise } from '@unbxd-ui/react-search-hooks/ssr-utilities';
 
export async function SearchWrapper() {
	
	const initialData = await initialise({
		...
		apiUrlConfig={{
                headers: {
                    'Unbxd-User-Id': 'user-123',
                    'Unbxd-Device-Type': function (){
                    	return localStorage.get('device')
                    }
                }
		}}
	})
    
	
	return <Wrapper initialData={initialData} />
}

Setting Up Middleware

Follow the middleware configuration example below to handle custom headers and request processing in your Next.js application:

Middlewares

Customize and Configure

Dive deeper into our documentation to explore customization options for search components, product displays, and hooks to align with your e-commerce requirements. Add your search components as children inside the wrapper - either use our pre-built components from @unbxd-ui/react-search-components or create custom ones using hooks from @unbxd-ui/react-search-hooks.

Best Practices for SSR.

To maximize the potential of SSR for your e-commerce website, follow these best practices:

• Optimize Product and Category Pages: Use SSR to pre-render dynamic content for better SEO and faster load times, especially for high-traffic pages.
• Minimize API Calls: Efficiently fetch and cache data to reduce server load and improve performance.
• Personalize Content: Leverage headers and middlewares to deliver localized, user-specific, or device-optimized content on first render.
• Seamless Client-Side Hydration: Ensure a smooth transition from server-side rendering to client-side interactions for dynamic features like filters and carts.
• Leverage Documentation: Regularly refer to SDK examples and guides to implement advanced configurations and avoid common pitfalls.