renderToStaticMarkup() — astro Function Reference

Architecture documentation for the renderToStaticMarkup() function in server-v17.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1 called by 1

Entity Profile

CoreAstro→ RenderingEngine→ renderToStaticMarkup() — astro Function Reference

Dependency Diagram

graph TD
  5c42bd5a_1c46_58fb_f634_15a2d7b7e060["renderToStaticMarkup()"]
  b97b7573_9108_45c6_0cb4_8a2c7176f277["server-v17.ts"]
  5c42bd5a_1c46_58fb_f634_15a2d7b7e060 -->|defined in| b97b7573_9108_45c6_0cb4_8a2c7176f277
  5ae513fd_f79c_1336_3b25_46a29dc6a223["check()"]
  5ae513fd_f79c_1336_3b25_46a29dc6a223 -->|calls| 5c42bd5a_1c46_58fb_f634_15a2d7b7e060
  805b1b52_2708_0308_e97d_ea89924630bf["slotName()"]
  5c42bd5a_1c46_58fb_f634_15a2d7b7e060 -->|calls| 805b1b52_2708_0308_e97d_ea89924630bf
  style 5c42bd5a_1c46_58fb_f634_15a2d7b7e060 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/react/src/server-v17.ts lines 39–72

async function renderToStaticMarkup(
	Component: any,
	props: Record<string, any>,
	{ default: children, ...slotted }: Record<string, any>,
	metadata?: AstroComponentMetadata,
) {
	delete props['class'];
	const slots: Record<string, any> = {};
	for (const [key, value] of Object.entries(slotted)) {
		const name = slotName(key);
		slots[name] = React.createElement(StaticHtml, { value, name });
	}
	// Note: create newProps to avoid mutating `props` before they are serialized
	const newProps = {
		...props,
		...slots,
	};
	const newChildren = children ?? props.children;
	if (newChildren != null) {
		newProps.children = React.createElement(StaticHtml, {
			// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
			hydrate: metadata?.astroStaticSlot ? !!metadata.hydrate : true,
			value: newChildren,
		});
	}
	const vnode = React.createElement(Component, newProps);
	let html: string;
	if (metadata?.hydrate) {
		html = ReactDOM.renderToString(vnode);
	} else {
		html = ReactDOM.renderToStaticMarkup(vnode);
	}
	return { html };
}