Server Side Rendering

Getting Started

1. How do I set up SSR with Next.js?

The React Search SDK supports both the App Router and Pages Router approaches for SSR implementation:

2. Can I use getStaticProps for search pages?

No, getStaticProps is not suitable for search pages due to their dynamic nature:

Limitations:

• Cannot access dynamic URL parameters
• Cannot generate results for all possible parameter combinations
• No access to user-specific context

Key Considerations:

• Search pages depend on runtime factors:
  • URL parameters (queries, filters, sorting, pagination)
  • User context (preferences, location, personalization)
• Use getServerSideProps instead for:
  • Fresh search results
  • Dynamic parameter handling
  • User context access
  • SEO benefits

3. Can I preload search data for better performance?

No, preloading search data is not recommended because:

• Search API responses are always fresh and updated
• Displaying preloaded data may show stale information
• Time-critical data (like product availability) requires real-time fetching

Common Questions

1. How do I handle server components vs client components?

Component organization in Next.js SSR:

• Server Components

  • Handle static content and SEO-critical elements
  • Manage data fetching and initial page rendering
  • Process server-side operations

• Client Components

  • Handle interactive elements and user interactions
  • Manage dynamic UI updates
  • Process client-side operations

Best Practices:

1. Place the wrapper component in a separate file with "use client" directive
2. Import and render the wrapper in your route file
3. Wrap all search-related components inside the wrapper
   • Components become client-side but maintain server-rendered initial HTML
   • Ensures search results are crawler-accessible
   • Improves SEO performance

2. How do I pass initial data from server to client components?

Data flow in SSR implementation:

1. Call the initialize function in your server component
2. Pass the response to the SSR wrapper
3. The wrapper creates a context for client components
4. Access data in client components using hooks

Requirements:

• Mark client components with "use client" directive
• Use appropriate hooks to access context data
• Maintain proper component hierarchy

For more informations, please refer to the initialise pages for the App Router and Pages Router.

3. Can I use React Server Components with this SDK?

No, the Unbxd React Search SDK is not directly compatible with React Server Components (RSC) due to its requirements for:

• Client-side state management
• Interactive UI elements
• Real-time event handling
• Browser APIs

Use client components for:

• The UnbxdSearchSSRWrapper and its children
• Interactive search features
• Dynamic UI updates
• User interaction handling

However, you can use RSC components outside the React Search Wrapper component in the following cases:

• Page layout and static content
• SEO-critical elements
• Initial data fetching
• Non-search related content

4. My search isn't working. Is it necessary to pass currentPath value to the initialise function?

Yes, passing the currentPath to the initialise function is crucial for proper search functionality. The currentPath parameter helps the SDK:

• Parse and apply URL parameters (query, filters, sorting, etc.)
• Initialize the search state correctly
• Ensure server-side rendering matches client-side state
• Maintain search state during navigation

Without currentPath, the search initialization will not have access to the URL, which will lead to blank search results.

To learn about how to pass and use the currentPath parameter, please click here for App Router and here for Pages Router.

5. What is the onEvent function?

The onEvent function is a callback function that helps you track and handle various events that occur during the search functionality. It's a powerful tool for monitoring user interactions, handling errors, and implementing custom behaviors. Here (opens in a new tab) is the list of events supported by the React Search SDK.

This is the default value:

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

• type: The type of event.
• message: A descriptive message about the event.
• value: The value associated with the event.
• state: Current search state.

This function is particularly useful for:

• Debugging and monitoring
• User feedback (showing loading states, success/error messages)
• Analytics tracking
• Custom behavior implementation based on search events
• Error handling and logging
• Performance monitoring

6. Why do my filters reset when navigating back?

According to the default implementation of the React Search SDK, the URL is added to the history stack only on initial load. After that, any user interaction that changes the URL is not added to the history stack. Instead, it replaces the existing URL. However, this implementation can be changed by using the setWebUrl callback function.

7. What is the setWebUrl function? What value must I pass to it?

The setWebUrl function is a configurable URL management function that handles how URL changes are reflected in the browser's history. It's part of the webUrlConfig configuration.

• newUrl is the URL to be set.
• redirect is a boolean value to indicate if the user should be redirected to the new URL.
• replace is a boolean value to indicate if the new URL should replace the current URL in the history stack.

Checkout setWebUrl here for usage and examples

App Router

1. Where should I place the initialize function call?

The initialize function must be called to fetch initial search results, ensuring server-rendered content is available for SEO.

App Router Implementation:

• Place the initialize function call in page.tsx
• Pass the initialization response as props to the wrapper component
• Import and render the wrapper component in page.tsx

2. How do I pass the current path to the initialize function?

To make use of the current path in the initialise function, you need to make use of middlewares. Middlewares are a way to modify the request and response in Next.js. You can make use of the headers object to get the current path.

Checkout App Router usage in sdk here.

Pages Router

1. Where should I place the initialize function call?

Pages Router Implementation:

• Place the initialize function call in getServerSideProps within index.tsx
• Pass the initialization response as props to the wrapper component

Checkout Page Router usage in sdk here.

Troubleshooting

1. Why am I getting hydration mismatches?

Common causes and solutions for hydration mismatches:

1. Using CSR Wrapper Instead of SSR Wrapper

   • The CSR wrapper performs initial data fetching on the client side
   • This creates a mismatch between server and client HTML
   • Solution: Use the SSR wrapper for server-side data fetching

2. Improper Component Setup

   • Ensure wrapper component is marked with "use client"
   • Keep consistent state between server and client
   • Follow proper component hierarchy

2. How do I resolve 'window is not defined' errors?

These errors occur due to server-side and client-side code execution mismatches. Here are common scenarios and solutions:

1. Client-Side Code in Server Components:

// ❌ Incorrect: Direct window usage
function SearchComponent() {
	const windowWidth = window.innerWidth; // Causes error
	return <div>{windowWidth}</div>;
}
 
// ✅ Correct: Safe window usage with useEffect
function SearchComponent() {
	const [windowWidth, setWindowWidth] = useState(0);
 
	useEffect(() => {
		setWindowWidth(window.innerWidth);
	}, []);
	
	return <div>{windowWidth}</div>;
}

2. Component Setup:

// ❌ Incorrect: Missing 'use client' directive
import { UnbxdSearchSSRWrapper } from "@unbxd-ui/react-search-hooks";
 
export function Wrapper({ initialData }) {
	return <UnbxdSearchSSRWrapper initialData={initialData}>{/* Components */}</UnbxdSearchSSRWrapper>;
}
 
// ✅ Correct: With 'use client' directive
("use client");
import { UnbxdSearchSSRWrapper } from "@unbxd-ui/react-search-hooks";
 
export function Wrapper({ initialData }) {
	return <UnbxdSearchSSRWrapper initialData={initialData}>{/* Components */}</UnbxdSearchSSRWrapper>;
}

3. How do I debug SSR vs CSR rendering differences?

Use these debugging techniques to identify and resolve rendering inconsistencies:

1. Event Monitoring

   • Use the onEvent callback to log events and data flow
   • Monitor both server and client-side events

2. Development Tools

   • React DevTools for component hierarchy inspection
   • Browser DevTools for network requests
   • Server-side logs for initialization issues

3. Common Checks

   • Verify hydration warnings in console
   • Compare initial data between server and client
   • Check component mounting sequence
   • Monitor state changes during hydration

4. Environment-Specific Logging

   if (typeof window !== "undefined") {
   	console.log("Client-side:", data);
   } else {
   	console.log("Server-side:", data);
   }

5. Network Analysis

   • Monitor API requests timing
   • Check response consistency
   • Verify data synchronization