From 4cd6c43e221e40345dfb433f9c63395f886091fd Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Tue, 20 Aug 2024 13:53:04 -0400 Subject: [PATCH] Use GET and preload links on Server Islands (#11732) * Use GET and preload links on Server Islands Use origin/next Remove since * Add test to verify large islands work * Update based on feedback * Merge conflict fixed * Update test --- .changeset/healthy-ads-scream.md | 13 +++++ .../src/components/Island.astro | 5 +- .../e2e/fixtures/server-islands/src/lorem.ts | 9 ++++ .../server-islands/src/pages/index.astro | 16 ++++-- packages/astro/e2e/server-islands.test.js | 20 ++++--- .../astro/src/core/server-islands/endpoint.ts | 53 +++++++++++++++++-- .../runtime/server/render/server-islands.ts | 42 ++++++++++++--- 7 files changed, 138 insertions(+), 20 deletions(-) create mode 100644 .changeset/healthy-ads-scream.md create mode 100644 packages/astro/e2e/fixtures/server-islands/src/lorem.ts diff --git a/.changeset/healthy-ads-scream.md b/.changeset/healthy-ads-scream.md new file mode 100644 index 0000000000..f78bd6d521 --- /dev/null +++ b/.changeset/healthy-ads-scream.md @@ -0,0 +1,13 @@ +--- +'astro': patch +--- + +Use GET requests with preloading for Server Islands + +Server Island requests include the props used to render the island as well as any slots passed in (excluding the fallback slot). Since browsers have a max 4mb URL length we default to using a POST request to avoid overflowing this length. + +However in reality most usage of Server Islands are fairly isolated and won't exceed this limit, so a GET request is possible by passing this same information via search parameters. + +Using GET means we can also include a `` tag to speed up the request. + +This change implements this, with safe fallback to POST. diff --git a/packages/astro/e2e/fixtures/server-islands/src/components/Island.astro b/packages/astro/e2e/fixtures/server-islands/src/components/Island.astro index 5eab0dc4df..3daa55615e 100644 --- a/packages/astro/e2e/fixtures/server-islands/src/components/Island.astro +++ b/packages/astro/e2e/fixtures/server-islands/src/components/Island.astro @@ -1,6 +1,7 @@ --- const { secret } = Astro.props; --- -

I am an island

+ +

I am an island

-

{secret}

+

{secret}

diff --git a/packages/astro/e2e/fixtures/server-islands/src/lorem.ts b/packages/astro/e2e/fixtures/server-islands/src/lorem.ts new file mode 100644 index 0000000000..74210474cd --- /dev/null +++ b/packages/astro/e2e/fixtures/server-islands/src/lorem.ts @@ -0,0 +1,9 @@ +const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`; + +export function generateLongText(paragraphs = 5) { + let arr = new Array(paragraphs); + for(let i = 0; i < paragraphs; i++) { + arr[i] = content; + } + return arr.join('\n'); +} diff --git a/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro b/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro index eff5df25e9..70a4fcabcb 100644 --- a/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro @@ -2,6 +2,9 @@ import Island from '../components/Island.astro'; import Self from '../components/Self.astro'; import HTMLError from '../components/HTMLError.astro'; +import { generateLongText } from '../lorem'; + +const content = generateLongText(5); --- @@ -9,11 +12,18 @@ import HTMLError from '../components/HTMLError.astro'; - -

children

- +
+ +

children

+ +
+ +
+ +
+