What are some examples of using SWR in Next.js?

What are some examples of using SWR in Next.js?

SWR is a React Hooks library for data fetching. Here are a few examples of how to use it in Next.js.

Can you show me a simple example of fetching data from an API?

Sure! You can use SWR like this:

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>;
}

What if I want to use it with server-side rendering?

You can use SWR with Next.js's getServerSideProps to fetch data on the server side. Here's an example:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { initialData: data } };
}

function Component({ initialData }) {
  const { data } = useSWR('/api/data', fetcher, { initialData });
  return <div>{data.message}</div>;
}