@funstack/router 0.0.8 → 0.0.9

package/dist/docs/LearnSsrWithLoadersPage.tsx

@@ -0,0 +1,141 @@
+import { CodeBlock } from "../components/CodeBlock.js";
+
+export function LearnSsrWithLoadersPage() {
+  return (
+    <div className="learn-content">
+      <h2>SSR with Loaders</h2>
+
+      <p className="page-intro">
+        When you have a server runtime that can execute loaders at request time,
+        set <code>runLoaders: true</code> in the <code>ssr</code> config to
+        produce fully rendered HTML &mdash; including loader data &mdash; on the
+        server.
+      </p>
+
+      <section>
+        <h3>
+          How <code>runLoaders</code> Works
+        </h3>
+        <p>
+          As described in the{" "}
+          <a href="/learn/ssr/static-site-generation">Static Site Generation</a>{" "}
+          guide, the <code>ssr</code> prop enables path-based route matching
+          during SSR. By default, routes with loaders are skipped. Setting{" "}
+          <code>runLoaders: true</code> changes this: those routes are matched
+          and their loaders execute during SSR.
+        </p>
+        <CodeBlock language="tsx">{`// Without runLoaders (default): loaders are skipped
+<Router routes={routes} ssr={{ path: "/dashboard" }} />
+
+// With runLoaders: loaders execute during SSR
+<Router routes={routes} ssr={{ path: "/dashboard", runLoaders: true }} />`}</CodeBlock>
+        <p>
+          When loaders run during SSR, their results are passed to components as
+          the <code>data</code> prop. The server-rendered HTML includes the
+          loader content, so users see the full page immediately.
+        </p>
+      </section>
+
+      <section>
+        <h3>Example</h3>
+        <p>Consider a dashboard route with a loader that fetches user data:</p>
+        <CodeBlock language="tsx">{`const routes = [
+  route({
+    component: AppShell,
+    children: [
+      route({ path: "/", component: HomePage }),
+      route({
+        path: "/dashboard",
+        component: DashboardPage,
+        loader: dashboardLoader,
+      }),
+    ],
+  }),
+];
+
+// Without runLoaders: DashboardPage is skipped during SSR.
+// Users see only the app shell; dashboard content fills in after hydration.
+<Router routes={routes} ssr={{ path: "/dashboard" }} />
+
+// With runLoaders: dashboardLoader executes during SSR.
+// DashboardPage renders with data — users see the full page immediately.
+<Router routes={routes} ssr={{ path: "/dashboard", runLoaders: true }} />`}</CodeBlock>
+      </section>
+
+      <section>
+        <h3>Server Setup</h3>
+        <p>
+          Unlike{" "}
+          <a href="/learn/ssr/static-site-generation">static site generation</a>
+          , SSR with loaders requires a server runtime that can handle requests
+          and render pages dynamically. Your server needs to know the requested
+          pathname and pass it to the router:
+        </p>
+        <CodeBlock language="tsx">{`// App.tsx — receives the pathname from the server
+export default function App({ pathname }: { pathname: string }) {
+  return (
+    <Router
+      routes={routes}
+      ssr={{ path: pathname, runLoaders: true }}
+    />
+  );
+}`}</CodeBlock>
+        <p>
+          Because loaders run during SSR, they must be able to execute in the
+          server environment. If your loaders call browser-only APIs, you may
+          need to adjust them or use environment checks.
+        </p>
+      </section>
+
+      <section>
+        <h3>
+          Comparison with <code>ssr</code> (No Loaders)
+        </h3>
+        <p>
+          The choice between <code>ssr</code> alone and{" "}
+          <code>ssr + runLoaders</code> depends on your deployment model:
+        </p>
+        <ul>
+          <li>
+            <strong>
+              <code>{"ssr={{ path }}"}</code>
+            </strong>{" "}
+            &mdash; Ideal for static site generation. Pages without loaders are
+            fully pre-rendered. Pages with loaders show the app shell during SSR
+            and fill in data after hydration. No server runtime needed.
+          </li>
+          <li>
+            <strong>
+              <code>{"ssr={{ path, runLoaders: true }}"}</code>
+            </strong>{" "}
+            &mdash; Ideal for dynamic SSR with a server runtime. All matched
+            routes render during SSR, including those with loaders. Users see
+            the complete page immediately.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Key Takeaways</h3>
+        <ul>
+          <li>
+            Set <code>runLoaders: true</code> to execute loaders during SSR for
+            fully rendered server output
+          </li>
+          <li>
+            Loader results are passed to components as the <code>data</code>{" "}
+            prop during SSR, just as they are on the client
+          </li>
+          <li>
+            This mode requires a server runtime that handles requests
+            dynamically
+          </li>
+          <li>
+            After hydration, the real URL from the Navigation API takes over and{" "}
+            <code>ssr</code> is ignored
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/dist/docs/LearnTypeSafetyPage.tsx

@@ -67,7 +67,7 @@ function UserPage({ params }: { params: { userId: string } }) {
           For explicit type annotations, use the{" "}
           <code>RouteComponentProps</code> type helper with your params type:
         </p>
-        <CodeBlock language="tsx">{`import { route, RouteComponentProps } from "@funstack/router";
+        <CodeBlock language="tsx">{`import { route, type RouteComponentProps } from "@funstack/router";
 
 // Define component with explicit props type
 function UserPage({ params }: RouteComponentProps<{ userId: string }>) {
@@ -97,7 +97,7 @@ const userRoute = route({
           for routes with loaders.
         </p>
         <CodeBlock language="tsx">{`import { use, Suspense } from "react";
-import { route, RouteComponentPropsWithData } from "@funstack/router";
+import { route, type RouteComponentPropsWithData } from "@funstack/router";
 
 interface User {
   id: string;
@@ -155,7 +155,7 @@ const userRoute = route({
           the current page). Use the <code>routeState</code> helper to define
           typed state for your routes.
         </p>
-        <CodeBlock language="tsx">{`import { route, routeState, RouteComponentProps } from "@funstack/router";
+        <CodeBlock language="tsx">{`import { routeState, RouteComponentProps } from "@funstack/router";
 
 // Define the state shape
 interface ProductListState {
@@ -209,12 +209,10 @@ function ProductListPage({
 }
 
 // Use routeState to create a typed route
-const productListRoute = routeState<ProductListState>()(
-  route({
-    path: "/products",
-    component: ProductListPage,
-  })
-);`}</CodeBlock>
+const productListRoute = routeState<ProductListState>()({
+  path: "/products",
+  component: ProductListPage,
+});`}</CodeBlock>
         <p>
           The <code>routeState</code> helper adds four props to your component:
         </p>
@@ -312,20 +310,18 @@ function ProductListPage(props: Props) {
 }
 
 // Route definition with both loader and state
-const productListRoute = routeState<ProductListState>()(
-  route({
-    path: "/products",
-    component: ProductListPage,
-    loader: async (): Promise<Product[]> => {
-      const response = await fetch("/api/products");
-      return response.json();
-    },
-  })
-);`}</CodeBlock>
+const productListRoute = routeState<ProductListState>()({
+  path: "/products",
+  component: ProductListPage,
+  loader: async (): Promise<Product[]> => {
+    const response = await fetch("/api/products");
+    return response.json();
+  },
+});`}</CodeBlock>
       </section>
 
       <section>
-        <h3>Approach 2: Hooks</h3>
+        <h3 id="hooks">Approach 2: Hooks</h3>
 
         <h4>When to Use Hooks</h4>
         <p>

package/dist/docs/index.md

@@ -2,6 +2,7 @@
 
 ## Available Documentation
 
+- [Examples](./ExamplesPage.tsx)
 - [Getting Started](./GettingStartedPage.tsx)
 
 ### API Reference
@@ -16,6 +17,8 @@
 - [Navigation API](./LearnNavigationApiPage.tsx) - FUNSTACK Router is built on the Navigation API , a modern browser API that provides a unified way to handle navigation. This guide explains the key differences from the older History API and the benefits this brings to your application.
 - [Nested Routes](./LearnNestedRoutesPage.tsx) - Nested routes let you build complex page layouts where parts of the UI persist across navigation while other parts change. Think of a dashboard with a sidebar that stays in place while the main content area updates—that's nested routing in action.
 - [React Server Components](./LearnRscPage.tsx) - FUNSTACK Router is designed to work with React Server Components (RSC). The package provides a dedicated server entry point so that route definitions can live in server modules, keeping client bundle sizes small.
-- [Server-Side Rendering](./LearnSsrPage.tsx) - FUNSTACK Router supports server-side rendering with a two-stage model. During SSR, pathless (layout) routes without loaders render to produce an app shell, while path-based routes and loaders activate only after client hydration. You can optionally provide an ssrPathname prop to match path-based routes during SSR for richer server-rendered output.
+- [Static Site Generation](./LearnSsgPage.tsx) - When your server or static site generator knows the URL being rendered, you can use the ssr prop to match path-based routes during SSR. This produces richer server-rendered HTML — users see page content immediately instead of just the app shell.
+- [How SSR Works](./LearnSsrBasicPage.tsx) - FUNSTACK Router supports server-side rendering with a two-stage model. During SSR, pathless (layout) routes without loaders render to produce an app shell, while path-based routes and loaders activate only after client hydration.
+- [SSR with Loaders](./LearnSsrWithLoadersPage.tsx) - When you have a server runtime that can execute loaders at request time, set runLoaders: true in the ssr config to produce fully rendered HTML — including loader data — on the server.
 - [Controlling Transitions](./LearnTransitionsPage.tsx) - FUNSTACK Router wraps navigations in React's startTransition, which means the old UI may stay visible while the new route loads. This page explains how this works and how to control it.
 - [Type Safety](./LearnTypeSafetyPage.tsx) - FUNSTACK Router provides first-class TypeScript support, allowing you to access route params, navigation state, and loader data with full type safety. This guide covers two approaches: receiving typed data through component props (recommended) and accessing it through hooks.

package/dist/index.d.mts

@@ -90,6 +90,30 @@ type OnNavigateCallback = (event: NavigateEvent, info: OnNavigateInfo) => void;
 type FallbackMode = "none" | "static";
 //#endregion
 //#region src/Router.d.ts
+/**
+ * SSR configuration for the router.
+ */
+type SSRConfig = {
+  /**
+   * Pathname to use for route matching during SSR.
+   *
+   * The router uses this pathname to match path-based routes during SSR.
+   * Route params are extracted normally.
+   */
+  path: string;
+  /**
+   * Whether to run loaders during SSR.
+   *
+   * - When `false` or omitted, routes with loaders are skipped during SSR
+   *   and the parent route renders as a shell.
+   * - When `true`, routes with loaders are matched and their loaders are
+   *   executed during SSR. The loader results are passed to components as
+   *   the `data` prop, so server-rendered HTML includes loader content.
+   *
+   * @default false
+   */
+  runLoaders?: boolean;
+};
 type RouterProps = {
   routes: RouteDefinition[];
   /**
@@ -108,11 +132,11 @@ type RouterProps = {
    */
   fallback?: FallbackMode;
   /**
-   * Pathname to use for route matching during SSR.
+   * SSR configuration for the router.
    *
-   * By default, during SSR only pathless routes match. When this prop is provided,
-   * the router uses this pathname to match path-based routes during SSR as well.
-   * Loaders are not executed during SSR regardless of this setting.
+   * By default (no `ssr` prop), during SSR only pathless routes match.
+   * When provided, the router uses the given pathname to match path-based
+   * routes during SSR as well.
    *
    * This prop is only used when the location entry is not available (during SSR
    * or hydration). Once the client hydrates, the real URL from the Navigation API
@@ -120,16 +144,20 @@ type RouterProps = {
    *
    * @example
    * ```tsx
-   * <Router routes={routes} ssrPathname="/about" />
+   * // SSG: match path-based routes, skip loaders
+   * <Router routes={routes} ssr={{ path: "/about" }} />
+   *
+   * // SSR with loaders: match path-based routes including those with loaders
+   * <Router routes={routes} ssr={{ path: "/about", runLoaders: true }} />
    * ```
    */
-  ssrPathname?: string;
+  ssr?: SSRConfig;
 };
 declare function Router({
   routes: inputRoutes,
   onNavigate,
   fallback,
-  ssrPathname
+  ssr
 }: RouterProps): ReactNode;
 //#endregion
 //#region src/Outlet.d.ts
@@ -275,5 +303,5 @@ declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Rec
  */
 declare function useIsPending(): boolean;
 //#endregion
-export { type ActionArgs, type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type MatchedRoute, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, route, routeState, useBlocker, useIsPending, useLocation, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
+export { type ActionArgs, type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type MatchedRoute, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type SSRConfig, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, route, routeState, useBlocker, useIsPending, useLocation, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router.tsx","../src/Outlet.tsx","../src/hooks/useNavigate.ts","../src/hooks/useLocation.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts"],"mappings":";;;;cAGM,6BAAA;;AAFoE;;;;;;;KAgB9D,uBAAA;EAAA,CACT,6BAAA,UAyB0B;EAvB3B,IAAA,WA4Be;EA1Bf,QAAA,GAAW,uBAAA;EAgCc;;;;;;EAzBzB,KAAA;EAPA;;;;;EAaA,eAAA,YAM2B;EAA3B,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAE3B;EAAA,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,wCAAA;EAE3B,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA,SAAmB,OAAA;IACnB,cAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;AAmBN;KAAY,YAAA;sCAEV,KAAA,EAAO,uBAAA,EAAP;EAEA,MAAA,EAAQ,MAAA,kBAAR;EAEA,QAAA;AAAA;;;;KAcU,cAAA;EAMQ,4DAJlB,OAAA,WAAkB,YAAA,WAUR;EARV,YAAA;EAEA,QAAA,EAAU,QAAA;AAAA;;;;KAMA,eAAA;EAYA,uDAVV,OAAA;EAEA,KAAA,YASA;EAPA,IAAA;AAAA;;;AAmBF;KAbY,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;;AAqBF;;;KAXY,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;;AC1GR;;KDmHY,YAAA;;;KCnHA,WAAA;EACV,MAAA,EAAQ,eAAA;ED5BoC;;;;AAc9C;;;ECsBE,UAAA,GAAa,kBAAA;EDjBF;;;;;;ECwBX,QAAA,GAAW,YAAA;EDQc;;;;;;;;;;;;;;;;ECSzB,WAAA;AAAA;AAAA,iBAYc,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA,QAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;AD/EyD;iBEM1D,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,IAAgB,EAAA,UAAY,OAAA,GAAU,eAAA;;;;;;iBCAtC,WAAA,CAAA,GAAe,QAAA;;;KCJ1B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;ANF8D;EMOxE,WAAA;AAAA;;;ANSF;;;;;;;;;;;;;;;;;;;;;;;;;iBMqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;ANrCsC;;;;;AAgB1E;;;;;;;;;;;;iBOSgB,cAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;APhC0C;;;;;AAgB1E;;;;;;;;;;;;;iBQUgB,aAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;ARjC2C;;;;;AAgB1E;;;;;;;;;;;;;;;;iBSagB,YAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBC/Bd,YAAA,CAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router.tsx","../src/Outlet.tsx","../src/hooks/useNavigate.ts","../src/hooks/useLocation.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts"],"mappings":";;;;cAGM,6BAAA;;AAFoE;;;;;;;KAgB9D,uBAAA;EAAA,CACT,6BAAA,UAyB0B;EAvB3B,IAAA,WA4Be;EA1Bf,QAAA,GAAW,uBAAA;EAgCc;;;;;;EAzBzB,KAAA;EAPA;;;;;EAaA,eAAA,YAM2B;EAA3B,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAE3B;EAAA,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,wCAAA;EAE3B,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA,SAAmB,OAAA;IACnB,cAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;AAmBN;KAAY,YAAA;sCAEV,KAAA,EAAO,uBAAA,EAAP;EAEA,MAAA,EAAQ,MAAA,kBAAR;EAEA,QAAA;AAAA;;;;KAcU,cAAA;EAMQ,4DAJlB,OAAA,WAAkB,YAAA,WAUR;EARV,YAAA;EAEA,QAAA,EAAU,QAAA;AAAA;;;;KAMA,eAAA;EAYA,uDAVV,OAAA;EAEA,KAAA,YASA;EAPA,IAAA;AAAA;;;AAmBF;KAbY,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;;AAqBF;;;KAXY,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;;ACvGR;;KDgHY,YAAA;;;;AAhJ8D;;KCgC9D,SAAA;ED9BkC;;AAc9C;;;;ECuBE,IAAA;EDC2B;;;;;;;;;;;ECW3B,UAAA;AAAA;AAAA,KAGU,WAAA;EACV,MAAA,EAAQ,eAAA;ED3BR;;;;;;;ECmCA,UAAA,GAAa,kBAAA;EDrBc;;;;;;EC4B3B,QAAA,GAAW,YAAA;EDtBL;;;;;;;;;;;;;;;AA4BR;;;;;ECeE,GAAA,GAAM,SAAA;AAAA;AAAA,iBAYQ,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA,QAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;AD5GyD;iBEM1D,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,IAAgB,EAAA,UAAY,OAAA,GAAU,eAAA;;;;;;iBCAtC,WAAA,CAAA,GAAe,QAAA;;;KCJ1B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;ANF8D;EMOxE,WAAA;AAAA;;;ANSF;;;;;;;;;;;;;;;;;;;;;;;;;iBMqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;ANrCsC;;;;;AAgB1E;;;;;;;;;;;;iBOSgB,cAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;APhC0C;;;;;AAgB1E;;;;;;;;;;;;;iBQUgB,aAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;ARjC2C;;;;;AAgB1E;;;;;;;;;;;;;;;;iBSagB,YAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBC/Bd,YAAA,CAAA"}

package/dist/index.mjs

@@ -61,6 +61,7 @@ function internalRoutes(routes) {
 
 //#endregion
 //#region src/core/matchRoutes.ts
+const SKIPPED = Symbol("skipped");
 /**
 * Match a pathname against a route tree, returning the matched route stack.
 * Returns null if no match is found.
@@ -68,6 +69,7 @@ function internalRoutes(routes) {
 function matchRoutes(routes, pathname, options) {
 	for (const route of routes) {
 		const matched = matchRoute(route, pathname, options);
+		if (matched === SKIPPED) return null;
 		if (matched) return matched;
 	}
 	return null;
@@ -78,7 +80,15 @@ function matchRoutes(routes, pathname, options) {
 function matchRoute(route, pathname, options) {
 	const hasChildren = Boolean(route.children?.length);
 	const skipLoaders = options?.skipLoaders ?? false;
-	if ((pathname === null || skipLoaders) && route.loader) return null;
+	if ((pathname === null || skipLoaders) && route.loader) {
+		if (skipLoaders && pathname !== null) {
+			if (route.path === void 0) return SKIPPED;
+			const isExact = route.exact ?? !hasChildren;
+			const { matched } = matchPath(route.path, pathname, isExact);
+			if (matched) return SKIPPED;
+		}
+		return null;
+	}
 	if (route.path === void 0) {
 		const result = {
 			route,
@@ -86,10 +96,19 @@ function matchRoute(route, pathname, options) {
 			pathname: ""
 		};
 		if (hasChildren) {
+			let anySkipped = false;
 			for (const child of route.children) {
 				const childMatch = matchRoute(child, pathname, options);
+				if (childMatch === SKIPPED) {
+					anySkipped = true;
+					break;
+				}
 				if (childMatch) return [result, ...childMatch];
 			}
+			if (anySkipped) {
+				if (route.component) return [result];
+				return SKIPPED;
+			}
 			if (route.component && route.requireChildren === false) return [result];
 			if ((pathname === null || skipLoaders) && route.component) return [result];
 			return null;
@@ -109,8 +128,13 @@ function matchRoute(route, pathname, options) {
 		let remainingPathname = pathname.slice(consumedPathname.length);
 		if (!remainingPathname.startsWith("/")) remainingPathname = "/" + remainingPathname;
 		if (remainingPathname === "") remainingPathname = "/";
+		let anyChildSkipped = false;
 		for (const child of route.children) {
 			const childMatch = matchRoute(child, remainingPathname, options);
+			if (childMatch === SKIPPED) {
+				anyChildSkipped = true;
+				break;
+			}
 			if (childMatch) return [result, ...childMatch.map((m) => ({
 				...m,
 				params: {
@@ -119,6 +143,10 @@ function matchRoute(route, pathname, options) {
 				}
 			}))];
 		}
+		if (anyChildSkipped) {
+			if (route.component) return [result];
+			return SKIPPED;
+		}
 		if (route.component && route.requireChildren === false) return [result];
 		if (skipLoaders && route.component) return [result];
 		return null;
@@ -470,7 +498,7 @@ function createAdapter(fallback) {
 const serverSnapshotSymbol = Symbol();
 const noopSubscribe = () => () => {};
 const getServerSnapshot = () => serverSnapshotSymbol;
-function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssrPathname }) {
+function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssr }) {
 	const routes = internalRoutes(inputRoutes);
 	const adapter = useMemo(() => createAdapter(fallback), [fallback]);
 	const [blockerRegistry] = useState(() => createBlockerRegistry());
@@ -506,22 +534,22 @@ function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssrPathnam
 	}, [adapter]);
 	return useMemo(() => {
 		const matchedRoutesWithData = (() => {
-			if (locationEntry === null) {
-				const matched = matchRoutes(routes, ssrPathname ?? null, { skipLoaders: true });
+			if (locationEntry === null && !ssr?.runLoaders) {
+				const matched = matchRoutes(routes, ssr?.path ?? null, { skipLoaders: true });
 				if (!matched) return null;
 				return matched.map((m) => ({
 					...m,
 					data: void 0
 				}));
 			}
-			const { url, key } = locationEntry;
+			const url = locationEntry ? locationEntry.url : new URL(ssr.path, "http://localhost");
 			const matched = matchRoutes(routes, url.pathname);
 			if (!matched) return null;
-			return executeLoaders(matched, key, createLoaderRequest(url), adapter.getIdleAbortSignal());
+			return executeLoaders(matched, locationEntry?.key ?? "ssr", createLoaderRequest(url), locationEntry ? adapter.getIdleAbortSignal() : new AbortController().signal);
 		})();
 		const routerContextValue = {
 			locationEntry,
-			url: locationEntry?.url ?? null,
+			url: locationEntry?.url ?? (ssr ? new URL(ssr.path, "http://localhost") : null),
 			isPending,
 			navigate,
 			navigateAsync,
@@ -547,7 +575,7 @@ function Router({ routes: inputRoutes, onNavigate, fallback = "none", ssrPathnam
 		routes,
 		adapter,
 		blockerRegistry,
-		ssrPathname
+		ssr
 	]);
 }
 /**