Building a Server-Side Rendered E-commerce Product Listing with Next.js

In the fast-paced world of e-commerce, providing a seamless and efficient user experience is paramount. One crucial aspect of this experience is how quickly product information loads and becomes available to the customer. Slow loading times can lead to frustration, abandoned carts, and ultimately, lost revenue. Server-Side Rendering (SSR) with Next.js offers a powerful solution to this problem, allowing you to pre-render your product listing pages on the server, resulting in faster initial load times and improved SEO.

Why Server-Side Rendering Matters for E-commerce

Traditional client-side rendered (CSR) applications load a blank page initially, and then dynamically fetch and render content using JavaScript. This can lead to a ‘flash of unstyled content’ (FOUC) and slower Time to Interactive (TTI) metrics. SSR, on the other hand, pre-renders the HTML on the server and sends it to the client, making the content available to the user much faster. This is particularly beneficial for e-commerce sites, where:

• SEO is critical: Search engines can crawl and index pre-rendered content more effectively, improving your website’s visibility in search results.
• Performance is key: Faster initial load times lead to better user experience, reduced bounce rates, and increased conversions.
• Content-rich pages are common: E-commerce sites often feature product descriptions, images, reviews, and other content, making SSR a natural fit.

Setting Up Your Next.js Project

Let’s get started by creating a new Next.js project. If you haven’t already, make sure you have Node.js and npm (or yarn) installed. Open your terminal and run the following command:

npx create-next-app@latest e-commerce-product-listing
cd e-commerce-product-listing

This command creates a new Next.js project named ‘e-commerce-product-listing’. Navigate into the project directory using `cd e-commerce-product-listing`.

Creating the Product Listing Page

We’ll create a simple product listing page that fetches product data from an API and displays it. Inside the `pages` directory, create a new file named `products.js` (or `products.jsx` if you prefer JSX syntax).

// pages/products.js
import { useState, useEffect } from 'react';

