getIslandContent() — astro Function Reference

Source Code

packages/astro/src/runtime/server/render/server-islands.ts lines 137–225

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

		const componentPath = this.getComponentPath();
		const componentExport = this.getComponentExport();
		let componentId = this.result.serverIslandNameMap.get(componentPath);
		if (!componentId) {
			throw new Error(`Could not find server component name ${componentPath}`);
		}

		// Remove internal props
		for (const key of Object.keys(this.props)) {
			if (internalProps.has(key)) {
				delete this.props[key];
			}
		}

		// Render the slots
		const renderedSlots: Record<string, string> = {};
		for (const name in this.slots) {
			if (name !== 'fallback') {
				const content = await renderSlotToString(this.result, this.slots[name]);
				renderedSlots[name] = content.toString();
			}
		}

		const key = await this.result.key;

		// Encrypt componentExport
		const componentExportEncrypted = await encryptString(key, componentExport);

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

		// Encrypt slots
		const slotsEncrypted =
			Object.keys(renderedSlots).length === 0
				? ''
				: await encryptString(key, JSON.stringify(renderedSlots));

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

		// Determine if its safe to use a GET request
		const potentialSearchParams = createSearchParams(
			componentExportEncrypted,
			propsEncrypted,
			slotsEncrypted,
		);
		const useGETRequest = isWithinURLLimit(serverIslandUrl, potentialSearchParams);

		if (useGETRequest) {
			serverIslandUrl += '?' + potentialSearchParams.toString();
			this.result._metadata.extraHead.push(
				markHTMLString(
					`<link rel="preload" as="fetch" href="${serverIslandUrl}" crossorigin="anonymous">`,
				),
			);
		}

		// Get adapter headers for inline script
		const adapterHeaders = this.result.internalFetchHeaders || {};
		const headersJson = safeJsonStringify(adapterHeaders);

		const method = useGETRequest
			? // GET request
				`const headers = new Headers(${headersJson});
let response = await fetch('${serverIslandUrl}', { headers });`
			: // POST request
				`let data = {
	encryptedComponentExport: ${safeJsonStringify(componentExportEncrypted)},
	encryptedProps: ${safeJsonStringify(propsEncrypted)},
	encryptedSlots: ${safeJsonStringify(slotsEncrypted)},
};
const headers = new Headers({ 'Content-Type': 'application/json', ...${headersJson} });
let response = await fetch('${serverIslandUrl}', {