Skip to content

fix(render): server islands in fragments #14029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ematipico merged 5 commits into from
Jul 2, 2025
Merged

fix(render): server islands in fragments #14029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9605f0
fix(render): server islands in fragments
ematipico Jul 1, 2025
89c9992
feedback
ematipico Jul 1, 2025
dd9fa85
expanded the fix in the changeset
ematipico Jul 1, 2025
821f405
Apply suggestions from code review
ematipico Jul 2, 2025
cd6818e
Update .changeset/great-sloths-rule.md
ematipico Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .changeset/great-sloths-rule.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
'astro': patch
---

Fixes a bug where server islands wouldn't be correctly rendered when they are rendered inside fragments.

Now the following examples work as expected:

```astro
---
import { Cart } from "../components/Cart.astro";
---

<>
<Cart server:defer />
</>


<Fragment slot="rest">
<Cart server:defer>
<div slot="fallback">
Not working
</div>
</Cart>
</Fragment>

```
98 changes: 70 additions & 28 deletions packages/astro/src/runtime/server/render/server-islands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@ export class ServerIslandComponent {
displayName: string;
hostId: string | undefined;
islandContent: string | undefined;
componentPath: string | undefined;
componentExport: string | undefined;
componentId: string | undefined;
constructor(
result: SSRResult,
props: Record<string | number, any>,
Expand All @@ -68,8 +71,72 @@ export class ServerIslandComponent {
}

async init(): Promise<ThinHead> {
const content = await this.getIslandContent();

if (this.result.cspDestination) {
this.result._metadata.extraScriptHashes.push(
await generateCspDigest(SERVER_ISLAND_REPLACER, this.result.cspAlgorithm),
);
const contentDigest = await generateCspDigest(content, this.result.cspAlgorithm);
this.result._metadata.extraScriptHashes.push(contentDigest);
}

return createThinHead();
}
async render(destination: RenderDestination) {
const hostId = await this.getHostId();
const islandContent = await this.getIslandContent();
destination.write(createRenderInstruction({ type: 'server-island-runtime' }));
destination.write('<!--[if astro]>server-island-start<![endif]-->');
// Render the slots
for (const name in this.slots) {
if (name === 'fallback') {
await renderChild(destination, this.slots.fallback(this.result));
}
}
destination.write(
`<script type="module" data-astro-rerun data-island-id="${hostId}">${islandContent}</script>`,
);
}

getComponentPath(): string {
if (this.componentPath) {
return this.componentPath;
}
const componentPath = this.props['server:component-path'];
if (!componentPath) {
throw new Error(`Could not find server component path`);
}
this.componentPath = componentPath;
return componentPath;
}

getComponentExport(): string {
if (this.componentExport) {
return this.componentExport;
}
const componentExport = this.props['server:component-export'];
if (!componentExport) {
throw new Error(`Could not find server component export`);
}
this.componentExport = componentExport;
return componentExport;
}

async getHostId() {
if (!this.hostId) {
this.hostId = await crypto.randomUUID();
}
return this.hostId;
}

async getIslandContent() {
if (this.islandContent) {
return this.islandContent;
}

const componentPath = this.getComponentPath();
const componentExport = this.getComponentExport();
const componentId = this.result.serverIslandNameMap.get(componentPath);

if (!componentId) {
Expand Down Expand Up @@ -98,8 +165,7 @@ export class ServerIslandComponent {
? ''
: await encryptString(key, JSON.stringify(this.props));

const hostId = crypto.randomUUID();

const hostId = await this.getHostId();
const slash = this.result.base.endsWith('/') ? '' : '/';
let serverIslandUrl = `${this.result.base}${slash}_server-islands/${componentId}${this.result.trailingSlash === 'always' ? '/' : ''}`;

Expand Down Expand Up @@ -134,32 +200,8 @@ let response = await fetch('${serverIslandUrl}', {
body: JSON.stringify(data),
});`;

const content = `${method}replaceServerIsland('${hostId}', response);`;

if (this.result.cspDestination) {
this.result._metadata.extraScriptHashes.push(
await generateCspDigest(SERVER_ISLAND_REPLACER, this.result.cspAlgorithm),
);
const contentDigest = await generateCspDigest(content, this.result.cspAlgorithm);
this.result._metadata.extraScriptHashes.push(contentDigest);
}
this.islandContent = content;
this.hostId = hostId;

return createThinHead();
}
async render(destination: RenderDestination) {
destination.write(createRenderInstruction({ type: 'server-island-runtime' }));
destination.write('<!--[if astro]>server-island-start<![endif]-->');
// Render the slots
for (const name in this.slots) {
if (name === 'fallback') {
await renderChild(destination, this.slots.fallback(this.result));
}
}
destination.write(
`<script type="module" data-astro-rerun data-island-id="${this.hostId}">${this.islandContent}</script>`,
);
this.islandContent = `${method}replaceServerIsland('${hostId}', response);`;
return this.islandContent;
}
}

Expand Down
19 changes: 19 additions & 0 deletions packages/astro/test/fixtures/server-islands/ssr/src/pages/fragment.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
import Island from '../components/Island.astro';

---
<html>
<head>
<title>Testing</title>
</head>
<body>
<h1>Testing</h1>
<Fragment>
<Island server:defer>
<div slot="fallback">
Not working
</div>
</Island>
</Fragment>
</body>
</html>
19 changes: 19 additions & 0 deletions packages/astro/test/fixtures/server-islands/ssr/src/pages/named-fragment.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
import Island from '../components/Island.astro';

---
<html>
<head>
<title>Testing</title>
</head>
<body>
<h1>Testing</h1>
<Fragment slot="rest">
<Island server:defer>
<div slot="fallback">
Not working
</div>
</Island>
</Fragment>
</body>
</html>
18 changes: 18 additions & 0 deletions packages/astro/test/server-islands.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,24 @@ describe('Server islands', () => {
assert.equal(fetchMatch.length, 2, 'should include props in the query string');
assert.equal(fetchMatch[1], '', 'should not include encrypted empty props');
});

it('supports fragments', async () => {
const res = await fixture.fetch('/fragment');
assert.equal(res.status, 200);
const html = await res.text();
const fetchMatch = html.match(/fetch\('\/_server-islands\/Island\?[^']*p=([^&']*)/);
assert.equal(fetchMatch.length, 2, 'should include props in the query string');
assert.equal(fetchMatch[1], '', 'should not include encrypted empty props');
});

it('supports fragments with named slots', async () => {
const res = await fixture.fetch('/fragment');
assert.equal(res.status, 200);
const html = await res.text();
const fetchMatch = html.match(/fetch\('\/_server-islands\/Island\?[^']*p=([^&']*)/);
assert.equal(fetchMatch.length, 2, 'should include props in the query string');
assert.equal(fetchMatch[1], '', 'should not include encrypted empty props');
});
});

describe('prod', () => {
Expand Down
1 change: 0 additions & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.