Just a hook to replace SWR and react-query in Next.js server components (Next.js' new `fetch` automatically handles caching and stuff).

page.tsx

'use server';
import { useServerFetch } from '../hooks/useServerFetch';

export default async function Page() {
  const { loading, error, data } = useServerFetch<any>('/api/123');
  if (loading) return <h1>loading</h1>;
  if (error) return <h1>{error.message}</h1>;
  return <h1>{JSON.stringify(data)}</h1>;
}

useServerFetch.ts

// hooks/useServerFetch.ts
import { useEffect, useState } from 'react';

export function useServerFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Error fetching data: ${response.statusText}`);
        }
        const json = await response.json();
        setData(json);
      } catch (e) {
        if (e instanceof Error) {
          setError(e);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}