A proposal for a `useBackend` React hook that is compiled out into an API route. Inspired by Vercel and Next.js

proposal.jsx

// /pages/index.tsx
function ExamplePage() {
  const { data } = useBackend(
    "get-user-info",
    async () => {
      const data = await getProfileFromDB();

      return data; // {name: string}
    },
    { prefetch: true }
  );

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

// Compiles into 2 files:

// /pages/index.js
function ExamplePage(props) {
  const { data } = useQuery(
    "get-user-info",
    async () => {
      const res = await fetch("/api/generated/get-user-info");
      const data = await res.json();
      return data; // {name: string}
    },
    { initialData: props.generated["get-user-info"].initialData }
  );

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

export default async function getServerSideProps() {
  const res = await fetch("/api/generated/get-user-info");
  const data = await res.json();
  return {
    props: {
      generated: {
        "get-user-info": data,
      },
    },
  };
}

// /pages/api/generated/get-user-info
export default async function (req, res) {
  const data = await getProfileFromDB();
  res.status(200).json(data);
}