Building a Server-Rendered Product Catalog with React Server Components

This challenge focuses on building a dynamic and performant product catalog using React Server Components (RSC). You will leverage RSCs to fetch data on the server and render it directly, improving initial load times and SEO, while still allowing for client-side interactivity. This is crucial for modern web applications where efficient data fetching and rendering are paramount.

Problem Description

Your task is to create a React application that displays a product catalog. The core requirement is to implement this using React Server Components. You need to fetch product data from a simulated API and render it server-side. Additionally, you should implement a client-side search functionality that filters the displayed products without requiring a full page reload.

Key Requirements:

1. Server Component for Data Fetching and Rendering: Create a React component that fetches product data from a mock API endpoint. This component must be a Server Component. It should render a list of products, displaying their name, price, and a brief description.
2. Client Component for Interactivity: Implement a search bar component that allows users to filter products by name. This search bar should be a Client Component to handle user input and update the displayed product list dynamically using client-side filtering.
3. Data Fetching Strategy: The data fetching for the initial product list should happen on the server. When the search term changes, the filtering should occur on the client.
4. Styling: Basic styling should be applied to make the product list and search bar presentable.

Expected Behavior:

• Upon initial page load, the product catalog should be rendered with all available products, fetched from the server.
• As the user types into the search bar, the product list should update in real-time to show only products whose names match the search query.
• The search functionality should be client-side, meaning no new server requests are made for filtering.

Edge Cases to Consider:

• What happens if the product data fetching fails? (For this challenge, you can simulate this with a simple conditional or assume success).
• How should the UI behave when there are no products matching the search query?
• Consider the case of an empty product list initially.

Examples

Let's assume a mock API returns the following structure:

[
  {
    "id": "prod-1",
    "name": "Wireless Mouse",
    "price": 25.99,
    "description": "Ergonomic wireless mouse with long battery life."
  },
  {
    "id": "prod-2",
    "name": "Mechanical Keyboard",
    "price": 79.99,
    "description": "RGB backlit mechanical keyboard with tactile switches."
  },
  {
    "id": "prod-3",
    "name": "USB-C Hub",
    "price": 35.50,
    "description": "7-in-1 USB-C hub with HDMI, USB 3.0, and SD card reader."
  },
  {
    "id": "prod-4",
    "name": "Noise Cancelling Headphones",
    "price": 199.00,
    "description": "Over-ear headphones with active noise cancellation."
  }
]

Example 1: Initial Load

• Input: User navigates to the product catalog page.
• Output: The server component fetches the product data. The rendered HTML includes a list of all four products: "Wireless Mouse", "Mechanical Keyboard", "USB-C Hub", and "Noise Cancelling Headphones".

Example 2: Searching for "Mouse"

• Input: User types "Mouse" into the search bar.
• Output: The client-side filtering updates the displayed list to show only "Wireless Mouse".

Example 3: Searching for "Key"

• Input: User types "Key" into the search bar.
• Output: The client-side filtering updates the displayed list to show only "Mechanical Keyboard".

Example 4: No Matching Products

• Input: User types "Tablet" into the search bar.
• Output: The product list becomes empty, and a message like "No products found matching your search." is displayed.

Constraints

• The mock API can be simulated using a simple asynchronous function that returns the JSON data after a short delay (e.g., 500ms).
• The React application should be structured to clearly differentiate between Server Components and Client Components.
• The search filtering must be entirely client-side.
• Performance is a consideration; ensure the initial render is fast due to server-side rendering.

Notes

• You will need to set up a React project with a framework that supports React Server Components (e.g., Next.js App Router).
• Remember to use async/await for data fetching in your Server Component.
• To create a Client Component, use the "use client"; directive at the top of the file.
• Consider how you will pass the initial product data from the Server Component to the Client Component for filtering, or how the Client Component will access the data if it's managed globally.
• Think about the best way to handle state management for the search input in your Client Component.