Skip to content
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

Remove encryption of empty props to allow server island cacheability #12956

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+54 −2
Open

Remove encryption of empty props to allow server island cacheability #12956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5e1d03
tests for cacheable server islands with no props
kaytwo Jan 10, 2025
3ecb6e2
allow server islands to omit encrypted props when they do not have an…
kaytwo Jan 10, 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
2 changes: 1 addition & 1 deletion packages/astro/src/core/server-islands/endpoint.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export function createEndpoint(manifest: SSRManifest) {
const key = await manifest.key;
const encryptedProps = data.encryptedProps;

const propString = await decryptString(key, encryptedProps);
const propString = encryptedProps === '' ? '{}' : await decryptString(key, encryptedProps);
const props = JSON.parse(propString);

const componentModule = await imp();
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -76,7 +76,8 @@ export function renderServerIsland(
}

const key = await result.key;
const propsEncrypted = await encryptString(key, JSON.stringify(props));
const propsEncrypted =
Object.keys(props).length === 0 ? '' : await encryptString(key, JSON.stringify(props));

const hostId = crypto.randomUUID();

Expand Down
11 changes: 11 additions & 0 deletions packages/astro/test/fixtures/server-islands/ssr/src/components/ComponentWithProps.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
await new Promise(resolve => setTimeout(resolve, 1));
Astro.response.headers.set('X-Works', 'true');
export type Props = {
greeting?: string;
};
const greeting = Astro.props?.greeting ? Astro.props.greeting : 'default greeting';
---
<div id="islandContent">
<div id="greeting">{greeting}</div>
</div>
11 changes: 11 additions & 0 deletions packages/astro/test/fixtures/server-islands/ssr/src/pages/includeComponentWithProps.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
import ComponentWithProps from '../components/ComponentWithProps.astro';
---
<html>
<head>
<title>Testing</title>
</head>
<body>
<ComponentWithProps server:defer greeting="Hello" />
</body>
</html>
29 changes: 29 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 @@ -103,6 +103,35 @@ describe('Server islands', () => {
const response = await app.render(request);
assert.equal(response.headers.get('x-robots-tag'), 'noindex');
});

it('omits empty props from the query string', async () => {
const res = await fixture.fetch('/');
assert.equal(res.status, 200);
const html = await res.text();
const fetchMatch = html.match(/fetch\('\/_server-islands\/Island\?[^']*p=([^&']*)/s);
assert.equal(fetchMatch.length, 2, 'should include props in the query string');
assert.equal(fetchMatch[1], '', 'should not include encrypted empty props');
});
it('re-encrypts props on each request', async () => {
const res = await fixture.fetch('/includeComponentWithProps/');
assert.equal(res.status, 200);
const html = await res.text();
const fetchMatch = html.match(/fetch\('\/_server-islands\/Island\?[^']*p=([^&']*)/s);
assert.equal(fetchMatch.length, 2, 'should include props in the query string');
const firstProps = fetchMatch[1];
const secondRes = await fixture.fetch('/includeComponentWithProps/');
assert.equal(secondRes.status, 200);
const secondHtml = await secondRes.text();
const secondFetchMatch = secondHtml.match(
/fetch\('\/_server-islands\/Island\?[^']*p=([^&']*)/s,
);
assert.equal(secondFetchMatch.length, 2, 'should include props in the query string');
assert.notEqual(
secondFetchMatch[1],
firstProps,
'should re-encrypt props on each request with a different IV',
);
});
});
});

Expand Down
Loading