From fdd5bf277e5c1cfa30c1bd2ca123f4e90e8d09d9 Mon Sep 17 00:00:00 2001 From: Ross Robino Date: Thu, 7 Mar 2024 08:31:30 -0500 Subject: [PATCH] fix: client prerender fallback (#10295) * fix: client prerender fallback * Use Speculation Rules prefetch as prerender fallback instead of link tag, improve changeset * Update .changeset/warm-spoons-fetch.md --------- Co-authored-by: Bjorn Lu --- .changeset/warm-spoons-fetch.md | 5 +++++ packages/astro/src/@types/astro.ts | 2 +- packages/astro/src/prefetch/index.ts | 9 +++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/warm-spoons-fetch.md diff --git a/.changeset/warm-spoons-fetch.md b/.changeset/warm-spoons-fetch.md new file mode 100644 index 000000000000..0bc053bf1f7f --- /dev/null +++ b/.changeset/warm-spoons-fetch.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Adds a prefetch fallback when using the `experimental.clientPrerender` option. If prerendering fails, which can happen if [Chrome extensions block prerendering](https://developer.chrome.com/blog/speculation-rules-improvements#chrome-limits), it will fallback to prefetching the URL. This works by adding a `prefetch` field to the `speculationrules` script, but does not create an extra request. diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index e8a948347cb6..8e0803410647 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1653,7 +1653,7 @@ export interface AstroUserConfig { * @description * Enables pre-rendering your prefetched pages on the client in supported browsers. * - * This feature uses the experimental [Speculation Rules Web API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and overrides the default `prefetch` behavior globally to prerender links on the client. + * This feature uses the experimental [Speculation Rules Web API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and enhances the default `prefetch` behavior globally to prerender links on the client. * You may wish to review the [possible risks when prerendering on the client](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API#unsafe_prefetching) before enabling this feature. * * Enable client side prerendering in your `astro.config.mjs` along with any desired `prefetch` configuration options: diff --git a/packages/astro/src/prefetch/index.ts b/packages/astro/src/prefetch/index.ts index b56f9fffd2c4..6d7cb294bbb6 100644 --- a/packages/astro/src/prefetch/index.ts +++ b/packages/astro/src/prefetch/index.ts @@ -330,6 +330,15 @@ function appendSpeculationRules(url: string) { urls: [url], }, ], + // Currently, adding `prefetch` is required to fallback if `prerender` fails. + // Possibly will be automatic in the future, in which case it can be removed. + // https://github.com/WICG/nav-speculation/issues/162#issuecomment-1977818473 + prefetch: [ + { + source: 'list', + urls: [url], + }, + ], }); document.head.append(script); }