Fetching Data on the Client Side with SWR

Show how to use SWR for client-side data fetching with caching, revalidation, and error handling in a Next.js app.
import useSWR from 'swr';
Import the useSWR hook from the swr library.
const fetcher = (...args) => fetch(...args).then(res => res.json());
Define a fetcher function that uses the native fetch API to retrieve data and then parse the response as JSON.
function UserProfile({ userId }) {
  const { data, error } = useSWR(`/api/user/${userId}`, fetcher);

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

  return <div>Hello, {}!</div>;
Create a UserProfile component that fetches user data using the useSWR hook with a dynamic API endpoint based on the userId prop. It handles states for loading and error, returning appropriate UI feedback.
  .error { color: red; }
  .loading { color: gray; }
CSS styles for the error and loading states.
<div id='user-profile'>
  <UserProfile userId='123' />
HTML markup with a div element where the UserProfile component is rendered, passing a mock userId prop.