How can I use SWR in Next.js to fetch data efficiently?

How can I use SWR in Next.js to fetch data efficiently?

You can use SWR in Next.js by installing the SWR package and using the useSWR hook to fetch data.

What are the benefits of using SWR over traditional data fetching methods?

SWR provides features like caching, revalidation, and automatic retries, making data fetching more efficient.

Can you show me a simple code example of using SWR?

Sure! Here's a basic example:

import useSWR from 'swr';

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

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

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

How does SWR handle caching?

SWR caches the data in memory and reuses it for subsequent requests, reducing the need for repeated network calls.