@lovrozagar/flare 0.1.2 → 0.2.0

package/src/errors/index.ts

@@ -46,28 +46,60 @@ export class UnauthorizedError extends Error {
 }
 
 const SAFE_PROTOCOLS = new Set(["http:", "https:"]);
+const SENTINEL_ORIGIN = "https://flare.invalid";
+const HAS_SCHEME = /^[a-zA-Z][a-zA-Z+\-.]*:/;
 
 /**
  * Allowlist-based redirect URL validation using the URL constructor.
- * Lets the platform's URL parser handle all encoding/unicode normalization
- * instead of a regex blocklist that can be bypassed.
+ * Lets the platform's URL parser handle encoding, backslash normalization,
+ * and unicode instead of a regex blocklist that can be bypassed.
+ *
+ * Protocol-relative (`//host`) is not a same-origin path — `startsWith("/")`
+ * would treat it as one. Internal `to` must stay on the sentinel origin.
  */
-function validateExternalRedirectUrl(href: string): string {
-	/* Relative paths are safe — no protocol to exploit */
-	if (href.startsWith("/") || href.startsWith(".")) return href;
+function validateRedirectUrl(raw: string, mode: "internal" | "external"): string {
+	if (/[\0\r\n]/.test(raw)) {
+		throw new Error(`Unsafe redirect URL: ${raw}`);
+	}
 
 	let parsed: URL;
 	try {
-		parsed = new URL(href, "http://localhost");
+		parsed = new URL(raw, SENTINEL_ORIGIN);
 	} catch {
-		throw new Error(`Unsafe redirect URL: ${href}`);
+		throw new Error(`Unsafe redirect URL: ${raw}`);
 	}
 
 	if (!SAFE_PROTOCOLS.has(parsed.protocol)) {
-		throw new Error(`Unsafe redirect URL: ${href}`);
+		throw new Error(`Unsafe redirect URL: ${raw}`);
+	}
+
+	const sameOrigin = parsed.origin === SENTINEL_ORIGIN;
+	if (mode === "internal") {
+		let decodedPath = parsed.pathname;
+		try {
+			decodedPath = decodeURIComponent(parsed.pathname);
+		} catch {
+			/* keep pathname */
+		}
+		if (
+			!sameOrigin ||
+			!raw.startsWith("/") ||
+			raw.startsWith("//") ||
+			raw.includes("\\") ||
+			parsed.pathname.startsWith("//") ||
+			decodedPath.includes("\\") ||
+			decodedPath.startsWith("//")
+		) {
+			throw new Error(`Unsafe redirect URL: ${raw}`);
+		}
+		return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+	}
+
+	if (!sameOrigin && !HAS_SCHEME.test(raw.trimStart())) {
+		throw new Error(`Unsafe redirect URL: ${raw}`);
 	}
 
-	return href;
+	return raw;
 }
 
 export class RedirectResponse extends Error {
@@ -80,10 +112,10 @@ export class RedirectResponse extends Error {
 	constructor(options: RawRedirectOptions) {
 		super("Redirect");
 		if ("href" in options) {
-			this.url = validateExternalRedirectUrl(options.href);
+			this.url = validateRedirectUrl(options.href, "external");
 			this.external = true;
 		} else {
-			this.url = options.to;
+			this.url = validateRedirectUrl(options.to, "internal");
 			this.external = false;
 		}
 		this.status = options.status ?? 303;
@@ -136,6 +168,8 @@ export function redirect(options: {
 	if (options.to === undefined) {
 		throw new Error("redirect() requires either 'to' or 'href'");
 	}
+	/* Validate the raw path before buildUrl collapses leading slashes (`//host` → `/host`) */
+	validateRedirectUrl(options.to, "internal");
 	const url = buildUrl({ params: options.params, search: options.search, to: options.to });
 	throw new RedirectResponse({ replace: options.replace, status: options.status, to: url });
 }

package/src/fonts/component.tsx

@@ -1,4 +1,5 @@
-import { For, type JSX } from "solid-js";
+import { For } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useSSRContext } from "../components/ssr-context.tsx";
 import type { Font } from "./types.ts";
 

package/src/form/index.tsx

@@ -1,7 +1,9 @@
-import { createMemo, createSignal, For, type JSX, Show, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { createMemo, createSignal, For, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Dynamic } from "@solidjs/web";
 import type { FlattenedError } from "../errors/index.ts";
 import { ServerFnValidationError } from "../errors/index.ts";
+import { FORM_FN_FIELD, serverFnPath } from "../protocol.ts";
 import type { ServerFn } from "../server-fn/index.ts";
 
 /* Duplicated here to avoid importing server-context (uses node:async_hooks)
@@ -51,16 +53,20 @@ interface FormOwnProps<TInput, TOutput> {
 export type FormProps<TInput, TOutput> = FormOwnProps<TInput, TOutput> &
 	Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "enctype" | "method">;
 
+/** Seed `form.error()` after a no-JS PE POST with form-level validation errors. */
+export function seedFormErrorFromSsr(ssrCtx: FormActionContext | undefined): Error | null {
+	if (!ssrCtx?.formErrors.length) return null;
+	return new ServerFnValidationError({
+		fieldErrors: ssrCtx.fieldErrors,
+		formErrors: ssrCtx.formErrors,
+	});
+}
+
 /* ── Form component ────────────────────────────────────────────────── */
 
 export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.Element {
-	const [local, rest] = splitProps(props as FormOwnProps<TInput, TOutput> & Record<string, unknown>, [
-		"action",
-		"children",
-		"enctype",
-		"onError",
-		"onSuccess",
-	]);
+	const local = props as FormOwnProps<TInput, TOutput> & Record<string, unknown>;
+	const rest = omit(local, "action", "children", "enctype", "onError", "onSuccess");
 
 	const reg = createMemo(() => local.action._registration);
 	const fnId = createMemo(() => reg()?.id ?? "");
@@ -70,7 +76,7 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 	const ssrCtx = typeof window === "undefined" && _getFormActionContext ? _getFormActionContext(fnId()) : undefined;
 
 	const [pending, setPending] = createSignal(false);
-	const [error, setError] = createSignal<Error | null>(null);
+	const [error, setError] = createSignal<Error | null>(seedFormErrorFromSsr(ssrCtx));
 	const [fieldErrors, setFieldErrors] = createSignal<Record<string, string[]>>(ssrCtx?.fieldErrors ?? {});
 	const [result, setResult] = createSignal<TOutput | undefined>(undefined);
 
@@ -116,7 +122,7 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 		setFieldErrors({});
 
 		try {
-			const url = `/_fn/${id}/${name}`;
+			const url = serverFnPath(id, name);
 			const res = await fetch(url, {
 				body: formData,
 				method: "POST",
@@ -165,7 +171,7 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 			method="post"
 			onSubmit={handleSubmit}
 		>
-			<input name="__flare_fn" type="hidden" value={fnId()} />
+			<input name={FORM_FN_FIELD} type="hidden" value={fnId()} />
 			{local.children(formCtx)}
 		</form>
 	) as JSX.Element;

package/src/generators/index.ts

@@ -11,6 +11,7 @@ export type PrefetchStrategy = false | "intent" | "render" | "viewport";
 export type ExtractedStaticDeferMode = "resolve" | "stream";
 
 export interface ExtractedCacheConfig {
+	cdnTags?: string[];
 	client?: {
 		cacheDeferred?: boolean;
 		gcTime?: number;
@@ -37,6 +38,7 @@ export interface RouteDefinition {
 	exportName: string;
 	filePath: string;
 	cache: ExtractedCacheConfig;
+	hasAuthorize?: boolean;
 	hasInput: boolean;
 	intercept?: ExtractedInterceptConfig;
 	responseRoute: boolean;
@@ -76,6 +78,23 @@ function writeGenFile(filePath: string, body: string, generator: string): void {
 	writeFileSync(filePath, fullContent, "utf-8");
 }
 
+/**
+ * Recursive source listing, normalized to posix separators and sorted.
+ *
+ * `readdirSync` order is filesystem- and runtime-dependent — node, bun, and
+ * deno disagree — and generated files are checked in, so an unsorted scan
+ * makes `routes.gen.ts` churn based on who ran the build. Sorting by code
+ * unit (not `localeCompare`, which follows ICU locale data) pins the order.
+ * Returns [] when the directory is missing.
+ */
+function listSourceEntries(srcPath: string): string[] {
+	try {
+		return (readdirSync(srcPath, { recursive: true }) as string[]).map((entry) => entry.replace(/\\/g, "/")).sort();
+	} catch {
+		return [];
+	}
+}
+
 const BUILDER_TO_TYPE: Record<string, RouteDefinition["type"]> = {
 	createLayout: "layout",
 	createPage: "page",
@@ -206,6 +225,41 @@ function extractNestedBlock(body: string, key: string): string | null {
 	return null;
 }
 
+function extractStringArray(text: string, key: string): string[] | undefined {
+	const re = new RegExp(`${key}\\s*:\\s*\\[`);
+	const match = re.exec(text);
+	if (!match) return undefined;
+
+	const start = (match.index ?? 0) + match[0].length;
+	let depth = 1;
+	let end = start;
+	for (let i = start; i < text.length; i++) {
+		const skipped = skipStringOrComment(text, i);
+		if (skipped !== i) {
+			i = skipped;
+			continue;
+		}
+		if (text[i] === "[") depth++;
+		else if (text[i] === "]") {
+			depth--;
+			if (depth === 0) {
+				end = i;
+				break;
+			}
+		}
+	}
+	const inner = text.slice(start, end);
+	const items: string[] = [];
+	const itemRe = /["'`]([^"'`]*)["'`]/g;
+	let itemMatch: RegExpExecArray | null = itemRe.exec(inner);
+	while (itemMatch) {
+		const value = itemMatch[1];
+		if (value) items.push(value);
+		itemMatch = itemRe.exec(inner);
+	}
+	return items;
+}
+
 function extractNumeric(text: string, key: string, unit?: "ms" | "s"): number | undefined {
 	/* try duration string first: key: "5m" */
 	const dm = DURATION_STR_RE(key).exec(text);
@@ -295,6 +349,13 @@ export function extractCacheFromChain(chainText: string): ExtractedCacheConfig {
 		config.isr = true;
 	}
 
+	/* cdn: { tags: ["a", "b"] } — static string arrays only; function tags are computed at render */
+	const cdnBlock = extractNestedBlock(body, "cdn");
+	if (cdnBlock) {
+		const tags = extractStringArray(cdnBlock, "tags");
+		if (tags && tags.length > 0) config.cdnTags = tags;
+	}
+
 	return config;
 }
 
@@ -436,6 +497,7 @@ export function extractRouteDefinitions(src: string, filePath: string): RouteDef
 			const hasAuthenticateOptional = /\.authenticateOptional\s*\(/.test(chainText);
 			const hasAuthenticate = /\.authenticate\s*\(/.test(chainText);
 			const authenticateMode: AuthenticateMode = hasAuthenticateOptional ? "optional" : !!hasAuthenticate;
+			const hasAuthorize = /\.authorize\s*\(/.test(chainText);
 			const hasInput = /\.input\s*(?:<[^>]*>)?\s*\(/.test(chainText);
 			const responseRoute = /\.response\s*\(/.test(chainText);
 			const cache = extractCacheFromChain(chainText);
@@ -446,6 +508,7 @@ export function extractRouteDefinitions(src: string, filePath: string): RouteDef
 				cache,
 				exportName,
 				filePath,
+				hasAuthorize,
 				hasInput,
 				intercept,
 				responseRoute,
@@ -581,6 +644,11 @@ function formatRouteMeta(def: RouteDefinition): string {
 	const parts: string[] = [];
 	if (def.authenticateMode === true) parts.push("authenticate: true");
 	else if (def.authenticateMode === "optional") parts.push(`authenticate: "optional"`);
+	if (def.hasAuthorize) parts.push("authorize: true");
+	if (def.cache.cdnTags && def.cache.cdnTags.length > 0) {
+		const tagLit = def.cache.cdnTags.map((t) => `"${escapeCodegenStr(t)}"`).join(", ");
+		parts.push(`tags: [${tagLit}]`);
+	}
 
 	if (def.cache.client) {
 		const cp: string[] = [];
@@ -1106,17 +1174,7 @@ export function scanSourceFiles(options: ScanOptions): RouteDefinition[] {
 	const prefix = options.ignorePrefix ?? "_";
 	const defs: RouteDefinition[] = [];
 
-	let entries: string[];
-	try {
-		entries = readdirSync(srcPath, { recursive: true }) as string[];
-	} catch {
-		return defs;
-	}
-
-	for (const entry of entries) {
-		/* Normalize to posix separators */
-		const rel = entry.replace(/\\/g, "/");
-
+	for (const rel of listSourceEntries(srcPath)) {
 		/* Skip non-ts files */
 		if (!rel.endsWith(".ts") && !rel.endsWith(".tsx")) continue;
 
@@ -1254,15 +1312,7 @@ export function inspectFsCodegenLayout(options: ScanOptions): FsLayoutIssue[] {
 	const prefix = options.ignorePrefix ?? "_";
 	const issues: FsLayoutIssue[] = [];
 
-	let entries: string[];
-	try {
-		entries = readdirSync(srcPath, { recursive: true }) as string[];
-	} catch {
-		return issues;
-	}
-
-	for (const entry of entries) {
-		const rel = entry.replace(/\\/g, "/");
+	for (const rel of listSourceEntries(srcPath)) {
 		if (!rel.endsWith(".ts") && !rel.endsWith(".tsx") && !rel.endsWith(".js") && !rel.endsWith(".jsx")) continue;
 		if (rel.includes("_gen/") || rel.includes("node_modules")) continue;
 		if (rel.endsWith(".gen.ts") || rel.endsWith(".gen.tsx")) continue;
@@ -1421,16 +1471,7 @@ export function scanSourceFilesFsCodegen(options: ScanOptions): RouteDefinition[
 	const routesDir = "routes";
 	const defs: RouteDefinition[] = [];
 
-	let entries: string[];
-	try {
-		entries = readdirSync(srcPath, { recursive: true }) as string[];
-	} catch {
-		return defs;
-	}
-
-	for (const entry of entries) {
-		const rel = entry.replace(/\\/g, "/");
-
+	for (const rel of listSourceEntries(srcPath)) {
 		/* Only process files under routes/ */
 		if (!rel.startsWith(`${routesDir}/`)) continue;
 
@@ -1464,6 +1505,7 @@ export function scanSourceFilesFsCodegen(options: ScanOptions): RouteDefinition[
 		const hasAuthenticateOptional = /\.authenticateOptional\s*\(/.test(content);
 		const hasAuthenticate = /\.authenticate\s*\(/.test(content);
 		const authenticateMode: AuthenticateMode = hasAuthenticateOptional ? "optional" : !!hasAuthenticate;
+		const hasAuthorize = /\.authorize\s*\(/.test(content);
 		const hasInput = /\.input\s*(?:<[^>]*>)?\s*\(/.test(content);
 		const responseRoute = /\.response\s*\(/.test(content);
 		const cache = extractCacheFromChain(content);
@@ -1474,6 +1516,7 @@ export function scanSourceFilesFsCodegen(options: ScanOptions): RouteDefinition[
 			cache,
 			exportName: "route",
 			filePath: posix.join(options.srcDir ?? "src", rel),
+			hasAuthorize,
 			hasInput,
 			intercept,
 			responseRoute,

package/src/head-client/index.ts

@@ -564,6 +564,13 @@ function addCssLinkForRoute(matchId: string, href: string): void {
 function addCssStyleForRoute(matchId: string, children: string): void {
 	if (typeof document === "undefined") return;
 	const el = document.createElement("style");
+	const meta = document.querySelector?.('meta[name="csp-nonce"]');
+	const tagged = document.querySelector?.("script[nonce], style[nonce]") as HTMLElement | null;
+	const nonce = meta?.getAttribute("content") || tagged?.nonce || tagged?.getAttribute("nonce") || "";
+	if (nonce) {
+		el.setAttribute("nonce", nonce);
+		el.nonce = nonce;
+	}
 	el.setAttribute("data-flare-route", matchId);
 	el.textContent = children;
 	document.head.appendChild(el);

package/src/history/index.ts

@@ -150,6 +150,12 @@ export function createScrollStore(maxSize = 200, ttl = DEFAULT_SCROLL_TTL): Scro
 
 	return {
 		get(key: string): ScrollPosition | null {
+			const ts = timestamps.get(key);
+			if (ts !== undefined && Date.now() - ts > ttl) {
+				store.delete(key);
+				timestamps.delete(key);
+				return null;
+			}
 			return store.get(key) ?? null;
 		},
 

package/src/hydrate/index.tsx

@@ -3,8 +3,10 @@ import swConfig from "virtual:flare-sw-config";
 
 declare const __FLARE_IS_DEV__: boolean | undefined;
 const isDevDefault = typeof __FLARE_IS_DEV__ === "boolean" ? __FLARE_IS_DEV__ : false;
-import type { JSX } from "solid-js";
-import { createComponent, render, hydrate as solidHydrate } from "solid-js/web";
+import { flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { createComponent, Hydration, render, hydrate as solidHydrate } from "@solidjs/web";
+import { SSRContextProvider } from "../components/ssr-context.tsx";
 import { createChannel } from "../broadcast/channel.ts";
 import { BroadcastProvider } from "../broadcast/provider.tsx";
 import type { MatchCache } from "../caches/index.ts";
@@ -17,9 +19,11 @@ import {
 	extractRootBoundaries,
 	hydrateHeadState,
 	loadRouteModules,
+	applyMatchCacheTags,
 	populateMatchCache,
 } from "../hydration/index.ts";
 import { onceIdle } from "../internal/once-idle.ts";
+import { ATTR_HYDRATED } from "../protocol.ts";
 import { setupNavigation } from "../navigation/index.ts";
 import type { LoadedRouteModule } from "../navigation/types.ts";
 import { FlareProvider, Outlet, useRouter } from "../outlet/index.tsx";
@@ -55,13 +59,10 @@ export interface HydrateOptions {
 	onInteraction?: () => void;
 }
 
-/**
- * Matches SSR's Hydration component depth.
- * Hydration is a single-child-passthrough, Dummy matches its depth
- * so hydration keys align between SSR and client.
- */
-function Dummy(props: { children: JSX.Element }): JSX.Element {
-	return props.children;
+function readDocumentNonce(): string {
+	if (typeof document === "undefined") return "";
+	const meta = document.querySelector('meta[name="csp-nonce"]');
+	return meta?.getAttribute("content") || meta?.getAttribute("nonce") || "";
 }
 
 function RootRenderer(props: {
@@ -71,8 +72,11 @@ function RootRenderer(props: {
 	renderFn: (p: RenderProps) => JSX.Element;
 }): JSX.Element {
 	const router = useRouter();
+	/* Getter so <Outlet> does not consume hydration child ids before <html>. */
 	return props.renderFn({
-		children: <Outlet />,
+		get children() {
+			return <Outlet />;
+		},
 		loaderData: props.data,
 		location: props.location,
 		preloaderContext: props.preloaderContext,
@@ -156,7 +160,7 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 		}
 		const { QueryClientProvider } = await import("../query-client");
 		QCP = QueryClientProvider as typeof QCP;
-		installQueryCacheResolver(queryClientInstance);
+		/* `__flare_queries` is drained after solidHydrate — observers must attach first. */
 	}
 
 	/* Build composed rewrite: basePath (if any) + user rewrite */
@@ -178,6 +182,7 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 		const rootLayout = modules.layouts.find((m) => m._type === "root-layout");
 		const nonRootLayouts = modules.layouts.filter((m) => m._type !== "root-layout");
 		const allModules: LoadedRouteModule[] = [...nonRootLayouts, modules.page];
+		applyMatchCacheTags(matchCache, allModules, modules.params, search);
 
 		/* Build error map from per-match error names (survives serialization) */
 		const errorMap = new Map<string, Error>();
@@ -199,61 +204,71 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 		const rootMatchState = rootLayout ? state.matches.find((m) => m.virtualPath === rootLayout.virtualPath) : undefined;
 
 		/*
-		 * Full-document hydration: providers wrap root layout so components
-		 * inside root layout (e.g. NavigationProgress) have RouterContext.
+		 * Full-document hydration. SSR and client wrappers must match —
+		 * Solid 2 `_hk` ids follow the owner tree.
 		 *
-		 * SSR:    Hydration > QCP? > Theme > Direction > Broadcast > FlareProvider > rootRenderFn({children: Outlet})
-		 * Client: Dummy     > QCP? > Theme > Direction > Broadcast > FlareProvider > rootRenderFn({children: Outlet})
+		 * Both: Hydration > QCP? > SSRContextProvider > Theme > Direction >
+		 *       Broadcast > FlareProvider > rootRenderFn({children: Outlet})
 		 */
 		const channel = createChannel();
 		const renderInner = () => (
-			<ThemeProvider config={r.theme}>
-				<DirectionProvider config={r.direction}>
-					<BroadcastProvider value={channel}>
-						<FlareProvider
-							boundaries={rootBoundaries}
-							caseSensitive={r.caseSensitive}
-							layouts={r.layouts}
-							localeConfig={r.locale}
-							matchCache={matchCache}
-							matches={initialMatches}
-							onContextReady={(ctx) => {
-								resolveCtx(ctx);
-							}}
-							params={state.params}
-							prefetchCache={prefetchCache}
-							resolvers={state.resolvers}
-							routerCacheDefaults={r.cache?.client || undefined}
-							routeTree={r.routeTree}
-							search={search}
-						>
-							{rootLayout?.render ? (
-								<RootRenderer
-									data={rootMatchState?.loaderData}
-									location={{
-										hash: window.location.hash,
-										params: state.params,
-										pathname: state.pathname,
-										search,
-										url: new URL(window.location.href),
-										variablePath: "",
-										virtualPath: rootLayout.virtualPath,
-									}}
-									preloaderContext={rootMatchState?.preloaderContext}
-									renderFn={rootLayout.render}
-								/>
-							) : (
-								<Outlet />
-							)}
-						</FlareProvider>
-					</BroadcastProvider>
-				</DirectionProvider>
-			</ThemeProvider>
+			<SSRContextProvider
+				value={{
+					direction: r.direction,
+					flareStateScript: "",
+					isServer: false,
+					nonce: readDocumentNonce(),
+					theme: r.theme,
+				}}
+			>
+				<ThemeProvider config={r.theme}>
+					<DirectionProvider config={r.direction}>
+						<BroadcastProvider value={channel}>
+							<FlareProvider
+								boundaries={rootBoundaries}
+								caseSensitive={r.caseSensitive}
+								layouts={r.layouts}
+								localeConfig={r.locale}
+								matchCache={matchCache}
+								matches={initialMatches}
+								onContextReady={(ctx) => {
+									resolveCtx(ctx);
+								}}
+								params={state.params}
+								prefetchCache={prefetchCache}
+								resolvers={state.resolvers}
+								routerCacheDefaults={r.cache?.client || undefined}
+								routeTree={r.routeTree}
+								search={search}
+							>
+								{rootLayout?.render ? (
+									RootRenderer({
+										data: rootMatchState?.loaderData,
+										location: {
+											hash: window.location.hash,
+											params: state.params,
+											pathname: state.pathname,
+											search,
+											url: new URL(window.location.href),
+											variablePath: "",
+											virtualPath: rootLayout.virtualPath,
+										},
+										preloaderContext: rootMatchState?.preloaderContext,
+										renderFn: rootLayout.render,
+									})
+								) : (
+									<Outlet />
+								)}
+							</FlareProvider>
+						</BroadcastProvider>
+					</DirectionProvider>
+				</ThemeProvider>
+			</SSRContextProvider>
 		);
 
 		solidHydrate(
 			() => (
-				<Dummy>
+				<Hydration>
 					{QCP && queryClientInstance
 						? createComponent(QCP, {
 								get children() {
@@ -262,12 +277,27 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 								client: queryClientInstance,
 							})
 						: renderInner()}
-				</Dummy>
+				</Hydration>
 			),
 			document,
 		);
+		flush();
 		finishHydration();
 
+		if (queryClientInstance) {
+			/*
+			 * TanStack `useQuery` (no HydrationCoordinator) attaches its cache
+			 * subscriber on a microtask after the hydration replay. Streamed
+			 * `__flare_queries` must land after that attach — applying it earlier
+			 * writes deferred data into a cache with no observers, and the
+			 * SSR-serialized fallback stays on screen.
+			 */
+			await Promise.resolve();
+			await Promise.resolve();
+			installQueryCacheResolver(queryClientInstance);
+			flush();
+		}
+
 		replaceHistoryState(window.location.pathname, state.params, window.location.search, {
 			hash: window.location.hash,
 			historyIndex: 0,
@@ -352,7 +382,7 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 			render(() => <DevErrorOverlay />, overlayRoot);
 		}
 
-		document.documentElement.setAttribute("data-hydrated", "");
+		document.documentElement.setAttribute(ATTR_HYDRATED, "");
 	}
 
 	/* Service worker registration / unregistration */

package/src/hydration/index.ts

@@ -1,6 +1,5 @@
-import { batch } from "solid-js";
 import type { GlobalBoundaries } from "../boundaries/index.ts";
-import type { CachedMatch, MatchCache } from "../caches/index.ts";
+import { resolveCacheTags, type CachedMatch, type MatchCache } from "../caches/index.ts";
 import { applyPerRouteHeads, initRouteHierarchy } from "../head-client/index.ts";
 import { isRenderFn, retryImport } from "../internal.ts";
 import type { LoadedRouteModule, LoadedRouteModules } from "../navigation/types.ts";
@@ -80,10 +79,8 @@ export function buildMatches(ctx: FlareProviderContext, modules: LoadedRouteModu
 		};
 	});
 
-	batch(() => {
-		ctx.setMatches(clientMatches);
-		ctx.setParams(modules.params);
-	});
+	ctx.setMatches(clientMatches);
+	ctx.setParams(modules.params);
 }
 
 export function extractRootBoundaries(rootLayout: LoadedRouteModule | undefined): GlobalBoundaries {
@@ -171,6 +168,29 @@ export function populateMatchCache(
 	}
 }
 
+export function applyMatchCacheTags(
+	matchCache: MatchCache,
+	modules: LoadedRouteModule[],
+	params: Record<string, string | string[]>,
+	search: SearchParams,
+): void {
+	for (const mod of modules) {
+		const deps = mod.effectsConfig?.loaderDeps?.({ search }) ?? [];
+		const matchId = computeMatchId({
+			loaderDeps: () => deps,
+			params,
+			routeId: mod.virtualPath,
+			search,
+		});
+		const entry = matchCache.get(matchId);
+		if (!entry) continue;
+		const tags = resolveCacheTags(mod.cache, params);
+		if (!tags) continue;
+		entry.tags = tags;
+		matchCache.set(entry);
+	}
+}
+
 export function hydrateHeadState(state: Pick<HydrationState, "ph">): void {
 	if (state.ph) {
 		/* First entry is root layout — its title is the fallback when pages don't define .head() */