@solidjs/router 2.0.0-next.25 → 2.0.0-next.27

package/README.md

@@ -10,7 +10,7 @@
 
 </div>
 
-**Solid Router** brings fine-grained reactivity to route navigation. Routes are config objects — the single source of truth for matching *and* types — and the router upgrades HTML's own interaction verbs instead of wrapping them: `<a href={path}>` and `<form action={action}>` carry typed, URL-addressable values on real platform elements, intercepted by delegation, decorated with a shared attribute vocabulary, and fully functional without JavaScript.
+**Solid Router** brings fine-grained reactivity to route navigation. Routes are config objects — the single source of truth for matching _and_ types — and the router upgrades HTML's own interaction verbs instead of wrapping them: `<a href={path}>` and `<form action={action}>` carry typed, URL-addressable values on real platform elements, intercepted by delegation, decorated with a shared attribute vocabulary, and fully functional without JavaScript.
 
 Explore the official [documentation](https://docs.solidjs.com/solid-router) for detailed guides and examples.
 
@@ -36,6 +36,7 @@ Explore the official [documentation](https://docs.solidjs.com/solid-router) for
   - [Multiple Paths](#multiple-paths)
   - [Nested Routes](#nested-routes)
   - [Lazy Route Subtrees](#lazy-route-subtrees)
+  - [Server Component Routes (experimental)](#server-component-routes-experimental)
   - [File-System Routes](#file-system-routes)
 - [Typed Paths](#typed-paths)
 - [Links](#links)
@@ -89,7 +90,13 @@ When a tree is composed across files (feature subtrees), wrap the extracted arra
 ```tsx
 // features/admin/routes.ts
 export const adminRoutes = defineRoutes([
-  { path: "/admin", component: Admin, children: [/* ... */] }
+  {
+    path: "/admin",
+    component: Admin,
+    children: [
+      /* ... */
+    ]
+  }
 ]);
 
 // app/router.ts
@@ -138,19 +145,19 @@ The API splits across two surfaces, and the line between them is precise: **coul
 
 The instance is shared — one module-level object serving every mount, every request, every test. It is deliberately non-stateful (on the server there are many "current locations" at once), so it carries only the app's static routing vocabulary. Hooks read the live session from context.
 
-| Instance — facts about the *app* | Hooks — facts about the *session* |
-| --- | --- |
-| `paths` — how to spell URLs | `useLocation`, `useParams` — where am I |
-| `match(url)` — how would a URL match | `useNavigate`, `usePreloadRoute` — move / warm |
-| `routes`, `config` — what exists | `useIsRouting`, `useRouteMatches`, `useSearchParams` — live state |
+| Instance — facts about the _app_     | Hooks — facts about the _session_                                 |
+| ------------------------------------ | ----------------------------------------------------------------- |
+| `paths` — how to spell URLs          | `useLocation`, `useParams` — where am I                           |
+| `match(url)` — how would a URL match | `useNavigate`, `usePreloadRoute` — move / warm                    |
+| `routes`, `config` — what exists     | `useIsRouting`, `useRouteMatches`, `useSearchParams` — live state |
 
 They compose as noun and verb — the instance supplies a typed URL, the hook acts on the current session:
 
 ```tsx
 const navigate = useNavigate();
-navigate(paths.users(2));                 // verb(noun)
+navigate(paths.users(2)); // verb(noun)
 
-const params = useParams(paths.users);    // hook, typed by the instance
+const params = useParams(paths.users); // hook, typed by the instance
 ```
 
 **Hooks are the default; import the router only when you need typed URLs or matching outside a render.** Components that only read their session (params, location, string-path navigation) never need the instance — which also means component files don't form import cycles with the router module that references them in its config.
@@ -159,17 +166,17 @@ const params = useParams(paths.users);    // hook, typed by the instance
 
 A route definition supports:
 
-| key            | type                                    | description                                                        |
-| -------------- | --------------------------------------- | ------------------------------------------------------------------ |
-| `path`         | `string \| string[]`                    | Path partial for this route segment                                |
-| `component`    | `Component`                             | Component rendered for the matched segment                         |
+| key            | type                                                         | description                                                                     |
+| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------- |
+| `path`         | `string \| string[]`                                         | Path partial for this route segment                                             |
+| `component`    | `Component`                                                  | Component rendered for the matched segment                                      |
 | `children`     | `RouteDefinition \| RouteDefinition[] \| () => Promise<...>` | Nested route definitions, or a thunk for a [lazy subtree](#lazy-route-subtrees) |
-| `preload`      | `RoutePreloadFunc`                      | Called on preload intent (hover/focus) and navigation              |
-| `matchFilters` | `MatchFilters`                          | Additional constraints for matching parameters                     |
-| `search`       | `StandardSchemaV1`                      | Search-param validator; its types flow into `paths` and hooks      |
-| `info`         | `Record<string, any>`                   | Arbitrary metadata, readable via `useRouteMatches`                 |
+| `preload`      | `RoutePreloadFunc`                                           | Called on preload intent (hover/focus) and navigation                           |
+| `matchFilters` | `MatchFilters`                                               | Additional constraints for matching parameters                                  |
+| `search`       | `StandardSchemaV1`                                           | Search-param validator; its types flow into `paths` and hooks                   |
+| `info`         | `Record<string, any>`                                        | Arbitrary metadata, readable via `useRouteMatches`                              |
 
-The tree is **immutable and there is one router per app** — that's what makes `paths` and the typed hooks truthful, it lets matching compile once and be shared by every mount, request, and `match()` call, and it means delegation, link state, and preloading all have a single owner. Compose large apps by spreading subtrees into the config (see `defineRoutes` above); mounting a router inside another router is not supported (nested `<Routes>` has been gone since 0.10) and warns in development. Sections whose *code* shouldn't load up front are [lazy route subtrees](#lazy-route-subtrees) — still one tree, still typed.
+The tree is **immutable and there is one router per app** — that's what makes `paths` and the typed hooks truthful, it lets matching compile once and be shared by every mount, request, and `match()` call, and it means delegation, link state, and preloading all have a single owner. Compose large apps by spreading subtrees into the config (see `defineRoutes` above); mounting a router inside another router is not supported (nested `<Routes>` has been gone since 0.10) and warns in development. Sections whose _code_ shouldn't load up front are [lazy route subtrees](#lazy-route-subtrees) — still one tree, still typed.
 
 ### Dynamic Routes
 
@@ -204,8 +211,8 @@ const story = defineRoute({
   preload: ({ params }) => getStory(params.id), // params.id: string
   component: props => (
     <Story
-      id={props.params.id}    // string — the pattern guarantees it
-      tab={props.params.tab}  // string | undefined — optional param
+      id={props.params.id} // string — the pattern guarantees it
+      tab={props.params.tab} // string | undefined — optional param
     />
   )
 });
@@ -242,8 +249,8 @@ Each parameter can be validated with a `MatchFilter` — an enum array, a regex,
 import { int, type MatchFilters } from "@solidjs/router";
 
 const filters: MatchFilters = {
-  parent: ["mom", "dad"],                                    // enum values
-  id: /^\d+$/,                                               // only numbers
+  parent: ["mom", "dad"], // enum values
+  id: /^\d+$/, // only numbers
   withHtmlExtension: (v: string) => v.length > 5 && v.endsWith(".html")
 };
 
@@ -254,7 +261,7 @@ const routes = defineRoutes([
 
 So `/users/mom/123/contact.html` matches, while `/users/aunt/123/contact.html` (invalid `parent`) and `/users/mom/me/contact.html` (non-numeric `id`) don't.
 
-The built-in `int` filter is *typed*: it constrains matching to integers at runtime and types the param as `number` at `paths` callsites:
+The built-in `int` filter is _typed_: it constrains matching to integers at runtime and types the param as `number` at `paths` callsites:
 
 ```tsx
 { path: "/users/:id", matchFilters: { id: int }, component: User }
@@ -362,6 +369,38 @@ The import only fires when something needs the subtree — hovering a link into
 
 Resolution is cached per thunk and append-only: the tree never changes shape after a subtree lands, it just gets more specific. Keep thunks deterministic — `() => import(...)` — rather than switching tables on runtime state.
 
+### Server Component Routes (experimental)
+
+Solid's experimental [server components](https://github.com/solidjs/solid/blob/main/documentation/solid-2.0/11-server-components.md) are `"use server"` functions that return a component. `serverRouteComponent` uses one as a route's `component` directly — the router owns the URL → call translation a client wrapper used to spell out:
+
+```tsx
+// views.tsx
+"use server";
+import type { ServerRouteArgs } from "@solidjs/router";
+
+export async function storyView({ params }: ServerRouteArgs<{ id: string }>) {
+  const story = await db.stories.get(params.id);
+  return props => (
+    <article>
+      <h1>{story.title}</h1>
+      {props.children}
+    </article>
+  );
+}
+
+// routes.ts
+defineRoute({ path: "/stories/:id", component: serverRouteComponent(storyView) });
+```
+
+The function is called with **derived** arguments, not a live location — the call's `(function, arguments)` address keys both the query cache and the frame store, so the args name exactly what the route depends on:
+
+- `params`: the params this route's pattern (and its ancestors') declares — never a child's, so a layout does not refetch when a leaf param changes. `defineRoute` checks them against the pattern.
+- `search`: the validated output of the route's [`search` schema](#typed-search-params), only when one is declared. Otherwise `undefined`, and the route never tracks the query string.
+
+The router mounts the resolved component with the outlet as `children`, so a server component can be a layout. The call is wrapped in `query` (keyed by the function id): link intent warms the same entry the render reads, actions revalidate it, and the [single-flight collector](#server-integration) reproduces it so a mutation's response carries the route's fresh markup. Argument changes deliver into the mounted boundary — it morphs in place rather than remounting.
+
+`children` is the only client position the router fills, and the helper's type says so: a server component that requires other props — event handlers, refs, named slots — is rejected. Those come from the client, so that route has a client half; write it as an ordinary route component around `dynamic()`. Interaction that lives on the server — form posts to server actions via `action={addTodo.url}` — needs no client component at all.
+
 ### File-System Routes
 
 The `@solidjs/router/fs` adapter turns a `file-routes` manifest into route definitions — the app imports the virtual module, the adapter maps it:
@@ -387,7 +426,7 @@ export const route = defineFileRoute("/blog/:id", {
 
 export default function Post(props: RouteProps<typeof route>) {
   props.params.id; // string
-  props.data;      // ReturnType of the preload above
+  props.data; // ReturnType of the preload above
 }
 ```
 
@@ -398,11 +437,11 @@ The pattern string is a typing witness — at runtime the manifest's path (from
 `paths` is a proxy inferred from the route tree. Property access descends into static segments, calls bind params, and it mirrors URL anatomy — params, then a search object, then a hash string:
 
 ```tsx
-paths.users(123)                          // ok — matchFilters flow into the callsite
-paths.users(2).settings                   // chainable into children
-paths.users(2, { tab: "x" }, "comments")  // "/users/2?tab=x#comments"
-paths.about()                             // zero-arg/search calls terminate to a plain string
-paths()                                   // "/" — the root
+paths.users(123); // ok — matchFilters flow into the callsite
+paths.users(2).settings; // chainable into children
+paths.users(2, { tab: "x" }, "comments"); // "/users/2?tab=x#comments"
+paths.about(); // zero-arg/search calls terminate to a plain string
+paths(); // "/" — the root
 ```
 
 Every node coerces via `toString`, so nodes drop straight into `href`, `navigate()`, and `redirect()` without explicit termination. Accessing a segment that doesn't exist in the tree, or binding a param with the wrong type, is a compile error.
@@ -413,14 +452,14 @@ There is no link component. Use `<a>`; the router intercepts same-origin clicks
 
 Behavior modifiers are attributes, so they work identically in client, server-rendered, and third-party markup:
 
-| attribute  | description                                                                    |
-| ---------- | ------------------------------------------------------------------------------ |
-| `replace`  | Replace the history entry instead of pushing                                   |
-| `noscroll` | Turn off scrolling to the top after navigation                                 |
+| attribute  | description                                                                                                     |
+| ---------- | --------------------------------------------------------------------------------------------------------------- |
+| `replace`  | Replace the history entry instead of pushing                                                                    |
+| `noscroll` | Turn off scrolling to the top after navigation                                                                  |
 | `state`    | JSON string [pushed](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) onto the history stack |
-| `preload`  | Set to `"false"` to opt this link out of hover/focus preloading                |
-| `link`     | Marks a router link when `explicitLinks` is enabled                            |
-| `target`   | Any value (e.g. `_self`) opts the anchor out of router handling                |
+| `preload`  | Set to `"false"` to opt this link out of hover/focus preloading                                                 |
+| `link`     | Marks a router link when `explicitLinks` is enabled                                                             |
+| `target`   | Any value (e.g. `_self`) opts the anchor out of router handling                                                 |
 
 ```tsx
 <a href={paths.login} replace>Log in</a>
@@ -431,9 +470,15 @@ Behavior modifiers are attributes, so they work identically in client, server-re
 Active and pending state is styled with CSS — one vocabulary for every kind of link:
 
 ```css
-nav a[aria-current="page"] { font-weight: 600; }        /* exact match */
-nav a[data-active]         { color: var(--accent); }    /* exact or prefix match */
-a[data-pending]            { opacity: 0.6; }            /* target of in-flight navigation */
+nav a[aria-current="page"] {
+  font-weight: 600;
+} /* exact match */
+nav a[data-active] {
+  color: var(--accent);
+} /* exact or prefix match */
+a[data-pending] {
+  opacity: 0.6;
+} /* target of in-flight navigation */
 ```
 
 (The root path only ever matches exactly, so `href={paths()}` doesn't light up on every page.)
@@ -471,10 +516,10 @@ const routes = defineRoutes([{ path: "/users/:id", component: User, preload: pre
 
 The preload function receives:
 
-| key      | type                                            | description                                                                                                                                                                                                                                     |
-| -------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| params   | object                                          | The route parameters (same value as `useParams()` inside the route component)                                                                                                                                                                    |
-| location | `{ pathname, search, hash, query, state, key }` | Path information (corresponds to [`useLocation()`](#uselocation))                                                                                                                                                                                |
+| key      | type                                               | description                                                                                                                                                       |
+| -------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| params   | object                                             | The route parameters (same value as `useParams()` inside the route component)                                                                                     |
+| location | `{ pathname, search, hash, query, state, key }`    | Path information (corresponds to [`useLocation()`](#uselocation))                                                                                                 |
 | intent   | `"initial" \| "navigate" \| "native" \| "preload"` | Why this is being called: `initial` — first render; `navigate` — router navigation; `native` — browser back/forward; `preload` — link hover/focus, not navigating |
 
 The factory-level `preload` option is the app-wide counterpart: it runs once per mount/request with the merged params of every match, and its result reaches the root render-prop as `props.data`.
@@ -513,12 +558,14 @@ const todos = createProjection(() => getTodos(), []);
 Keys support targeted invalidation:
 
 ```ts
-getUser.key;       // "users"
+getUser.key; // "users"
 getUser.keyFor(5); // "users[5]"
 ```
 
 Revalidate with the `revalidate` export or by setting `revalidate` keys on action responses — the whole key invalidates every entry for the query, `keyFor` invalidates one.
 
+A query may also redirect — a guard read that throws or returns `redirect()` (from `@solidjs/web`) navigates instead of resolving: same-origin targets navigate softly with `replace`, other origins leave the document, any `revalidate` keys on the response invalidate first, and the read itself stays pending so nothing renders the redirect as data. This holds for `"use server"` queries too, where the transport carries the redirect to the client rather than letting `fetch` follow it.
+
 ### `liveQuery` (experimental)
 
 `query`'s live sibling: a keyed query over a value-shaped stream. The function is an async iterable (typically an async generator server function) whose yields are successive **values of one logical query** — each yield is the current state, not an event — with the contract that it re-yields current state on every invocation:
@@ -553,7 +600,7 @@ The callable carries the `query` conventions (`key`, `keyFor`) plus a reactive `
 
 ### `action`
 
-A router action is *an action with a URL* — Solid's mutation primitive plus URL addressability, submission tracking, and response handling. Data helpers come from the router; response helpers (`redirect`, `reload`) come from `@solidjs/web` — they're protocol-level and work without the router:
+A router action is _an action with a URL_ — Solid's mutation primitive plus URL addressability, submission tracking, and response handling. Data helpers come from the router; response helpers (`redirect`, `reload`) come from `@solidjs/web` — they're protocol-level and work without the router:
 
 ```tsx
 import { action } from "@solidjs/router";
@@ -578,7 +625,10 @@ const updateUser = action(async (form: FormData) => {
 Actions only work with POST requests, so put `method="post"` on your form. Submitting forms get `aria-busy="true"` automatically while the action (including its revalidation) is in flight — the same CSS story as links:
 
 ```css
-form[aria-busy] button { pointer-events: none; opacity: 0.6; }
+form[aria-busy] button {
+  pointer-events: none;
+  opacity: 0.6;
+}
 ```
 
 Forms work without JavaScript: a real POST, a redirect back, and the result seeded into submission state through a one-shot flash cookie. Single-flight mutations are on by default — the mutation response carries the refreshed route data in the same round trip.
@@ -662,7 +712,7 @@ const routes = defineRoutes([
 
 ```tsx
 const [search, setSearch] = useSearchParams(paths.search);
-search.page;                          // number (parsed, not "2")
+search.page; // number (parsed, not "2")
 setSearch({ page: search.page + 1 }); // typed setter
 
 <a href={paths.search({ q: "solid", page: 2 })}>Search</a>; // typed builder
@@ -676,26 +726,26 @@ Without a schema, `useSearchParams()` behaves as before: raw string values, merg
 createRouter(config);
 ```
 
-| option          | type                       | description                                                                                            |
-| --------------- | -------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `routes`        | `RouteDefinition[]`        | The route tree — inline arrays infer literally; wrap extracted trees in `defineRoutes`                   |
-| `base`          | `string`                   | Base url to use for matching routes                                                                     |
-| `preload`       | `RoutePreloadFunc`         | App-wide preload: once per mount/request, result reaches the root render-prop as `props.data`           |
-| `history`       | `RouterHistory`            | History adapter; defaults to browser history on the client and the request URL on the server            |
-| `singleFlight`  | `boolean`                  | Single-flight mutations, default `true`                                                                 |
-| `actionBase`    | `string`                   | Root url for server actions, default `/_server`                                                         |
-| `preloadLinks`  | `boolean`                  | Preload route code/data on link hover and focus, default `true`                                         |
-| `explicitLinks` | `boolean`                  | Require the `link` attribute for router handling instead of intercepting all anchors, default `false`   |
-| `transformUrl`  | `(url: string) => string`  | Rewrite URLs before matching                                                                            |
+| option          | type                      | description                                                                                           |
+| --------------- | ------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `routes`        | `RouteDefinition[]`       | The route tree — inline arrays infer literally; wrap extracted trees in `defineRoutes`                |
+| `base`          | `string`                  | Base url to use for matching routes                                                                   |
+| `preload`       | `RoutePreloadFunc`        | App-wide preload: once per mount/request, result reaches the root render-prop as `props.data`         |
+| `history`       | `RouterHistory`           | History adapter; defaults to browser history on the client and the request URL on the server          |
+| `singleFlight`  | `boolean`                 | Single-flight mutations, default `true`                                                               |
+| `actionBase`    | `string`                  | Root url for server actions, default `/_server`                                                       |
+| `preloadLinks`  | `boolean`                 | Preload route code/data on link hover and focus, default `true`                                       |
+| `explicitLinks` | `boolean`                 | Require the `link` attribute for router handling instead of intercepting all anchors, default `false` |
+| `transformUrl`  | `(url: string) => string` | Rewrite URLs before matching                                                                          |
 
 The returned instance is the provider component and carries the static surface:
 
-| member    | description                                                                                     |
-| --------- | ------------------------------------------------------------------------------------------------ |
-| `paths`   | The [typed path proxy](#typed-paths)                                                             |
-| `match`   | Pure matching against an arbitrary URL — no rendering or request context; root→leaf, `[]` if none |
-| `routes`  | The config tree                                                                                   |
-| `config`  | The full config — lets server integrations consume the instance directly                          |
+| member   | description                                                                                       |
+| -------- | ------------------------------------------------------------------------------------------------- |
+| `paths`  | The [typed path proxy](#typed-paths)                                                              |
+| `match`  | Pure matching against an arbitrary URL — no rendering or request context; root→leaf, `[]` if none |
+| `routes` | The config tree                                                                                   |
+| `config` | The full config — lets server integrations consume the instance directly                          |
 
 ## Router Primitives
 
@@ -706,7 +756,7 @@ Hooks read the live session off router context.
 Retrieves a reactive, store-like object of the current route's path parameters. Pass a paths node for typing:
 
 ```tsx
-const params = useParams();            // Params (strings)
+const params = useParams(); // Params (strings)
 const params = useParams(paths.users); // { id: string } — typed from the tree
 ```
 
@@ -754,7 +804,7 @@ In Solid's dev and observe builds the router also declares every navigation to t
 
 ### useMatch
 
-Tests a path *pattern you supply* against the current location; returns a memo of match information or `undefined`. It never consults the route tree — the pattern doesn't have to correspond to a defined route. The match's `params` are typed from the pattern, and a typed path node works too (a concrete URL — useful for "am I here" checks):
+Tests a path _pattern you supply_ against the current location; returns a memo of match information or `undefined`. It never consults the route tree — the pattern doesn't have to correspond to a defined route. The match's `params` are typed from the pattern, and a typed path node works too (a concrete URL — useful for "am I here" checks):
 
 ```tsx
 const match = useMatch(() => "/admin/*rest");
@@ -766,7 +816,7 @@ const here = useMatch(() => paths.users(2));
 
 ### useRouteMatches
 
-Returns an accessor of the router's *resolved* matches for the current location — the chain of route definitions producing the current render, outermost first. This is the counterpart to `useMatch`: one reflects the route tree, the other tests a pattern. Useful for reading `info` metadata:
+Returns an accessor of the router's _resolved_ matches for the current location — the chain of route definitions producing the current render, outermost first. This is the counterpart to `useMatch`: one reflects the route tree, the other tests a pattern. Useful for reading `info` metadata:
 
 ```tsx
 const matches = useRouteMatches();
@@ -888,7 +938,7 @@ This guide maps from the stable 0.x releases (Solid 1). 1.0 removes the componen
 <Router root={App}>
   <Route path="/users" component={Users} />
   <Route path="/users/:id" component={User} />
-</Router>
+</Router>;
 
 // 1.0
 const Router = createRouter({
@@ -898,7 +948,7 @@ const Router = createRouter({
   ]
 });
 
-<Router>{props => <App {...props} />}</Router>
+<Router>{props => <App {...props} />}</Router>;
 ```
 
 - `<HashRouter>` → `createRouter({ routes, history: hashHistory() })`

package/dist/data/query.js

@@ -1,15 +1,20 @@
 import { createSignal, getObserver, getOwner, onCleanup, sharedConfig, untrack } from "solid-js";
 // Everything server-function-shaped comes off the CORE entry: detection
 // (isServerFunction/getServerFunctionMetadata, registered-symbol reads) and
-// the late-bound RPC seam (getServerFunctionRPC). The server-functions
-// entry itself — the fetch transport + the seroval codec behind it — is
-// deliberately NOT imported here: query() is in every router app's eager
-// graph, and a static import made every zero-server-function app ship
+// the late-bound RPC seam (getServerFunctionRPC). The transport itself —
+// the fetch RPC client + the seroval codec behind it — is deliberately NOT
+// imported here: query() is in every router app's eager graph, and a static
+// import of `decodeResponse` made every zero-server-function app ship
 // ~9 KB gz of codec it could never invoke. The transport registers itself
 // into the seam when a `'use server'` reference is created (compiled
 // output, module scope), so by the time a server function can reach
 // query() the seam is filled; plain-fetch apps read undefined forever.
 import { getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, isResponseEnvelope, isServer, isServerFunction, REVALIDATE_HEADER } from "@solidjs/web";
+// The redirect carrier's name and decoder are the exception: two pure,
+// dependency-free bindings off a `sideEffects: false` entry, so they
+// tree-shake to a few hundred bytes without dragging the codec in (the same
+// bindings action.ts already imports statically).
+import { decodeRedirectHeaderValue, REDIRECT_HEADER } from "@solidjs/web/server-functions";
 import { useRouter, getIntent, getInPreloadFn } from "../routing.js";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
@@ -62,7 +67,12 @@ export function revalidate(key, force = true) {
     const now = Date.now();
     cacheKeyOp(key, entry => {
         force && (entry[0] = 0); //force cache miss
-        entry[4][1](now); // retrigger live signals
+        // retrigger live signals. The version is the entry's fetch stamp, and
+        // a signal write of an equal value is a no-op — an entry fetched within
+        // this same millisecond (a mount whose redirect lands before the clock
+        // ticks) would otherwise never be told to refetch, and the surviving
+        // consumer paints stale. A sweep must notify unconditionally.
+        entry[4][1](v => (v === now ? now + 1 : now));
     });
     const keys = key === undefined ? undefined : Array.isArray(key) ? key : [key];
     for (const hook of revalidateHooks)
@@ -251,7 +261,27 @@ export function query(fn, name) {
                                 e.response.headers.set(key, value);
                         }
                     }
-                    const url = v.headers.get(LocationHeader);
+                    let url = v.headers.get(LocationHeader);
+                    // A `"use server"` redirect reaches a client-side read masked: the
+                    // transport answers scripted callers with a 200, drops `Location`
+                    // and carries "<status> <absolute-url>" in REDIRECT_HEADER instead.
+                    // Decode it with the runtime's own reader, as action() does. The
+                    // carrier arrives RESOLVED to an absolute url, so same-origin vs
+                    // cross-origin is a real origin comparison: same-origin folds to
+                    // a path the soft branch below navigates under the router, any
+                    // other origin keeps its href and the document goes with it. This
+                    // stays synchronous on purpose — navigate runs in the same tick as
+                    // the `Location` branch would, so the transition semantics match.
+                    if (url === null && !isServer && v.headers.has(REDIRECT_HEADER)) {
+                        const carried = decodeRedirectHeaderValue(v.headers.get(REDIRECT_HEADER));
+                        if (carried) {
+                            const target = new URL(carried.url);
+                            url =
+                                target.origin === window.location.origin
+                                    ? target.pathname + target.search + target.hash
+                                    : target.href;
+                        }
+                    }
                     if (url !== null) {
                         // invalidate the redirect's revalidation keys before navigating so
                         // the destination's preloads see the miss and fetch fresh (#580 thread).

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate
 export type { LinkState } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export { int } from "./paths.js";
+export { serverRouteComponent } from "./serverRouteComponent.js";
 export type { RoutePaths, PathParamsOf, PathEnd, TypedMatchFilter, DefaultSearchTypes } from "./paths.js";
 export * from "./data/index.js";
-export type { Location, LocationChange, LocationWrite, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteComponent, RouteParams, RouteProps, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, SetSearchParams, Submission, BeforeLeaveEventArgs, TypedPath, TypedSearchPath, StandardSchemaV1 } from "./types.js";
+export type { Location, LocationChange, LocationWrite, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteComponent, RouteParams, RouteProps, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, SetSearchParams, ServerRouteArgs, ServerRouteFunction, Submission, BeforeLeaveEventArgs, TypedPath, TypedSearchPath, StandardSchemaV1 } from "./types.js";

package/dist/index.js

@@ -1,6 +1,6 @@
 import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, isPending, DEV, latest, createComponent, createRoot, Show, createEffect, sharedConfig, OBSERVE, onSettled, getObserver, $TRACK, action as action$1 } from 'solid-js';
-import { registerElementClaim, delegateEvents, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, isResponseEnvelope, REVALIDATE_HEADER } from '@solidjs/web';
-import { subscribeFlightData, decodeRedirectHeaderValue, REDIRECT_HEADER, decodeResponsePayload, parseServerFunctionActionUrl, createServerReference } from '@solidjs/web/server-functions';
+import { registerElementClaim, delegateEvents, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, isResponseEnvelope, REVALIDATE_HEADER, dynamic } from '@solidjs/web';
+import { REDIRECT_HEADER, decodeRedirectHeaderValue, subscribeFlightData, decodeResponsePayload, parseServerFunctionActionUrl, createServerReference } from '@solidjs/web/server-functions';
 import { decodeFlashCookie } from '@solidjs/web/server-functions/server';
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
@@ -517,6 +517,74 @@ function createPathsProxy(renderPath = p => p, base = "") {
   return node(normalizePath(base));
 }
 
+// The light half of server component routes: the brand the router core reads
+// off a route `component`, and the derivation of a route's call arguments.
+// Deliberately free of `query`/`dynamic` — routing.ts imports this module,
+// and routing.ts is in every app's eager graph. The heavy half (the helper
+// that builds the branded component) lives in serverRouteComponent.ts and only
+// enters a bundle when an app calls `serverRouteComponent()`.
+
+const SERVER_ROUTE = Symbol("solid-router.serverRoute");
+
+/**
+ * What `serverRouteComponent()` attaches to the route component it returns, and
+ * what the router core drives it through: `call` is the query-wrapped server
+ * function (preload and single-flight collection warm/collect through it),
+ * `render` mounts the resolved server component for the current args with
+ * the route's props (`children` is the outlet).
+ */
+
+/** The brand carried by a route component built with `serverRouteComponent()`, if any. */
+function serverRouteOf(component) {
+  return typeof component === "function" ? component[SERVER_ROUTE] : undefined;
+}
+
+/**
+ * Derive a server route's call arguments from a match: the match's params
+ * (this route's pattern and its ancestors' — never a child's) and the route's
+ * `search` schema output when one is declared. Reads `query` only when a
+ * schema exists, so a search-agnostic route never tracks the query string.
+ */
+function serverRouteArgs(route, params, query) {
+  const schema = route.key?.search;
+  let search = undefined;
+  if (schema) {
+    const outcome = schema["~standard"].validate({
+      ...query
+    });
+    if (outcome instanceof Promise) throw new Error("Async Standard Schema validation is not supported for search params");
+    // Issues leave the raw values in place, matching useSearchParams: search
+    // strings are user input, so defaults belong in the schema itself.
+    search = outcome.issues ? {
+      ...query
+    } : outcome.value;
+  }
+  return {
+    params: {
+      ...params
+    },
+    search
+  };
+}
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  for (const k of ka) if (a[k] !== b[k]) return false;
+  return true;
+}
+
+/**
+ * Structural equality for the args memo: a navigation produces fresh match
+ * objects even when this level's params are unchanged, and an equal call
+ * must not re-enter the source (and refetch).
+ */
+function serverRouteArgsEqual(a, b) {
+  return shallowEqual(a.params, b.params) && shallowEqual(a.search, b.search);
+}
+
 const MAX_REDIRECTS = 100;
 
 /**
@@ -1481,21 +1549,29 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       } = matches[match];
       route.component && route.component.preload && route.component.preload();
       const {
-        preload
+        preload,
+        component
       } = route;
       inPreloadFn = true;
-      preloadData && preload && runWithOwner(getContext(), () => preload({
-        params,
-        location: {
-          pathname: url.pathname,
-          search: url.search,
-          hash: url.hash,
-          query: extractSearchParams(url),
-          state: null,
-          key: ""
-        },
-        intent: "preload"
-      }));
+      preloadData && runWithOwner(getContext(), () => {
+        const query = extractSearchParams(url);
+        // A server component route's data IS its call: warm the same
+        // query entry the render will read, under the same derived args.
+        const server = serverRouteOf(component);
+        server && server.call(serverRouteArgs(route, params, query));
+        preload && preload({
+          params,
+          location: {
+            pathname: url.pathname,
+            search: url.search,
+            hash: url.hash,
+            query,
+            state: null,
+            key: ""
+          },
+          intent: "preload"
+        });
+      });
       inPreloadFn = false;
     }
     preloadIntent = prevIntent;
@@ -1551,14 +1627,30 @@ function createRouteContext(router, parent, outlet, match, matches = () => [matc
     pattern,
     params,
     path,
-    outlet: () => component ? createComponent(component, {
-      params,
-      location,
-      data,
-      get children() {
-        return outlet();
+    outlet: () => {
+      if (!component) return outlet();
+      const routeProps = {
+        params,
+        location,
+        data,
+        get children() {
+          return outlet();
+        }
+      };
+      // A `serverRouteComponent()` route: the router derives the call from
+      // the match — THIS level's params (never a child's) and the declared
+      // search output — and mounts through the brand. Structural equality
+      // keeps a navigation that leaves this level's args unchanged from
+      // re-entering the call. See serverRouteComponent.ts.
+      const server = serverRouteOf(component);
+      if (server) {
+        const args = createMemo(() => serverRouteArgs(match().route, match().params, location.query), {
+          equals: serverRouteArgsEqual
+        });
+        return server.render(args, routeProps);
       }
-    }) : outlet(),
+      return createComponent(component, routeProps);
+    },
     resolvePath(to) {
       return resolvePath(base.path(), to, path());
     }
@@ -1717,6 +1809,9 @@ function dataOnly(event, routerState, branches) {
       route,
       params
     } = matches[match];
+    // a server component route's markup is collected like any query result
+    const server = serverRouteOf(route.component);
+    server && server.call(serverRouteArgs(route, params, routerState.location.query));
     route.preload && route.preload({
       params,
       location: routerState.location,
@@ -2457,7 +2552,12 @@ function revalidate(key, force = true) {
   const now = Date.now();
   cacheKeyOp(key, entry => {
     force && (entry[0] = 0); //force cache miss
-    entry[4][1](now); // retrigger live signals
+    // retrigger live signals. The version is the entry's fetch stamp, and
+    // a signal write of an equal value is a no-op — an entry fetched within
+    // this same millisecond (a mount whose redirect lands before the clock
+    // ticks) would otherwise never be told to refetch, and the surviving
+    // consumer paints stale. A sweep must notify unconditionally.
+    entry[4][1](v => v === now ? now + 1 : now);
   });
   const keys = key === undefined ? undefined : Array.isArray(key) ? key : [key];
   for (const hook of revalidateHooks) hook(keys, force);
@@ -2619,7 +2719,25 @@ function query(fn, name) {
               if (key == "set-cookie") e.response.headers.append("set-cookie", value);else e.response.headers.set(key, value);
             }
           }
-          const url = v.headers.get(LocationHeader);
+          let url = v.headers.get(LocationHeader);
+
+          // A `"use server"` redirect reaches a client-side read masked: the
+          // transport answers scripted callers with a 200, drops `Location`
+          // and carries "<status> <absolute-url>" in REDIRECT_HEADER instead.
+          // Decode it with the runtime's own reader, as action() does. The
+          // carrier arrives RESOLVED to an absolute url, so same-origin vs
+          // cross-origin is a real origin comparison: same-origin folds to
+          // a path the soft branch below navigates under the router, any
+          // other origin keeps its href and the document goes with it. This
+          // stays synchronous on purpose — navigate runs in the same tick as
+          // the `Location` branch would, so the transition semantics match.
+          if (url === null && !isServer && v.headers.has(REDIRECT_HEADER)) {
+            const carried = decodeRedirectHeaderValue(v.headers.get(REDIRECT_HEADER));
+            if (carried) {
+              const target = new URL(carried.url);
+              url = target.origin === window.location.origin ? target.pathname + target.search + target.hash : target.href;
+            }
+          }
           if (url !== null) {
             // invalidate the redirect's revalidation keys before navigating so
             // the destination's preloads see the miss and fetch fresh (#580 thread).
@@ -2735,6 +2853,91 @@ function isPlainObject(obj) {
   return obj != null && typeof obj === "object" && (!(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype);
 }
 
+// Server component routes (experimental — rides the experimental server
+// components surface in @solidjs/web; the arg shape may change).
+//
+// `serverRouteComponent(fn)` turns a `"use server"` function that returns a
+// component into a route `component`. It replaces the client wrapper a
+// server-component route used to need:
+//
+//   // before: a client component exists only to make the call
+//   component: props => {
+//     const View = dynamic(() => getStory(props.params.id));
+//     return <View>{props.children}</View>;
+//   }
+//   // after
+//   component: serverRouteComponent(storyRoute)   // async ({ params }) => { "use server"; ... }
+//
+// The mechanism is the same one the wrapper used — `query` for cache identity
+// (preload participation, single-flight collection, revalidation after
+// actions) and `dynamic` for the equals-gated mount that morphs in place —
+// applied by the router rather than restated per route. What the router adds
+// is the URL → call translation: it derives the call's arguments from the
+// match and drives the same call from hover preload and from the single
+// flight collector, so one entry serves render, preload, and mutation
+// responses.
+//
+// Arguments are derived, not read from a live location: the call's
+// `(function, arguments)` address keys the frame store and the query cache,
+// so the args must name precisely what the route depends on. They are the
+// params this route's pattern (with its ancestors') declares — never a
+// child's, so a layout does not refetch when a leaf param changes — and, only
+// when the route declares a `search` schema, its validated output.
+//
+// The router fills exactly one client position: `children`, with the outlet.
+// A server component that takes other client positions — handlers, refs,
+// named slots — has a client half, and that half is a client component; the
+// helper does not pretend otherwise. Write the wrapper for that route.
+/**
+ * Use a server component as a route (experimental). `fn` is a `"use server"`
+ * function taking the router-derived {@link ServerRouteArgs} — this route's
+ * `params`, and `search` when the route declares a schema — and resolving to
+ * a server component. The router mounts it with the outlet as `children`,
+ * warms the same call on link intent, and collects it for single-flight
+ * mutation responses.
+ *
+ * `children` is the only client position the router fills, so the server
+ * component may declare no other. One that takes client handlers, refs, or
+ * slots has a client half — write an ordinary route component for it.
+ *
+ * ```ts
+ * defineRoute({ path: "/stories/:id", component: serverRouteComponent(storyView) });
+ * ```
+ */
+function serverRouteComponent(fn) {
+  const reference = fn;
+  // One query entry per reference: the cache key (the function id) has to
+  // agree between the render that mounts the route, the hover preload that
+  // warms it, and the single-flight collector that re-produces its region.
+  // A server function reference always carries its build-stable id; a
+  // hand-built brand (tests) falls back to the function name.
+  const call = query(reference, "route:" + (reference.id || reference.name));
+
+  // The component itself is the fallback for a mount the router core does
+  // not drive (a plain `createComponent`): it has only the merged params to
+  // go on, so it calls with those. The core mounts through the brand with
+  // this level's params instead.
+  const route = routeProps => render(() => ({
+    params: {
+      ...routeProps.params
+    },
+    search: undefined
+  }), routeProps);
+  function render(args, routeProps) {
+    const View = dynamic(() => call(args()));
+    return createComponent(View, {
+      get children() {
+        return routeProps.children;
+      }
+    });
+  }
+  route[SERVER_ROUTE] = {
+    call,
+    render
+  };
+  return route;
+}
+
 const submitHooksSymbol = Symbol("routerActionSubmitHooks");
 const settledHooksSymbol = Symbol("routerActionSettledHooks");
 const invokeSymbol = Symbol("routerActionInvoke");
@@ -3503,4 +3706,4 @@ var serverForms = /*#__PURE__*/Object.freeze({
   submitServerForm: submitServerForm
 });
 
-export { RouterContextObj as RouterContext, mergeSearchString as _mergeSearchString, action, browserHistory, createBeforeLeave, createRouter, defineRoute, defineRoutes, hashHistory, int, liveQuery, memoryHistory, query, revalidate, useAction, useBeforeLeave, useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useRouteMatches, useSearchParams, useSubmissions };
+export { RouterContextObj as RouterContext, mergeSearchString as _mergeSearchString, action, browserHistory, createBeforeLeave, createRouter, defineRoute, defineRoutes, hashHistory, int, liveQuery, memoryHistory, query, revalidate, serverRouteComponent, useAction, useBeforeLeave, useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useRouteMatches, useSearchParams, useSubmissions };

package/dist/index.jsx

@@ -3,4 +3,5 @@ export * from "./lifecycle.js";
 export { useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, usePreloadRoute, useParams, useResolvedPath, useRouteMatches, useSearchParams, RouterContextObj as RouterContext } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export { int } from "./paths.js";
+export { serverRouteComponent } from "./serverRouteComponent.js";
 export * from "./data/index.js";

package/dist/routers/components.jsx

@@ -2,6 +2,7 @@
 import { createMemo, createRoot, getOwner, onCleanup, runWithOwner, untrack, Show } from "solid-js";
 import { getRequestEvent, isServer } from "@solidjs/web";
 import { createRouteContext, getIntent, getRouteMatches, resolveLazySubtree, RouteContextObj, setInPreloadFn, unresolvedLazyMatches } from "../routing.js";
+import { serverRouteArgs, serverRouteOf } from "../serverRouteShared.js";
 export function Root(props) {
     const location = props.routerState.location;
     const params = props.routerState.params;
@@ -129,6 +130,9 @@ function dataOnly(event, routerState, branches) {
         if (!prevMatches[match] || matches[match].route !== prevMatches[match].route)
             event.router.dataOnly = true;
         const { route, params } = matches[match];
+        // a server component route's markup is collected like any query result
+        const server = serverRouteOf(route.component);
+        server && server.call(serverRouteArgs(route, params, routerState.location.query));
         route.preload &&
             route.preload({
                 params,

package/dist/routing.js

@@ -6,6 +6,7 @@ import { createComponent, createContext, createMemo, createSignal, getOwner, isP
 import { clearFlashCookie, getRequestEvent, hasFlashCookie, isServer } from "@solidjs/web";
 import { mockBase, comparablePath, createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils.js";
 import { HREF } from "./paths.js";
+import { serverRouteOf, serverRouteArgs, serverRouteArgsEqual } from "./serverRouteShared.js";
 const MAX_REDIRECTS = 100;
 /**
  * Resolves a write against `headed`, the location the router is heading to
@@ -900,22 +901,29 @@ export function createRouterContext(integration, branches, getContext, options =
             route.component &&
                 route.component.preload &&
                 route.component.preload();
-            const { preload } = route;
+            const { preload, component } = route;
             inPreloadFn = true;
             preloadData &&
-                preload &&
-                runWithOwner(getContext(), () => preload({
-                    params,
-                    location: {
-                        pathname: url.pathname,
-                        search: url.search,
-                        hash: url.hash,
-                        query: extractSearchParams(url),
-                        state: null,
-                        key: ""
-                    },
-                    intent: "preload"
-                }));
+                runWithOwner(getContext(), () => {
+                    const query = extractSearchParams(url);
+                    // A server component route's data IS its call: warm the same
+                    // query entry the render will read, under the same derived args.
+                    const server = serverRouteOf(component);
+                    server && server.call(serverRouteArgs(route, params, query));
+                    preload &&
+                        preload({
+                            params,
+                            location: {
+                                pathname: url.pathname,
+                                search: url.search,
+                                hash: url.hash,
+                                query,
+                                state: null,
+                                key: ""
+                            },
+                            intent: "preload"
+                        });
+                });
             inPreloadFn = false;
         }
         preloadIntent = prevIntent;
@@ -965,16 +973,29 @@ export function createRouteContext(router, parent, outlet, match, matches = () =
         pattern,
         params,
         path,
-        outlet: () => component
-            ? createComponent(component, {
+        outlet: () => {
+            if (!component)
+                return outlet();
+            const routeProps = {
                 params,
                 location,
                 data,
                 get children() {
                     return outlet();
                 }
-            })
-            : outlet(),
+            };
+            // A `serverRouteComponent()` route: the router derives the call from
+            // the match — THIS level's params (never a child's) and the declared
+            // search output — and mounts through the brand. Structural equality
+            // keeps a navigation that leaves this level's args unchanged from
+            // re-entering the call. See serverRouteComponent.ts.
+            const server = serverRouteOf(component);
+            if (server) {
+                const args = createMemo(() => serverRouteArgs(match().route, match().params, location.query), { equals: serverRouteArgsEqual });
+                return server.render(args, routeProps);
+            }
+            return createComponent(component, routeProps);
+        },
         resolvePath(to) {
             return resolvePath(base.path(), to, path());
         }

package/dist/server.js

@@ -24,6 +24,7 @@
 import { provideRequestEvent } from "@solidjs/web/storage";
 import { createBranches, getRouteMatches, mergeParams, peekLazySubtrees, resolveLazySubtree } from "./routing.js";
 import { extractSearchParams } from "./utils.js";
+import { serverRouteArgs, serverRouteOf } from "./serverRouteShared.js";
 // the instance is the provider component, so it (unlike an options object) is a function
 function isRouterInstance(options) {
     return typeof options === "function";
@@ -146,6 +147,11 @@ function runPreloads(event, branches, url, previousUrl, rootPreload) {
         if (!prevMatches[match] || matches[match].route !== prevMatches[match].route)
             event.router.dataOnly = true;
         const { route, params } = matches[match];
+        // A server component route's markup is collected like any query result:
+        // the same call (function id + derived args) the client is showing, so
+        // the response's region addresses what is mounted.
+        const server = serverRouteOf(route.component);
+        server && server.call(serverRouteArgs(route, params, location.query));
         route.preload &&
             route.preload({
                 params,

package/dist/serverRouteComponent.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from "solid-js";
+import type { Params, RouteSectionProps, ServerRouteFunction } from "./types.js";
+/**
+ * Use a server component as a route (experimental). `fn` is a `"use server"`
+ * function taking the router-derived {@link ServerRouteArgs} — this route's
+ * `params`, and `search` when the route declares a schema — and resolving to
+ * a server component. The router mounts it with the outlet as `children`,
+ * warms the same call on link intent, and collects it for single-flight
+ * mutation responses.
+ *
+ * `children` is the only client position the router fills, so the server
+ * component may declare no other. One that takes client handlers, refs, or
+ * slots has a client half — write an ordinary route component for it.
+ *
+ * ```ts
+ * defineRoute({ path: "/stories/:id", component: serverRouteComponent(storyView) });
+ * ```
+ */
+export declare function serverRouteComponent<P extends Params = Params, S = undefined>(fn: ServerRouteFunction<P, S>): Component<RouteSectionProps<unknown, P>>;

package/dist/serverRouteComponent.js

@@ -0,0 +1,79 @@
+// Server component routes (experimental — rides the experimental server
+// components surface in @solidjs/web; the arg shape may change).
+//
+// `serverRouteComponent(fn)` turns a `"use server"` function that returns a
+// component into a route `component`. It replaces the client wrapper a
+// server-component route used to need:
+//
+//   // before: a client component exists only to make the call
+//   component: props => {
+//     const View = dynamic(() => getStory(props.params.id));
+//     return <View>{props.children}</View>;
+//   }
+//   // after
+//   component: serverRouteComponent(storyRoute)   // async ({ params }) => { "use server"; ... }
+//
+// The mechanism is the same one the wrapper used — `query` for cache identity
+// (preload participation, single-flight collection, revalidation after
+// actions) and `dynamic` for the equals-gated mount that morphs in place —
+// applied by the router rather than restated per route. What the router adds
+// is the URL → call translation: it derives the call's arguments from the
+// match and drives the same call from hover preload and from the single
+// flight collector, so one entry serves render, preload, and mutation
+// responses.
+//
+// Arguments are derived, not read from a live location: the call's
+// `(function, arguments)` address keys the frame store and the query cache,
+// so the args must name precisely what the route depends on. They are the
+// params this route's pattern (with its ancestors') declares — never a
+// child's, so a layout does not refetch when a leaf param changes — and, only
+// when the route declares a `search` schema, its validated output.
+//
+// The router fills exactly one client position: `children`, with the outlet.
+// A server component that takes other client positions — handlers, refs,
+// named slots — has a client half, and that half is a client component; the
+// helper does not pretend otherwise. Write the wrapper for that route.
+import { dynamic } from "@solidjs/web";
+import { createComponent } from "solid-js";
+import { query } from "./data/query.js";
+import { SERVER_ROUTE } from "./serverRouteShared.js";
+/**
+ * Use a server component as a route (experimental). `fn` is a `"use server"`
+ * function taking the router-derived {@link ServerRouteArgs} — this route's
+ * `params`, and `search` when the route declares a schema — and resolving to
+ * a server component. The router mounts it with the outlet as `children`,
+ * warms the same call on link intent, and collects it for single-flight
+ * mutation responses.
+ *
+ * `children` is the only client position the router fills, so the server
+ * component may declare no other. One that takes client handlers, refs, or
+ * slots has a client half — write an ordinary route component for it.
+ *
+ * ```ts
+ * defineRoute({ path: "/stories/:id", component: serverRouteComponent(storyView) });
+ * ```
+ */
+export function serverRouteComponent(fn) {
+    const reference = fn;
+    // One query entry per reference: the cache key (the function id) has to
+    // agree between the render that mounts the route, the hover preload that
+    // warms it, and the single-flight collector that re-produces its region.
+    // A server function reference always carries its build-stable id; a
+    // hand-built brand (tests) falls back to the function name.
+    const call = query(reference, "route:" + (reference.id || reference.name));
+    // The component itself is the fallback for a mount the router core does
+    // not drive (a plain `createComponent`): it has only the merged params to
+    // go on, so it calls with those. The core mounts through the brand with
+    // this level's params instead.
+    const route = (routeProps) => render(() => ({ params: { ...routeProps.params }, search: undefined }), routeProps);
+    function render(args, routeProps) {
+        const View = dynamic(() => call(args()));
+        return createComponent(View, {
+            get children() {
+                return routeProps.children;
+            }
+        });
+    }
+    route[SERVER_ROUTE] = { call, render };
+    return route;
+}

package/dist/serverRouteShared.d.ts

@@ -0,0 +1,33 @@
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import type { Params, RouteDescription, RouteSectionProps, SearchParams, ServerRouteArgs } from "./types.js";
+export declare const SERVER_ROUTE: unique symbol;
+/**
+ * What `serverRouteComponent()` attaches to the route component it returns, and
+ * what the router core drives it through: `call` is the query-wrapped server
+ * function (preload and single-flight collection warm/collect through it),
+ * `render` mounts the resolved server component for the current args with
+ * the route's props (`children` is the outlet).
+ */
+export interface ServerRouteBrand {
+    call: (args: ServerRouteArgs<Params, unknown>) => unknown;
+    render: (args: Accessor<ServerRouteArgs<Params, unknown>>, route: RouteSectionProps) => JSX.Element;
+}
+export type BrandedRouteComponent = Function & {
+    [SERVER_ROUTE]?: ServerRouteBrand;
+};
+/** The brand carried by a route component built with `serverRouteComponent()`, if any. */
+export declare function serverRouteOf(component: unknown): ServerRouteBrand | undefined;
+/**
+ * Derive a server route's call arguments from a match: the match's params
+ * (this route's pattern and its ancestors' — never a child's) and the route's
+ * `search` schema output when one is declared. Reads `query` only when a
+ * schema exists, so a search-agnostic route never tracks the query string.
+ */
+export declare function serverRouteArgs(route: RouteDescription, params: Params, query: SearchParams): ServerRouteArgs<Params, unknown>;
+/**
+ * Structural equality for the args memo: a navigation produces fresh match
+ * objects even when this level's params are unchanged, and an equal call
+ * must not re-enter the source (and refetch).
+ */
+export declare function serverRouteArgsEqual(a: ServerRouteArgs<Params, unknown>, b: ServerRouteArgs<Params, unknown>): boolean;

package/dist/serverRouteShared.js

@@ -0,0 +1,48 @@
+export const SERVER_ROUTE = Symbol("solid-router.serverRoute");
+/** The brand carried by a route component built with `serverRouteComponent()`, if any. */
+export function serverRouteOf(component) {
+    return typeof component === "function"
+        ? component[SERVER_ROUTE]
+        : undefined;
+}
+/**
+ * Derive a server route's call arguments from a match: the match's params
+ * (this route's pattern and its ancestors' — never a child's) and the route's
+ * `search` schema output when one is declared. Reads `query` only when a
+ * schema exists, so a search-agnostic route never tracks the query string.
+ */
+export function serverRouteArgs(route, params, query) {
+    const schema = route.key?.search;
+    let search = undefined;
+    if (schema) {
+        const outcome = schema["~standard"].validate({ ...query });
+        if (outcome instanceof Promise)
+            throw new Error("Async Standard Schema validation is not supported for search params");
+        // Issues leave the raw values in place, matching useSearchParams: search
+        // strings are user input, so defaults belong in the schema itself.
+        search = outcome.issues ? { ...query } : outcome.value;
+    }
+    return { params: { ...params }, search };
+}
+function shallowEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || typeof a !== "object" || typeof b !== "object")
+        return false;
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length)
+        return false;
+    for (const k of ka)
+        if (a[k] !== b[k])
+            return false;
+    return true;
+}
+/**
+ * Structural equality for the args memo: a navigation produces fresh match
+ * objects even when this level's params are unchanged, and an equal call
+ * must not re-enter the source (and refetch).
+ */
+export function serverRouteArgsEqual(a, b) {
+    return shallowEqual(a.params, b.params) && shallowEqual(a.search, b.search);
+}

package/dist/types.d.ts

@@ -141,6 +141,24 @@ export interface RouteSectionProps<T = unknown, P extends Params = Params> {
     children?: JSX.Element;
 }
 export type RouteSectionComponent<T = unknown, P extends Params = Params> = Component<RouteSectionProps<T, P>> | Component<Omit<RouteSectionProps<T, P>, "children">> | Component<{}>;
+/**
+ * What a server component route is called with (experimental): the params
+ * the route's pattern (and its ancestors') declares, plus — only when the
+ * route declares a `search` schema — that schema's validated output.
+ */
+export interface ServerRouteArgs<P extends Params = Params, S = undefined> {
+    params: P;
+    search: S;
+}
+/**
+ * The shape `serverRouteComponent()` accepts (experimental): a `"use server"`
+ * function taking the router-derived {@link ServerRouteArgs} and resolving
+ * to a server component whose only client position is `children` — the route
+ * outlet, which the router fills.
+ */
+export type ServerRouteFunction<P extends Params = Params, S = undefined> = (args: ServerRouteArgs<P, S>) => Promise<Component<{
+    children?: JSX.Element;
+}>>;
 declare const ROUTE_PATTERN: unique symbol;
 export interface TypedRouteConfig<S extends string = string> {
     readonly [ROUTE_PATTERN]: S;
@@ -341,7 +359,13 @@ export type Submission<T, U> = {
 export interface MaybePreloadableComponent extends Component {
     preload?: () => void;
 }
-export type CacheEntry = [number, Promise<any>, any, Intent | undefined, Signal<number> & {
-    count: number;
-}];
+export type CacheEntry = [
+    number,
+    Promise<any>,
+    any,
+    Intent | undefined,
+    Signal<number> & {
+        count: number;
+    }
+];
 export type NarrowResponse<T> = T extends ResponseEnvelope<infer U> ? U : Exclude<T, Response>;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "2.0.0-next.25",
+  "version": "2.0.0-next.27",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",