[PR #794] [CLOSED] fix(app-router): move metadata heads outside loading Suspense boundary #851

New issue

Closed

opened 2026-05-06 13:10:28 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:10:28 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/794
Author: @NathanDrake2406
Created: 4/8/2026
Status: ❌ Closed

Base: main ← Head: fix/loading-suspense-wraps-metadata

📝 Commits (1)

4a015a8 fix(app-router): move metadata heads outside loading Suspense boundary

📊 Changes

2 files changed (+120 additions, -6 deletions)

View changed files

📝 packages/vinext/src/server/app-page-route-wiring.tsx (+6 -6)
📝 tests/app-page-route-wiring.test.ts (+114 -0)

📄 Description

Summary

Bug: When a route had both loading.tsx and metadata (export const metadata or generateMetadata), the <meta charSet>, <MetadataHead>, and <ViewportHead> elements were assembled before the Suspense wrap in buildAppPageRouteElement, causing them to land inside the Suspense boundary. For a suspending page, this delayed <title> and Open Graph tags until the page resolved, breaking SEO and social previews.
Fix: Reorder operations in buildAppPageRouteElement — apply the Suspense wrap to the page element first, then assemble the outer metadata fragment around the result. Metadata is now always in the initial HTML shell regardless of whether the page suspends.
Test: Adds a regression test in tests/app-page-route-wiring.test.ts that walks the React element tree directly to verify that <meta>, MetadataHead, and ViewportHead are siblings of Suspense, not descendants of it.

Test plan

vp test run tests/app-page-route-wiring.test.ts — all 11 tests pass, including the new regression test
vp check tests/app-page-route-wiring.test.ts packages/vinext/src/server/app-page-route-wiring.tsx — format, lint, and types clean
Existing slow route test (renders loading.tsx Suspense wrapper for routes with loading.tsx) still passes
Existing metadata tests (renders dynamic metadata, renders static metadata) still pass

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/794 **Author:** [@NathanDrake2406](https://github.com/NathanDrake2406) **Created:** 4/8/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/loading-suspense-wraps-metadata` --- ### 📝 Commits (1) - [`4a015a8`](https://github.com/cloudflare/vinext/commit/4a015a88d7fd8963c6faebb27edf11c1cb39d1ff) fix(app-router): move metadata heads outside loading Suspense boundary ### 📊 Changes **2 files changed** (+120 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/server/app-page-route-wiring.tsx` (+6 -6) 📝 `tests/app-page-route-wiring.test.ts` (+114 -0) </details> ### 📄 Description ## Summary - **Bug:** When a route had both `loading.tsx` and metadata (`export const metadata` or `generateMetadata`), the `<meta charSet>`, `<MetadataHead>`, and `<ViewportHead>` elements were assembled *before* the Suspense wrap in `buildAppPageRouteElement`, causing them to land **inside** the Suspense boundary. For a suspending page, this delayed `<title>` and Open Graph tags until the page resolved, breaking SEO and social previews. - **Fix:** Reorder operations in `buildAppPageRouteElement` — apply the Suspense wrap to the page element first, then assemble the outer metadata fragment around the result. Metadata is now always in the initial HTML shell regardless of whether the page suspends. - **Test:** Adds a regression test in `tests/app-page-route-wiring.test.ts` that walks the React element tree directly to verify that `<meta>`, `MetadataHead`, and `ViewportHead` are siblings of `Suspense`, not descendants of it. ## Test plan - [ ] `vp test run tests/app-page-route-wiring.test.ts` — all 11 tests pass, including the new regression test - [ ] `vp check tests/app-page-route-wiring.test.ts packages/vinext/src/server/app-page-route-wiring.tsx` — format, lint, and types clean - [ ] Existing `slow` route test (`renders loading.tsx Suspense wrapper for routes with loading.tsx`) still passes - [ ] Existing metadata tests (`renders dynamic metadata`, `renders static metadata`) still pass --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>