Part 37: Fetching Product Data in Next.js: Server-Side Rendering Approach
[Pages] Data Fetching
Building a modern web application often involves fetching data from a Content Management System (CMS) and displaying it seamlessly in your app. In this post, we'll explore the server-side rendering (SSR) approach to fetching product data in a Next.js application. This method allows us to pre-render pages with data fetched at build time, resulting in improved performance and SEO.
Setting Up Server-Side Data Fetching
For our application, we'll fetch product data from our CMS and display it on the HomePage. Let's dive into how we can achieve this using Next.js's getStaticProps.
Step 1: Implement getStaticProps
getStaticPropsgetStaticProps is a special Next.js function that runs on the server side. It's executed at build time, allowing us to fetch data and pass it as props to our component.
// pages/index-1.js
import Head from 'next/head';
import Title from '../components/Title';
import { getProducts } from '../lib/products';
export async function getStaticProps() {
console.log('[HomePage] getStaticProps()');
const products = await getProducts();
return { props: { products } };
}
function HomePage({ products }) {
console.log('[HomePage] render:', products);
return (
<>
<Head>
<title>Next Shop</title>
</Head>
<main className="px-6 py-4">
<Title>Next Shop</Title>
<ul>
{products.map((product) => (
<li key={product.id}>
{product.title}
</li>
))}
</ul>
</main>
</>
);
}
export default HomePage;In the getStaticProps function, we fetch product data using the getProducts function and pass it to the HomePage component via props.
Step 2: Create a Data Fetching Module
To keep our code organized, we'll move the data fetching logic into a separate module within a lib folder. This makes it easier to maintain and reuse the code.
// lib/products.js
function stripProduct(product) {
return {
id: product.id,
title: product.title,
};
}
export async function getProducts() {
const response = await fetch('http://localhost:1337/products');
const products = await response.json();
return products.map(stripProduct);
}In lib/products.js, we define a getProducts function that fetches product data from the CMS. We also create a helper function, stripProduct, to extract only the necessary properties (id and title) from each product object.
Step 3: Transform and Render the Data
With our data fetching in place, we can now render the products on the HomePage using an unordered list. The transformation step ensures we only deal with the data we need, reducing the payload size and improving efficiency.
Step 4: Verify the Implementation
After setting everything up, reload the page to trigger getStaticProps and verify that the product data is fetched and displayed correctly. You should see the products listed on the page, each with its respective title.
Benefits of Server-Side Rendering
SEO Optimization: Pre-rendering pages with data at build time ensures that search engines can crawl and index your content effectively.
Improved Performance: By fetching data on the server side, we reduce the initial load time for users, as the page is fully rendered before reaching the client.
Consistent Data: Since data is fetched during the build process, users always see the most recent version of your content.
Server-side rendering is a powerful tool in Next.js, enabling developers to build fast, SEO-friendly applications. By organizing data fetching logic into modules and optimizing data payloads, you can create scalable and maintainable web applications. In the next installment, we'll explore the alternative approach of client-side data fetching, providing a complete picture of your options in Next.js development.
Last updated