Revision history [back]

You can use the option revalidateOnMount and set it to false. This will ensure that useSWR only sends a request on the initial mount of the component and will not revalidate the data again.

Here's an example:

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/some-data', fetcher, { revalidateOnMount: false });

  if (error) return <div>Error</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data}</div>;
}

In this example, useSWR will only send one request to /api/some-data on the initial mount of the component and will use the cached data for subsequent renders.