function Products() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProducts() {
      try {
        const response = await fetch('https://fakestoreapi.com/products'); // Replace with your API endpoint
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProducts(data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchProducts();
  }, []);

  if (loading) {
    return <p>Loading products...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Products</h2>
      <div style="{{">
        {products.map((product) => (
          <div style="{{">
            <img src="{product.image}" alt="{product.title}" style="{{" />
            <h3>{product.title}</h3>
            <p>${product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Products;

This code does the following:

• Imports necessary modules: `useState` and `useEffect` from React.
• Defines state variables: `products` (an array to hold product data), `loading` (a boolean to indicate loading state), and `error` (to hold any error messages).
• Uses `useEffect` to fetch product data: This effect runs once when the component mounts.
• Fetches data from an API: In this example, we’re using the free Fake Store API. Replace the URL with your own API endpoint.
• Handles loading and error states: Displays a loading message while fetching data and an error message if something goes wrong.
• Renders the product list: Maps over the `products` array and displays each product’s image, title, and price.

Save the `products.js` file and start your Next.js development server by running `npm run dev` or `yarn dev` in your terminal. Then, navigate to `http://localhost:3000/products` in your browser. You should see a list of products displayed.

Implementing Server-Side Rendering with `getServerSideProps`

The current implementation fetches data on the client-side, which is not ideal for SEO and initial load performance. To implement SSR, we’ll use the `getServerSideProps` function provided by Next.js. This function runs on the server before the component is rendered, allowing us to fetch data and pass it as props to the component.

Modify your `products.js` file to include `getServerSideProps`:

// pages/products.js
import { useState } from 'react';

function Products({ products, error }) {
  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Products</h2>
      <div style="{{">
        {products.map((product) => (
          <div style="{{">
            <img src="{product.image}" alt="{product.title}" style="{{" />
            <h3>{product.title}</h3>
            <p>${product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  try {
    const response = await fetch('https://fakestoreapi.com/products'); // Replace with your API endpoint
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const products = await response.json();
    return {
      props: {
        products,
        error: null,
      },
    };
  } catch (error) {
    return {
      props: {
        products: [],
        error: { message: error.message },
      },
    };
  }
}

export default Products;

Key changes:

• Removed `useState` and `useEffect`: We no longer need to manage loading and error states within the component, as the data is fetched on the server.
• Received `products` and `error` as props: These props are passed from `getServerSideProps`.
• Implemented `getServerSideProps`: This function is an asynchronous function that fetches data from the API and returns it as props.
• Error Handling: The `getServerSideProps` function includes error handling to gracefully manage API request failures. It passes an error object as a prop if an error occurs.

Now, when you refresh the page, you should see the product listing rendered almost instantly. View the page source in your browser; you will observe that the HTML is pre-rendered with the product data.

Understanding `getServerSideProps`

`getServerSideProps` is a Next.js function that allows you to fetch data on the server before rendering a page. It runs on every request, which makes it ideal for fetching data that changes frequently or that needs to be personalized for each user. It’s important to understand the following about `getServerSideProps`:

• Runs on the server: The code inside `getServerSideProps` executes on the server, not in the browser. This means you can access sensitive information, such as API keys, without exposing them to the client.
• Runs on every request: Unlike `getStaticProps`, which runs at build time, `getServerSideProps` runs on every request. This makes it suitable for pages that require up-to-date data.
• Returns props: The function must return an object with a `props` key, which contains the data to be passed to the component as props.
• Error Handling: Implement robust error handling within `getServerSideProps` to handle API failures gracefully. Return an error object as a prop and display an appropriate error message in your component.
• Context Object: `getServerSideProps` receives a `context` object as its first argument. This object contains information about the request, such as the `params` (for dynamic routes), `req` (the HTTP request object), and `res` (the HTTP response object). You can use the `context` object to access cookies, headers, and other request-specific information.

Optimizing Performance

While SSR improves initial load times, you can further optimize your product listing page for performance:

• Caching: Implement caching on the server-side to reduce the number of API requests. You can use tools like Redis or Memcached to store frequently accessed data.
• Image Optimization: Optimize images for web use by compressing them and using appropriate image formats (e.g., WebP). Next.js provides built-in image optimization features with the `next/image` component.
• Code Splitting: Use code splitting to load only the necessary JavaScript for the initial page load. Next.js automatically handles code splitting, but you can further optimize it by dynamically importing components.
• Pagination: If you have a large number of products, implement pagination to avoid loading all products at once.
• Lazy Loading: Lazy load images and other resources to improve initial load times.
• Use a CDN: Serve your website’s static assets from a Content Delivery Network (CDN) to reduce latency for users around the world.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when implementing SSR with Next.js and how to avoid them:

• Fetching data in the component: Don’t fetch data directly in the component when using `getServerSideProps`. This will negate the benefits of SSR. Instead, fetch the data within `getServerSideProps` and pass it as props.
• Ignoring error handling: Always handle errors within `getServerSideProps`. API requests can fail, and you need to gracefully handle these failures to provide a good user experience. Return an error object as a prop and display an appropriate error message.
• Over-fetching data: Only fetch the data that is needed for the initial render. Avoid fetching unnecessary data that will slow down the page load. Consider using pagination or filtering to limit the amount of data fetched.
• Not using caching: If your data doesn’t change frequently, implement caching to reduce the number of API requests and improve performance.
• Not optimizing images: Large images can significantly impact page load times. Optimize your images for web use by compressing them and using appropriate image formats. Use the `next/image` component for automatic image optimization.

Enhancing the Product Listing: Filtering and Sorting

To make the product listing more user-friendly, let’s add filtering and sorting capabilities. This will involve creating form elements and updating the API request based on user input.

First, add some state variables to manage the filter and sort options. Modify your `products.js` file:

// pages/products.js
import { useState } from 'react';

function Products({ products, error }) {
  const [sortOption, setSortOption] = useState('');
  const [categoryFilter, setCategoryFilter] = useState('');

  // ... (rest of the component)
}

Next, add form elements for filtering and sorting, such as a select dropdown for sorting and radio buttons or a select for category filtering. Add these elements inside the `

// pages/products.js
// ... (imports and state)

  return (
    <div>
      <h2>Products</h2>
      <div>
        <label>Sort by:</label>
         setSortOption(e.target.value)}>
          Default
          Price: Low to High
          Price: High to Low
        

        <label>Filter by Category:</label>
         setCategoryFilter(e.target.value)}>
          All Categories
          Electronics
          Jewelery
          Men's clothing
          Women's clothing
        
      </div>
      <div style="{{">
        {/* ... product display ... */}
      </div>
    </div>
  );

// pages/products.js
export async function getServerSideProps({ query }) {
  const { sortOption, categoryFilter } = query;
  let apiUrl = 'https://fakestoreapi.com/products';

  // Build the API URL with query parameters
  const queryParams = [];
  if (sortOption) {
    queryParams.push(`sort=${sortOption}`);
  }
  if (categoryFilter) {
    queryParams.push(`category=${categoryFilter}`);
  }

  if (queryParams.length > 0) {
    apiUrl += `?${queryParams.join('&')}`;
  }

  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const products = await response.json();
    return {
      props: {
        products,
        error: null,
      },
    };
  } catch (error) {
    return {
      props: {
        products: [],
        error: { message: error.message },
      },
    };
  }
}

// pages/products.js
import { useRouter } from 'next/router';
// ... (imports and state)

  const router = useRouter();

  const handleSortChange = (value) => {
    setSortOption(value);
    router.push({
      pathname: '/products',
      query: {
        sortOption: value,
        categoryFilter,
      },
    });
  };

  const handleCategoryChange = (value) => {
    setCategoryFilter(value);
    router.push({
      pathname: '/products',
      query: {
        sortOption,
        categoryFilter: value,
      },
    });
  };

  return (
    <div>
      <h2>Products</h2>
      <div>
        <label>Sort by:</label>
         handleSortChange(e.target.value)}>
          Default
          Price: Low to High
          Price: High to Low
        

        <label>Filter by Category:</label>
         handleCategoryChange(e.target.value)}>
          All Categories
          Electronics
          Jewelery
          Men's clothing
          Women's clothing
        
      </div>
      <div style="{{">
        {/* ... product display ... */}
      </div>
    </div>
  );