Files
cloudflare__vinext/tests/hybrid-client-route-owner.test.ts
T
Nathan Nguyen a3d2f92152 fix(router): honor hybrid pages route priority (#1997)
* fix(router): honor hybrid pages route priority

* fix(router): share hybrid owner decision with client navigation

PR #1997 fixed the server-side route ownership for direct document loads,
but the same invariant broke for client-side soft navigations and the
matching prefetch path:

- navigateClientSide() always delegated to the App runtime's RSC fetch,
  even when the Pages route had higher priority. renderPagesFallback()
  short-circuits RSC requests with null, so the App catch-all won.
- prefetchUrl() prefetched an RSC stream for any URL that matched an App
  route, again ignoring Pages ownership.
- The Pages entry was loaded on every hybrid request, even when a static
  App route had already matched (Pages can never win in that case).

Expose the Pages route manifest on the client via a new
__VINEXT_PAGES_LINK_PREFETCH_ROUTES__ window global emitted by both the
App and Pages browser entries. The link shim consults a shared
resolveHybridClientRouteOwner helper that mirrors the server-side
pagesRouteHasPriorityOverAppRoute comparison. When Pages owns the URL,
the click handler issues a window.location navigation and the prefetch
path returns early.

Gate the renderPagesFallback call behind a static-App-route check in
handleAppRscRequest: when a static App route matches, the bridge
cannot win, so skip the eager Pages entry load. Centralise the
comparison in a new resolveHybridRouteOwner helper so server and
client reach the same answer for the same (URL, route pair).

Adds the missing client-navigation coverage to the use-params e2e
fixture (Link from /app/ to /pages-dir/foobar) and unit tests for
the shared owner decision.

* fix(router): mirror server hybrid owner decision on the client

PR review flagged two split-brain bugs in the previous hybrid
ownership fix: a hand-copied client comparator and a Link-only
ownership gate that left programmatic App Router navigations on
the wrong path.

The hand-copied routePrecedence in hybrid-client-route-owner.ts
omitted the static-prefix reduction that lives in
routing/utils.ts#routePrecedence, and used a strict-less-than
comparison that returned App for identical dynamic patterns. The
server returns Pages for both cases (Pages providers sort ahead
of App providers, and routePrecedence subtracts 50 per static
prefix segment). The split produced a real ownership disagreement
on overlapping patterns like /_sites/:slug* (Pages) vs /:slug*
(App).

Add a shared compareHybridRoutePatterns to routing/utils.ts as
the single source of truth: the static/dynamic short-circuits plus
a sortRoutes call (which carries the static-prefix reduction and
the Pages-first equal-pattern tiebreak). The server
pagesRouteHasPriorityOverAppRoute and the client
resolveHybridClientRouteOwner both delegate to it, so they
cannot diverge. Drop the hand-copied routePrecedence entirely.

Wire the ownership check at the App navigation runtime boundary
so useRouter().push, useRouter().replace, gesturePush, and form
submits all get the same hard-nav contract as the Link click
handler. Specifically:

- navigateClientSide: after same-origin normalization, if Pages
  owns the URL, hard-navigate via window.location and return
  (matching the existing external-URL branch).
- _appRouter.prefetch: short-circuit RSC URL construction for
  Pages-owned targets so we do not warm an unusable cache entry.

Centralise the existing two inline hard-nav branches in
navigateClientSide into a hardNavigateTo helper for clarity.

Tests:

- Direct unit tests for compareHybridRoutePatterns covering
  identical-dynamic tiebreak, static-prefix dynamic overlap,
  static-prefix catch-all overlap, and infix-static bonus.
- Direct unit tests for resolveHybridClientRouteOwner mirroring
  the server assertions plus a basePath-stripping test.
- e2e: useRouter().push('/pages-dir/foobar') from an App page
  resolves to the Pages document.
- e2e: useRouter().prefetch('/pages-dir/foobar') issues zero
  RSC requests for the target URL.

* docs(router): fix stale score in static-prefix catch-all test comment

The hand-copied comparator note quoted the dynamic-segment scores
(51 / 1000) for the optional-catch-all example (/_sites/:slug*
vs /:slug*). The current optional-catch-all scoring actually
produces 1951 vs 2000. The test assertion was correct; only the
comment was stale.

* test(use-params): fix direct-load single dynamic param to use /a instead of /a/b

* fix(router): compare hybrid routes structurally

* fix(router): reject hybrid route conflicts

* fix(router): refresh hybrid route ownership

* fix(router): preserve hybrid routing lifecycle

* fix(router): recheck pages routes after rewrites

* fix(router): preserve rewritten pages queries

* fix(router): preserve rewritten route ownership

* fix(router): resolve client rewrites sequentially

* fix(router): apply rewrite phases sequentially

* fix(router): preserve rewrite params and endpoints

* fix(router): hand off endpoint navigations

* fix(router): preserve rewrite fragment params

* test(e2e): avoid hybrid fixture route conflicts

* test(pages): await async config validation

* test(hybrid): avoid duplicate page fixtures

* chore(router): clarify hybrid priority semantics

* refactor(router): remove duplicate app route matcher

* docs(router): clarify client hybrid comparator

---------

Co-authored-by: James <james@eli.cx>
2026-06-15 00:22:00 +01:00

323 lines
11 KiB
TypeScript

/**
* Direct unit tests for the client-side `resolveHybridClientRouteOwner`.
*
* Mirrors the server-side `pagesRouteHasPriorityOverAppRoute` tests and
* adds the manifest-mocking plumbing needed to drive the client resolver
* with synthetic `__VINEXT_LINK_PREFETCH_ROUTES__` and
* `__VINEXT_PAGES_LINK_PREFETCH_ROUTES__` arrays.
*
* The hard guarantee these tests assert: the client and the server reach
* the same owner for the same (pages pattern, app pattern) pair. If a
* test here ever diverges from `tests/hybrid-route-priority.test.ts`,
* the hybrid invariant is broken and the next browser hard-navigation
* will go to the wrong router.
*
* The trie matcher expects Next.js-segment-encoded patternParts: static
* segments are plain strings, dynamic segments start with `:`, catch-alls
* end with `+`, and optional catch-alls end with `*`. See
* `routing/route-trie.ts`.
*/
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import type {
VinextLinkPrefetchRoute,
VinextPagesLinkPrefetchRoute,
} from "../packages/vinext/src/client/vinext-next-data.js";
import type { NextRewrite } from "../packages/vinext/src/config/next-config.js";
import { resolveHybridClientRouteOwner } from "../packages/vinext/src/shims/internal/hybrid-client-route-owner.js";
const APP_BASE = "http://localhost/";
type WindowState = {
app: VinextLinkPrefetchRoute[];
pages: VinextPagesLinkPrefetchRoute[];
rewrites?: {
afterFiles: NextRewrite[];
beforeFiles: NextRewrite[];
fallback: NextRewrite[];
};
};
function installWindow({ app, pages, rewrites }: WindowState): void {
(globalThis as any).window = {
location: { href: APP_BASE, origin: "http://localhost" },
__VINEXT_LINK_PREFETCH_ROUTES__: app,
__VINEXT_PAGES_LINK_PREFETCH_ROUTES__: pages,
__VINEXT_CLIENT_REWRITES__: rewrites,
};
}
function uninstallWindow(): void {
delete (globalThis as any).window;
}
let savedWindow: unknown;
beforeEach(() => {
savedWindow = (globalThis as any).window;
});
afterEach(() => {
if (savedWindow === undefined) {
uninstallWindow();
} else {
(globalThis as any).window = savedWindow;
}
});
const appRoute = (patternParts: string[], isDynamic = true): VinextLinkPrefetchRoute => ({
canPrefetchLoadingShell: !isDynamic,
isDynamic,
patternParts,
});
const pagesRoute = (patternParts: string[], isDynamic = true): VinextPagesLinkPrefetchRoute => ({
canPrefetchLoadingShell: false,
isDynamic,
patternParts,
});
const documentRoute = (patternParts: string[], isDynamic = true): VinextLinkPrefetchRoute => ({
canPrefetchLoadingShell: false,
documentOnly: true,
isDynamic,
patternParts,
});
describe("resolveHybridClientRouteOwner", () => {
it("returns null when neither router has a matching manifest", () => {
installWindow({ app: [], pages: [] });
expect(resolveHybridClientRouteOwner("/missing", "")).toBeNull();
});
it("returns null when neither router matched the URL", () => {
installWindow({
app: [appRoute(["a"])],
pages: [pagesRoute(["b"])],
});
expect(resolveHybridClientRouteOwner("/c", "")).toBeNull();
});
it("returns 'app' when only the App manifest matched", () => {
installWindow({
app: [appRoute(["a", ":slug"])],
pages: [pagesRoute(["b"])],
});
expect(resolveHybridClientRouteOwner("/a/foobar", "")).toBe("app");
});
it("returns 'pages' when only the Pages manifest matched", () => {
installWindow({
app: [appRoute(["a"])],
pages: [pagesRoute(["b", ":slug"])],
});
expect(resolveHybridClientRouteOwner("/b/foobar", "")).toBe("pages");
});
it("returns document ownership for App route handlers and Pages API routes", () => {
installWindow({
app: [documentRoute(["app-api"], false)],
pages: [{ ...pagesRoute(["api", ":slug"]), documentOnly: true }],
});
expect(resolveHybridClientRouteOwner("/app-api", "")).toBe("document");
expect(resolveHybridClientRouteOwner("/api/test", "")).toBe("document");
});
it("applies document ownership only after choosing the most specific route", () => {
installWindow({
app: [appRoute(["api", "settings"], false)],
pages: [{ ...pagesRoute(["api", ":slug"]), documentOnly: true }],
});
expect(resolveHybridClientRouteOwner("/api/settings", "")).toBe("app");
installWindow({
app: [documentRoute(["api", ":slug"])],
pages: [pagesRoute(["api", "settings"], false)],
});
expect(resolveHybridClientRouteOwner("/api/settings", "")).toBe("pages");
});
it.each(["beforeFiles", "afterFiles", "fallback"] as const)(
"resolves %s rewrites before choosing the route owner",
(rewritePhase) => {
installWindow({
app: [appRoute(["app-destination"], false)],
pages: [pagesRoute(["pages-destination"], false)],
rewrites: {
beforeFiles:
rewritePhase === "beforeFiles"
? [{ source: "/source", destination: "/app-destination" }]
: [],
afterFiles:
rewritePhase === "afterFiles"
? [{ source: "/source", destination: "/app-destination" }]
: [],
fallback:
rewritePhase === "fallback"
? [{ source: "/source", destination: "/app-destination" }]
: [],
},
});
expect(resolveHybridClientRouteOwner("/source", "")).toBe("app");
},
);
it("evaluates conditional client rewrites against browser-visible context", () => {
installWindow({
app: [appRoute(["app-destination"], false)],
pages: [],
rewrites: {
afterFiles: [],
beforeFiles: [
{
source: "/source",
destination: "/app-destination",
has: [{ type: "query", key: "preview", value: "1" }],
},
],
fallback: [],
},
});
expect(resolveHybridClientRouteOwner("/source", "")).toBeNull();
expect(resolveHybridClientRouteOwner("/source?preview=1", "")).toBe("app");
});
it("applies every beforeFiles rewrite before choosing ownership", () => {
installWindow({
app: [],
pages: [pagesRoute(["pages-destination"], false)],
rewrites: {
afterFiles: [],
beforeFiles: [
{ source: "/source", destination: "/intermediate?first=1" },
{ source: "/intermediate", destination: "/pages-destination?second=2" },
],
fallback: [],
},
});
expect(resolveHybridClientRouteOwner("/source?original=1", "")).toBe("pages");
});
it.each(["afterFiles", "fallback"] as const)(
"continues through unmatched %s rewrite destinations",
(rewritePhase) => {
installWindow({
app: [appRoute(["app-destination"], false)],
pages: [],
rewrites: {
afterFiles:
rewritePhase === "afterFiles"
? [
{ source: "/source", destination: "/intermediate" },
{ source: "/intermediate", destination: "/app-destination" },
]
: [],
beforeFiles: [],
fallback:
rewritePhase === "fallback"
? [
{ source: "/source", destination: "/intermediate" },
{ source: "/intermediate", destination: "/app-destination" },
]
: [],
},
});
expect(resolveHybridClientRouteOwner("/source", "")).toBe("app");
},
);
it("lets a more specific Pages dynamic route beat an App root catch-all", () => {
// Mirrors the server test of the same name. /pages-dir/:dynamic
// (score 51) beats /:path+ (score 1000).
installWindow({
app: [appRoute([":path+"])],
pages: [pagesRoute(["pages-dir", ":dynamic"])],
});
expect(resolveHybridClientRouteOwner("/pages-dir/foobar", "")).toBe("pages");
});
it("lets an App static route own the request when Pages only has a catch-all", () => {
installWindow({
app: [appRoute(["dashboard"], false)],
pages: [pagesRoute([":path+"])],
});
expect(resolveHybridClientRouteOwner("/dashboard", "")).toBe("app");
});
it("lets a static Pages route win over a dynamic App catch-all", () => {
// E.g. Pages has a literal `/about` page, App only has a catch-all.
// The literal Pages hit must own the request even though the App
// catch-all matches the same URL.
installWindow({
app: [appRoute([":path+"])],
pages: [pagesRoute(["about"], false)],
});
expect(resolveHybridClientRouteOwner("/about", "")).toBe("pages");
});
it("rejects an identical static App and Pages route", () => {
installWindow({
app: [appRoute([], false)],
pages: [pagesRoute([], false)],
});
expect(() => resolveHybridClientRouteOwner("/", "")).toThrow("Conflicting app and page routes");
});
it("retains Pages provider order after merged route validation", () => {
installWindow({
app: [appRoute([":slug"])],
pages: [pagesRoute([":id"])],
});
expect(resolveHybridClientRouteOwner("/anything", "")).toBe("pages");
});
it("lets a static-prefix Pages catch-all beat a bare App catch-all", () => {
// `/_sites/:slug*` (score 1951 with the static-prefix reduction)
// must beat `/:slug*` (score 2000). The previous hand-copied
// comparator missed the static-prefix reduction and returned 'app'
// for this case, splitting client / server ownership.
installWindow({
app: [appRoute([":slug*"])],
pages: [pagesRoute(["_sites", ":slug*"])],
});
expect(resolveHybridClientRouteOwner("/_sites/anything/here", "")).toBe("pages");
});
it("lets a static-prefix Pages dynamic beat a bare App dynamic", () => {
installWindow({
app: [appRoute([":subdomain"])],
pages: [pagesRoute(["_sites", ":subdomain"])],
});
expect(resolveHybridClientRouteOwner("/_sites/foo", "")).toBe("pages");
});
it("prioritizes an earlier static App segment over a later static Pages segment", () => {
installWindow({
app: [appRoute(["account", ":tab"])],
pages: [pagesRoute([":section", "details"])],
});
expect(resolveHybridClientRouteOwner("/account/details", "")).toBe("app");
});
it("keeps an exact App dynamic route ahead of a Pages optional catch-all", () => {
installWindow({
app: [appRoute([":section"])],
pages: [pagesRoute([":section", ":rest*"])],
});
expect(resolveHybridClientRouteOwner("/foo", "")).toBe("app");
});
it("ignores the basePath prefix when matching", () => {
installWindow({
app: [appRoute(["a"])],
pages: [pagesRoute(["pages-dir", ":dynamic"])],
});
// The client strips the basePath before consulting the manifest,
// matching the server's normalisation.
expect(resolveHybridClientRouteOwner("/base/pages-dir/foobar", "/base")).toBe("pages");
expect(resolveHybridClientRouteOwner("/base/a", "/base")).toBe("app");
});
});