Effortless Client-Side Data Fetching in Next.js 14 with SWR and TypeScript

Client-side data fetching is a powerful technique in Next.js 14 for scenarios where SEO indexing isn’t critical, pre-rendering isn’t necessary, or when your page content requires frequent updates. Unlike server-side rendering methods, client-side fetching allows you to fetch data directly within your React components.

When implemented at the page level, data is fetched at runtime, dynamically updating the page content as data changes. At the component level, data retrieval occurs when the component mounts, ensuring real-time updates within specific UI elements.

However, it’s crucial to understand that client-side data fetching can impact your application’s performance and page load speed. Since data fetching happens upon component or page mount, and data isn’t cached by default, optimizing this process is essential for a smooth user experience.

Client-Side Data Fetching with useEffect: A Basic Approach

One way to handle client-side data fetching is by using the useEffect Hook in React. Let’s examine a basic example:

import { useState, useEffect } from 'react';

function Profile() {
  const [data, setData] = useState<any>(null); // Consider defining a more specific type for 'data'
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No profile data</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

This code snippet demonstrates a simple profile component fetching data from an API endpoint /api/profile-data using useEffect. While functional, this approach lacks several features crucial for efficient and robust data fetching in modern web applications. It doesn’t handle caching, revalidation, or error retries out of the box, which can lead to performance bottlenecks and a less-than-ideal user experience.

Client-Side Data Fetching with SWR: The Recommended Solution

For optimized client-side data fetching in Next.js, SWR (Stale-While-Revalidate), a React Hooks library created by the Next.js team, is highly recommended. SWR addresses the shortcomings of basic useEffect implementations by providing built-in features like caching, revalidation, focus tracking, and automatic retries.

SWR’s core principle, stale-while-revalidate, allows it to immediately return cached data (stale) while simultaneously revalidating the data in the background. This ensures a fast initial load and keeps the data fresh and up-to-date.

Let’s refactor the previous example using SWR to fetch profile data:

import useSWR from 'swr';

const fetcher = (...args: [key: string]) => fetch(...args).then((res) => res.json());

function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

In this SWR example, useSWR('/api/profile-data', fetcher) handles the data fetching logic. The fetcher function is a simple wrapper around fetch that parses the response as JSON. SWR automatically manages caching and revalidation, significantly simplifying your data fetching code and enhancing performance.

Benefits of using SWR for client-side fetching:

• Built-in Caching: SWR automatically caches fetched data, reducing redundant requests and improving load times, especially for frequently accessed data.
• Stale-While-Revalidate Strategy: Provides a fast initial load from the cache while ensuring data freshness by revalidating in the background.
• Revalidation on Focus: Automatically refetches data when the user refocuses the window, ensuring the UI always reflects the latest data.
• Automatic Retries on Error: SWR can be configured to automatically retry requests upon failure, improving resilience and user experience in case of network issues.
• Simplified Code: Reduces boilerplate code compared to manual implementations with useEffect, leading to cleaner and more maintainable components.
• TypeScript Ready: SWR is written in TypeScript and provides excellent type definitions, enhancing developer experience in TypeScript projects.

By leveraging SWR, you can efficiently manage client-side data fetching in your Next.js 14 applications with TypeScript, optimizing performance and providing a smoother user experience. For in-depth information and advanced configurations, refer to the SWR documentation.