Solid

Wrap the routed children

The keyed boundary recreates the changing region while routeKey can preserve an outer shell.

import { SsgoiRouteBoundary } from "@ssgoi/solid/solid-router";

<SsgoiRouteBoundary>{props.children}</SsgoiRouteBoundary>

Route lifetime

The default key follows the pathname. resolve can return separate id and key values; use a stable shell key only around content that should remain mounted.

Setup

// src/app.tsx
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { Ssgoi } from "@ssgoi/solid";
import { SsgoiRouteBoundary } from "@ssgoi/solid/solidstart";
import { drill } from "@ssgoi/solid/view-transitions";

const config = {
  transitions: [{ on: "/**", except: "/", transition: drill() }],
};

export default function App() {
  return (
    <Router root={(props) => (
      <main class="relative z-0 min-h-dvh overflow-x-clip">
        <Ssgoi config={config}>
          <Suspense>
            <SsgoiRouteBoundary>{props.children}</SsgoiRouteBoundary>
          </Suspense>
        </Ssgoi>
      </main>
    )}>
      <FileRoutes />
    </Router>
  );
}

Beyond the basics

For a persistent /products shell, return the full pathname as id and /products as key from the root boundary's resolve, then put a second default pathname boundary only around props.children in routes/products.tsx. The stable outer key preserves header/tabs; the inner boundary produces child transitions.