Next.js and Using the Pages Router: Client-side Data Fetching

When talking about large web frameworks and multiple pages, utilizing various approaches to retrieve data holds significant importance. One of these approaches is client-side data fetching in the powerful Next.js framework. Why is this topic important? Well, in summary, client-side data fetching allows you to execute your HTTP requests directly through the user's browser and update the content of pages based on the up-to-date results.

One of the key advantages of this method is that when needed, without needing to reload the page, new data can be displayed to the user. This process enhances the user experience as repeated reloads can be annoying. Additionally, by using appropriate fetching techniques, performance can be better than that achieved by the program itself.

Now, let's take a look at how to implement this technique in Next.js. First of all, one of the essential tools for this work is the well-known useEffect hook, which allows you to monitor specific events over the lifecycle of your component. By using this hook, we can easily send a HTTP request and update our page content.

In your Next.js code, you should make sure to use asynchronous functions and the try/catch structure to ensure that your requests are executed correctly and errors are managed effectively. This way, your code structure will be cleaner and more maintainable.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return 
Loading...
;
  if (!data) return 
No data available
;

  return (
    

      
Data Retrieved:
      
{JSON.stringify(data, null, 2)}
    
  );
}

Code Explanation Line by Line:
- useState and useEffect are imported at the beginning of the file to manage state and execute effects when the component mounts.
- A component named MyComponent is defined that has two initial states: data and loading.
- useEffect is used to run the fetchData function to fetch data when the component is mounted.
- fetchData is an asynchronous function that sends a request to https://api.example.com/data and extracts data from the response.
- In case of an error, the error will be logged to the console and the loading state will update to false.
- As long as loading is true, the text "Loading..." will be displayed. If no data is available, it shows "No data available". Finally, the data is shown in JSON format.