Server Islands - Handle base + trailingSlash ignore (#11712)

* Server Islands - Handle base + trailingSlash ignore * Add a changeset
withastro · Aug 15, 2024 · 791d809 · 791d809
1 parent 4a2cb3d
commit 791d809
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/.changeset/kind-bees-admire.md b/.changeset/kind-bees-admire.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix mixed use of base + trailingSlash in Server Islands
diff --git a/packages/astro/e2e/fixtures/server-islands/astro.config.mjs b/packages/astro/e2e/fixtures/server-islands/astro.config.mjs
@@ -9,7 +9,7 @@ export default defineConfig({
 	output: 'hybrid',
 	adapter: nodejs({ mode: 'standalone' }),
 	integrations: [react(), mdx()],
-	trailingSlash: 'always',
+	trailingSlash: process.env.TRAILING_SLASH ?? 'always',
 	experimental: {
 		serverIslands: true,
 	}

diff --git a/packages/astro/e2e/server-islands.test.js b/packages/astro/e2e/server-islands.test.js
@@ -52,6 +52,26 @@ test.describe('Server islands', () => {
 		});
 	});
 
+	test.describe('Development - trailingSlash: ignore', () => {
+		let devServer;
+
+		test.beforeAll(async ({ astro }) => {
+			process.env.TRAILING_SLASH = 'ignore';
+			devServer = await astro.startDevServer();
+		});
+
+		test.afterAll(async () => {
+			await devServer.stop();
+		});
+
+		test('Load content from the server', async ({ page, astro }) => {
+			await page.goto(astro.resolveUrl('/base/'));
+			let el = page.locator('#island');
+
+			await expect(el, 'element rendered').toBeVisible();
+			await expect(el, 'should have content').toHaveText('I am an island');
+		});
+	});
 	test.describe('Production', () => {
 		let previewServer;
 

diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts
@@ -64,7 +64,8 @@ export function renderServerIsland(
 			const propsEncrypted = await encryptString(key, JSON.stringify(props));
 
 			const hostId = crypto.randomUUID();
-			const serverIslandUrl = `${result.base}_server-islands/${componentId}${result.trailingSlash === 'always' ? '/' : ''}`;
+			const slash = result.base.endsWith('/') ? '' : '/';
+			const serverIslandUrl = `${result.base}${slash}_server-islands/${componentId}${result.trailingSlash === 'always' ? '/' : ''}`;
 
 			destination.write(`<script async type="module" data-island-id="${hostId}">
 let componentId = ${safeJsonStringify(componentId)};