fix: update the description tags upon client-side navigation (vikejs/vike#3524)

[brillout]

Implements vikejs/vike#3524: +description now updates upon client-side navigation, the same way +title does.

Problem

+description only rendered <meta name="description"> and <meta property="og:description"> into the HTML of the first page. Upon client-side navigation, the tags kept the description of the first page. That's fine for crawlers (they read the HTML), but some tools read the tags from the DOM of the page the user is currently viewing. For example, the Pinterest browser extension uses og:description when saving a pin.

Change

• description is now a client-side setting (env: { server: true, client: true }, like title and lang). Upon client-side navigation, onRenderClient() applies it: applyHeadSettings() updates <meta name="description"> and <meta property="og:description">, and creates them if they're missing.
• Same semantics as title (see the comment in applyHeadSettings.tsx):
  • undefined: the tags are left untouched (they may have been set by +Head)
  • null or '': the tags are removed (the server-side doesn't render them either)
• useConfig({ description }) / <Config description> works upon client-side navigation too:
  • Inside UI components: applied like title, with the same precedence (fix: let useConfig() inside UI components take precedence upon client-side navigation (vikejs/vike#3525) #230).
  • Inside +data(): description is added to configsClientSide, so it's kept in pageContext._configViaHook and sent to the client, including in prerendered *.pageContext.json files (useConfig({ title }) in +data loses title on prerendered client navigation vike-vue#233).
• Types: a +description function now receives PageContext instead of PageContextServer (like +title), since it's also called on the client-side.

Also: og:title (separate commit)

+title renders <title> and <meta property="og:title">, but upon client-side navigation only document.title was updated. Now og:title is updated too, so all the tags rendered by +title and +description match the current page. Otherwise og:description would be up to date while og:title still showed the first page. It's a separate commit (20ec7d4) in case you'd rather drop it.

Minor breaking change

+description is now also loaded and called in the browser, like +title. So a +description function that reads pageContext properties that aren't sent to the client (https://vike.dev/passToClient), or a +description.js file that imports server-only code, needs to be updated. Maybe worth a MINOR BREAKING CHANGES note.

Tests (examples/full)

• New test description update client-side page navigation. It navigates / → /without-ssr → /star-wars → /images → /without-ssr and checks <meta name="description"> and <meta property="og:description"> after each step. That covers a description set:
  • by +description (new, on /without-ssr),
  • by useConfig() inside +data() (/star-wars),
  • by <Config description> inside a UI component (new, on /images).
    The last step checks that the description of /images doesn't leak to the next page.
• useConfig() HTML checks the description set by <Config description> in the HTML.
• expectTitle() now also checks og:title. It's used by the title tests, which cover both hydration and client-side navigation.
• I checked that the new assertions fail without the fix:
  • Without the first commit, description update client-side page navigation fails with expected null to equal 'Page rendered only in the browser'.
  • Without the og:title commit, title update client-side page navigation fails with expected 'My Vike + React App' to equal '6 Star Wars Movies'.
• Locally, all e2e tests pass (all examples, dev and preview), as do test:types, test:units and format:check.

Related PRs

• fix: update the description tags upon client-side navigation (vikejs/vike#3524) vike-vue#240: same change for vike-vue
• fix: update the description tags upon client-side navigation (vikejs/vike#3524) vike-solid#252: same change for vike-solid
• docs: +description updates upon client-side navigation (#3524) vike#3527: docs

🤖 Generated with Claude Code

https://claude.ai/code/session_019AAZpDLjrcSr6BwQgpVs9a