renderAllHeadContent() — astro Function Reference

Architecture documentation for the renderAllHeadContent() function in head.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ renderAllHeadContent() — astro Function Reference

Dependency Diagram

graph TD
  8df5b44b_3ec9_1d8d_90d3_f0ea485261aa["renderAllHeadContent()"]
  fab8dbd2_7a6f_1571_b04b_4d0b3cd4348b["head.ts"]
  8df5b44b_3ec9_1d8d_90d3_f0ea485261aa -->|defined in| fab8dbd2_7a6f_1571_b04b_4d0b3cd4348b
  style 8df5b44b_3ec9_1d8d_90d3_f0ea485261aa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/render/head.ts lines 17–70

export function renderAllHeadContent(result: SSRResult) {
	result._metadata.hasRenderedHead = true;
	let content = '';
	if (result.shouldInjectCspMetaTags && result.cspDestination === 'meta') {
		content += renderElement(
			'meta',
			{
				props: {
					'http-equiv': 'content-security-policy',
					content: renderCspContent(result),
				},
				children: '',
			},
			false,
		);
	}
	const styles = Array.from(result.styles)
		.filter(uniqueElements)
		.map((style) =>
			style.props.rel === 'stylesheet'
				? renderElement('link', style)
				: renderElement('style', style),
		);
	// Clear result.styles so that any new styles added will be inlined.
	result.styles.clear();
	const scripts = Array.from(result.scripts)
		.filter(uniqueElements)
		.map((script) => {
			if (result.userAssetsBase) {
				script.props.src =
					(result.base === '/' ? '' : result.base) + result.userAssetsBase + script.props.src;
			}
			return renderElement('script', script, false);
		});
	const links = Array.from(result.links)
		.filter(uniqueElements)
		.map((link) => renderElement('link', link, false));

	// Order styles -> links -> scripts similar to src/content/runtime.ts
	// The order is usually fine as the ordering between these groups are mutually exclusive,
	// except for CSS styles and CSS stylesheet links. However CSS stylesheet links usually
	// consist of CSS modules which should naturally take precedence over CSS styles, so the
	// order will still work. In prod, all CSS are stylesheet links.
	// In the future, it may be better to have only an array of head elements to avoid these assumptions.
	content += styles.join('\n') + links.join('\n') + scripts.join('\n');

	if (result._metadata.extraHead.length > 0) {
		for (const part of result._metadata.extraHead) {
			content += part;
		}
	}

	return markHTMLString(content);
}