fix: astro island urls missing assetsPrefix in SSR mode (#6862)

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

.changeset/large-pens-rhyme.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes bug with assetsPrefix not being prepended to component-url and renderer-url in astro islands when using SSR mode.

packages/astro/src/core/app/index.ts

@@ -21,6 +21,7 @@ import {
 } from '../render/index.js';
 import { RouteCache } from '../render/route-cache.js';
 import {
+	createAssetLink,
 	createLinkStylesheetElementSet,
 	createModuleScriptElement,
 } from '../render/ssr-element.js';
@@ -71,7 +72,11 @@ export class App {
 						return bundlePath;
 					}
 					default: {
-						return prependForwardSlash(joinPaths(manifest.base, bundlePath));
+						return createAssetLink(
+							bundlePath,
+							manifest.base,
+							manifest.assetsPrefix
+						);
 					}
 				}
 			},

packages/astro/src/core/app/types.ts

@@ -31,6 +31,7 @@ export interface SSRManifest {
 	routes: RouteInfo[];
 	site?: string;
 	base?: string;
+	assetsPrefix?: string;
 	markdown: MarkdownRenderingOptions;
 	pageMap: Map<ComponentPath, ComponentInstance>;
 	renderers: SSRLoadedRenderer[];

packages/astro/src/core/build/plugins/plugin-ssr.ts

@@ -212,6 +212,7 @@ function buildManifest(
 		routes,
 		site: settings.config.site,
 		base: settings.config.base,
+		assetsPrefix: settings.config.build.assetsPrefix,
 		markdown: settings.config.markdown,
 		pageMap: null as any,
 		componentMetadata: Array.from(internals.componentMetadata),

packages/astro/test/astro-assets-prefix.test.js

@@ -98,6 +98,17 @@ describe('Assets Prefix - Server', () => {
 		expect(imgAsset.attr('src')).to.match(assetsPrefixRegex);
 	});
 
+	it('react component astro-island should import from assetsPrefix', async () => {
+		const request = new Request('http://example.com/custom-base/');
+		const response = await app.render(request);
+		expect(response.status).to.equal(200);
+		const html = await response.text();
+		const $ = cheerio.load(html);
+		const island = $('astro-island');
+		expect(island.attr('component-url')).to.match(assetsPrefixRegex);
+		expect(island.attr('renderer-url')).to.match(assetsPrefixRegex);
+	});
+
 	it('markdown image src start with assetsPrefix', async () => {
 		const request = new Request('http://example.com/custom-base/markdown/');
 		const response = await app.render(request);