A new type of RSC routing based on <Frame />

New type of RSC routing inspired by iFrames and Remix 3.

How it works

Define your routes

import { route } from "remix/fetch-router/routes";

export const routes = route({
  frames: {
    home: "/",
    about: "/about",
    partials: {
      sidebar: "/frame/sidebar",
    },
  },
});

Map your components and render a <Frame /> for the current location

const router = createRouter();

mapFrames(router, routes.frames, {
  middleware: [useCacheMiddleware(createMemoryFileStorage()), useServerMiddleware()],
  components: {
    about: About,
    home: Home,
    partials: {
      sidebar: Sidebar,
    },
  },
});

Nest frames

<Suspense fallback={<p>Loading sidebar...</p>}>
  <Frame src={routes.frames.partials.sidebar.href()} />
</Suspense>

Revalidate frames

"use client";

import { useFrame } from "react-server-frame/client";

export function ReloadFrame() {
  const { pending, reload } = useFrame();

  return <button onClick={reload}>Reload{pending ? "ing..." : ""}</button>;
}