renderToStaticMarkup() — astro Function Reference

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

Function typescript CoreAstro RenderingEngine calls 2

Entity Profile

CoreAstro→ RenderingEngine→ renderToStaticMarkup() — astro Function Reference

Dependency Diagram

graph TD
  e4501448_473f_08e1_06ae_582762dd666d["renderToStaticMarkup()"]
  8026f0af_f709_2aa5_9cc2_85bfe4d5b6b2["server.ts"]
  e4501448_473f_08e1_06ae_582762dd666d -->|defined in| 8026f0af_f709_2aa5_9cc2_85bfe4d5b6b2
  4978be28_60e1_5238_2e44_282f47c8015a["slotName()"]
  e4501448_473f_08e1_06ae_582762dd666d -->|calls| 4978be28_60e1_5238_2e44_282f47c8015a
  a8b24013_5808_2b5b_68c5_f9dd75dd5940["check()"]
  e4501448_473f_08e1_06ae_582762dd666d -->|calls| a8b24013_5808_2b5b_68c5_f9dd75dd5940
  style e4501448_473f_08e1_06ae_582762dd666d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/solid/src/server.ts lines 50–133

async function renderToStaticMarkup(
	this: RendererContext,
	Component: any,
	props: Record<string, any>,
	{ default: children, ...slotted }: any,
	metadata?: Record<string, any>,
) {
	const ctx = getContext(this.result);
	const renderId = metadata?.hydrate ? incrementId(ctx) : '';
	const needsHydrate = metadata?.astroStaticSlot ? !!metadata.hydrate : true;
	const tagName = needsHydrate ? 'astro-slot' : 'astro-static-slot';

	const renderStrategy = (metadata?.renderStrategy ?? 'async') as RenderStrategy;

	const renderFn = () => {
		const slots: Record<string, any> = {};
		for (const [key, value] of Object.entries(slotted)) {
			const name = slotName(key);
			slots[name] = ssr(`<${tagName} name="${name}">${value}</${tagName}>`);
		}
		// Note: create newProps to avoid mutating `props` before they are serialized
		const newProps = {
			...props,
			...slots,
			// In Solid SSR mode, `ssr` creates the expected structure for `children`.
			children: children != null ? ssr(`<${tagName}>${children}</${tagName}>`) : children,
		};

		if (renderStrategy === 'sync') {
			// Sync Render:
			// <Component />
			// This render mode is not exposed directly to the end user. It is only
			// used in the check() function.
			return createComponent(Component, newProps);
		} else {
			if (needsHydrate) {
				// Hydrate + Async Render:
				// <Suspense>
				//   <Component />
				// </Suspense>
				return createComponent(Suspense, {
					get children() {
						return createComponent(Component, newProps);
					},
				});
			} else {
				// Static + Async Render
				// <NoHydration>
				//   <Suspense>
				//     <Component />
				// 	 </Suspense>
				// </NoHydration>
				return createComponent(NoHydration, {
					get children() {
						return createComponent(Suspense, {
							get children() {
								return createComponent(Component, newProps);
							},
						});
					},
				});
			}
		}
	};

	const componentHtml =
		renderStrategy === 'async'
			? await renderToStringAsync(renderFn, {
					renderId,
					// New setting since Solid 1.8.4 that fixes an errant hydration event appearing in
					// server only components. Not available in TypeScript types yet.
					// https://github.com/solidjs/solid/issues/1931
					// https://github.com/ryansolid/dom-expressions/commit/e09e255ac725fd59195aa0f3918065d4bd974e6b
					...({ noScripts: !needsHydrate } as any),
				})
			: renderToString(renderFn, { renderId });

	return {
		attrs: {
			'data-solid-render-id': renderId,
		},