How do you trigger on-demand revalidation?

On-demand revalidation is a crucial concept in frontend development, especially when dealing with data fetching and caching mechanisms. It allows developers to refresh or update data without requiring a full page reload, leading to a smoother user experience. This technique is often used in conjunction with frameworks like React, Next.js, and others that support data fetching strategies. Below, I will outline the methods to trigger on-demand revalidation, along with practical examples and best practices.

Understanding On-Demand Revalidation

On-demand revalidation refers to the process of manually triggering a data fetch to update the state of your application. This is particularly useful in scenarios where data may change frequently or when user interactions require the latest data to be displayed.

Common Scenarios for On-Demand Revalidation

• When a user submits a form that updates data.
• When a user clicks a refresh button to get the latest information.
• When a user navigates back to a page that requires fresh data.

Methods to Trigger On-Demand Revalidation

There are various ways to implement on-demand revalidation, depending on the framework or library you are using. Below are examples using React and Next.js.

Using React with Hooks

In a React application, you can use the `useEffect` hook along with a state variable to trigger revalidation. Here’s a simple example:

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

const DataFetchingComponent = () => {
    const [data, setData] = useState(null);
    const [refresh, setRefresh] = useState(false);

    const fetchData = async () => {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
    };

    useEffect(() => {
        fetchData();
    }, [refresh]);

    return (
        

             setRefresh(!refresh)}>Refresh Data
            
{JSON.stringify(data)}
        
    );
};

Using Next.js with SWR

In Next.js, you can utilize the SWR (stale-while-revalidate) library for data fetching, which provides built-in support for revalidation. Here’s how you can implement it:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const DataFetchingComponent = () => {
    const { data, error, mutate } = useSWR('https://api.example.com/data', fetcher);

    if (error) return <div>Error loading dataLoading...
             mutate()}>Refresh Data
            
{JSON.stringify(data)}