Client-Side Data Fetching with React Hooks | Data Fetching in Next.js: Getting Information to Your Users | Next.js: A Practical Introduction for Developers

While Next.js excels at server-side and static data fetching, there are many scenarios where fetching data on the client-side after the initial page load is the most appropriate approach. This is particularly useful for data that is dynamic, user-specific, or changes frequently, and where SEO is not a primary concern for that particular data. We'll leverage React's built-in hooks, primarily useState and useEffect, to achieve this.

Client-side data fetching in Next.js behaves very similarly to how you'd do it in any other React application. The key difference is that the data is fetched after the initial HTML has been rendered and sent to the browser. This means the initial page load will be faster, but the content dependent on this fetched data will appear shortly after.

Let's break down the process:

State Management: We'll use useState to store the data fetched from the API, as well as any loading or error states.
Side Effects: The useEffect hook is crucial for performing side effects, such as making API calls. It allows us to run code after the component has rendered.
API Calls: Inside useEffect, we'll make our asynchronous API requests (e.g., using fetch or a library like Axios).
Updating State: Once the data is fetched, we'll update our component's state with the received data. We'll also handle potential errors and set a loading state to provide a better user experience.

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/mydata'); // Example API endpoint
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // The empty dependency array ensures this effect runs only once after the initial render

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

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

  return (
    <div>
      <h1>My Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;