var sections = [
	{
		slug: "getting-started",
		title: "Getting Started",
		level: 1,
		children: [
			{
				slug: "try-solid",
				title: "Try Solid",
				level: 2,
				children: [
				]
			},
			{
				slug: "learn-solid",
				title: "Learn Solid",
				level: 2,
				children: [
				]
			},
			{
				slug: "think-solid",
				title: "Think Solid",
				level: 2,
				children: [
					{
						slug: "1.-declarative-data",
						title: "1. Declarative Data",
						level: 3,
						children: [
						]
					},
					{
						slug: "2.-vanishing-components",
						title: "2. Vanishing Components",
						level: 3,
						children: [
						]
					},
					{
						slug: "3.-read%2Fwrite-segregation",
						title: "3. Read/Write segregation",
						level: 3,
						children: [
						]
					},
					{
						slug: "4.-simple-is-better-than-easy",
						title: "4. Simple is better than easy",
						level: 3,
						children: [
						]
					}
				]
			},
			{
				slug: "web-components",
				title: "Web Components",
				level: 2,
				children: [
				]
			},
			{
				slug: "server-rendering",
				title: "Server Rendering",
				level: 2,
				children: [
				]
			},
			{
				slug: "no-compilation%3F",
				title: "No Compilation?",
				level: 2,
				children: [
				]
			}
		]
	},
	{
		slug: "reactivity",
		title: "Reactivity",
		level: 1,
		children: [
			{
				slug: "introducing-primitives",
				title: "Introducing Primitives",
				level: 2,
				children: [
				]
			},
			{
				slug: "how-it-works",
				title: "How it Works",
				level: 2,
				children: [
				]
			},
			{
				slug: "considerations",
				title: "Considerations",
				level: 2,
				children: [
				]
			}
		]
	},
	{
		slug: "rendering",
		title: "Rendering",
		level: 1,
		children: [
			{
				slug: "jsx-compilation",
				title: "JSX Compilation",
				level: 2,
				children: [
				]
			},
			{
				slug: "attributes-and-props",
				title: "Attributes and Props",
				level: 2,
				children: [
				]
			},
			{
				slug: "entry",
				title: "Entry",
				level: 2,
				children: [
				]
			},
			{
				slug: "components",
				title: "Components",
				level: 2,
				children: [
				]
			},
			{
				slug: "props",
				title: "Props",
				level: 2,
				children: [
				]
			},
			{
				slug: "children",
				title: "Children",
				level: 2,
				children: [
				]
			}
		]
	},
	{
		slug: "server-side-rendering",
		title: "Server Side Rendering",
		level: 1,
		children: [
			{
				slug: "hydration-script",
				title: "Hydration Script",
				level: 2,
				children: [
				]
			},
			{
				slug: "async-and-streaming-ssr",
				title: "Async and Streaming SSR",
				level: 2,
				children: [
				]
			},
			{
				slug: "ssr-caveats",
				title: "SSR Caveats",
				level: 2,
				children: [
				]
			},
			{
				slug: "getting-started-with-ssr",
				title: "Getting Started with SSR",
				level: 2,
				children: [
				]
			},
			{
				slug: "getting-started-with-static-site-generation",
				title: "Getting Started with Static Site Generation",
				level: 2,
				children: [
				]
			}
		]
	}
];
var content = "<section class=\"mt-10\"><h1 id=\"getting-started\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#getting-started\">#</a> Getting Started</h1><h2 id=\"try-solid\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#try-solid\">#</a> Try Solid</h2><p>By far the easiest way to get started with Solid is to try it online. Our REPL at <a href=\"https://playground.solidjs.com\">https://playground.solidjs.com</a> is the perfect way to try out ideas. As is <a href=\"https://codesandbox.io/\">https://codesandbox.io/</a> where you can modify any of <a href=\"https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md\">our Examples</a>.</p><p>Alternatively, you can use our simple <a href=\"https://vitejs.dev/\">Vite</a> templates by runnings these commands in your terminal:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npx degit solidjs/templates/js my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">cd</span><span style=\"color:#24292e\"> my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm i </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm run dev </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"></span></code></pre><p>Or for TypeScript:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npx degit solidjs/templates/ts my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">cd</span><span style=\"color:#24292e\"> my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm i </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm run dev </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"learn-solid\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#learn-solid\">#</a> Learn Solid</h2><p>Solid is all about small composable pieces that serve as building blocks for applications. These pieces are mostly functions which make up many shallow top-level APIs. Fortunately, you won't need to know about most of them to get started.</p><p>The two main types of building blocks you have at your disposal are Components and Reactive Primitives.</p><p>Components are functions that accept a props object and return JSX elements including native DOM elements and other components. They can be expressed as JSX Elements in PascalCase:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">function</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">MyComponent</span><span style=\"color:#24292e\">(</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;Hello {props.name}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">MyComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">name</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;Solid&quot;</span><span style=\"color:#24292e\"> /&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p>Components are lightweight in that they are not stateful themselves and have no instances. Instead, they serve as factory functions for DOM elements and reactive primitives.</p><p>Solid's fine-grained reactivity is built on 3 simple primitives: Signals, Memos, and Effects. Together, they form an auto-tracking synchronization engine that ensures your view stays up to date. Reactive computations take the form of simple function-wrapped expressions that execute synchronously.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">first</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setFirst</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;JSON&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">last</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setLast</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;Bourne&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">createEffect</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> console.</span><span style=\"color:#6f42c1\">log</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">`${</span><span style=\"color:#6f42c1\">first</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">} ${</span><span style=\"color:#6f42c1\">last</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">}`</span><span style=\"color:#24292e\">));</span></span>\n<span class=\"line\"></span></code></pre><p>You can learn more about <a href=\"#reactivity\">Solid's Reactivity</a> and <a href=\"#rendering\">Solid's Rendering</a>.</p><h2 id=\"think-solid\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#think-solid\">#</a> Think Solid</h2><p>Solid's design carries several opinions on what principles and values help us best build websites and applications. It is easier to learn and use Solid when you are aware of the philosophy behind it.</p><h3 id=\"1.-declarative-data\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#1.-declarative-data\">#</a> 1. Declarative Data</h3><p>Declarative data is the practice of tying the description of data’s behavior to its declaration. This allows for easy composition by packaging all aspects of data’s behavior in a single place.</p><h3 id=\"2.-vanishing-components\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#2.-vanishing-components\">#</a> 2. Vanishing Components</h3><p>It's hard enough to structure your components without taking updates into consideration. Solid updates are completely independent of the components. Component functions are called once and then cease to exist. Components exist to organize your code and not much else.</p><h3 id=\"3.-read%2Fwrite-segregation\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#3.-read%2Fwrite-segregation\">#</a> 3. Read/Write segregation</h3><p>Precise control and predictability make for better systems. We don't need true immutability to enforce unidirectional flow, just the ability to make the conscious decision which consumers may write and which may not.</p><h3 id=\"4.-simple-is-better-than-easy\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#4.-simple-is-better-than-easy\">#</a> 4. Simple is better than easy</h3><p>A lesson that comes hard for fine-grained reactivity. Explicit and consistent conventions even if they require more effort are worth it. The aim is to provide minimal tools to serve as the basis to build upon.</p><h2 id=\"web-components\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#web-components\">#</a> Web Components</h2><p>Solid was born with the desire to have Web Components as first class citizens. Over time its design has evolved and goals have changed. However, Solid is still a great way to author Web Components. <a href=\"https://github.com/solidjs/solid/tree/main/packages/solid-element\">Solid Element</a> allows you to write and wrap Solid's function components to produce small and performant Web Components. Inside Solid apps Solid Element is able to still leverage Solid's Context API, and Solid's Portals support Shadow DOM isolated styling.</p><h2 id=\"server-rendering\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#server-rendering\">#</a> Server Rendering</h2><p>Solid has a dynamic server side rendering solution that enables a truly isomorphic development experience. Through the use of our Resource primitive, async data requests are easily made and, more importantly, automatically serialized and synchronized between client and browser.</p><p>Since Solid supports asynchronous and stream rendering on the server, you get to write your code one way and have it execute on the server. This means that features like <a href=\"https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense\">render-as-you-fetch</a> and code splitting just work in Solid.</p><p>For more information, read the <a href=\"#server-side-rendering\">Server guide</a>.</p><h2 id=\"no-compilation%3F\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#no-compilation%3F\">#</a> No Compilation?</h2><p>Dislike JSX? Don't mind doing manual work to wrap expressions, worse performance, and having larger bundle sizes? Alternatively, you can create a Solid app using Tagged Template Literals or HyperScript in non-compiled environments.</p><p>You can run them straight from the browser using <a href=\"https://www.skypack.dev/\">Skypack</a>:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">script</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">type</span><span style=\"color:#24292e\">=</span><span style=\"color:#032f62\">&quot;module&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        createSignal,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        onCleanup,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;https://cdn.skypack.dev/solid-js&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { render } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;https://cdn.skypack.dev/solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> html </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;https://cdn.skypack.dev/solid-js/html&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">App</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">count</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setCount</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#005cc5\">0</span><span style=\"color:#24292e\">),</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">          </span><span style=\"color:#005cc5\">timer</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">setInterval</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">setCount</span><span style=\"color:#24292e\">(</span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">() </span><span style=\"color:#d73a49\">+</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">1</span><span style=\"color:#24292e\">), </span><span style=\"color:#005cc5\">1000</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        </span><span style=\"color:#6f42c1\">onCleanup</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">clearInterval</span><span style=\"color:#24292e\">(timer));</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">html</span><span style=\"color:#032f62\">`&lt;div&gt;${</span><span style=\"color:#24292e\">count</span><span style=\"color:#032f62\">}&lt;/div&gt;`</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      };</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#6f42c1\">render</span><span style=\"color:#24292e\">(App, document.body);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">script</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span></code></pre><p>Remember you still need the corresponding DOM Expressions library for these to work with TypeScript. You can use Tagged Template Literals with <a href=\"https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions\">Lit DOM Expressions</a> or HyperScript with <a href=\"https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions\">Hyper DOM Expressions</a>.</p></section><section class=\"mt-10\"><h1 id=\"reactivity\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#reactivity\">#</a> Reactivity</h1><p>Solid's data management is built off a set of flexible reactive primitives which are responsible for all the updates. It takes a very similar approach to MobX or Vue except it never trades its granularity for a VDOM. Dependencies are automatically tracked when you access your reactive values in your Effects and JSX View code.</p><p>Solid's primitives come in the form of <code>create</code> calls that often return tuples, where generally the first element is a readable primitive and the second is a setter. It is common to refer to only the readable part by the primitive name.</p><p>Here is a basic auto incrementing counter that is updating based on setting the <code>count</code> signal.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { createSignal, onCleanup } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { render } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">App</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">count</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setCount</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#005cc5\">0</span><span style=\"color:#24292e\">),</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#005cc5\">timer</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">setInterval</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">setCount</span><span style=\"color:#24292e\">(</span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">() </span><span style=\"color:#d73a49\">+</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">1</span><span style=\"color:#24292e\">), </span><span style=\"color:#005cc5\">1000</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6f42c1\">onCleanup</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">clearInterval</span><span style=\"color:#24292e\">(timer));</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">render</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, document.</span><span style=\"color:#6f42c1\">getElementById</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;app&quot;</span><span style=\"color:#24292e\">));</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"introducing-primitives\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#introducing-primitives\">#</a> Introducing Primitives</h2><p>Solid is made up of 3 primary primitives, Signal, Memo, and Effect. At their core is the Observer pattern where Signals (and Memos) are tracked by wrapping Memos and Effects.</p><p>Signals are the simplest primitive. They contain value, and get and set functions so we can intercept when they are read and written to.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">count</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setCount</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#005cc5\">0</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>Effects are functions that wrap reads of our signal and re-execute whenever a dependent Signal's value changes. This is useful for creating side effects, like rendering.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6f42c1\">createEffect</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> console.</span><span style=\"color:#6f42c1\">log</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;The latest count is&quot;</span><span style=\"color:#24292e\">, </span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">()));</span></span>\n<span class=\"line\"></span></code></pre><p>Finally, Memos are cached derived values. They share the properties of both Signals and Effects. They track their own dependent Signals, re-executing only when those change, and are trackable Signals themselves.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">fullName</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">`${</span><span style=\"color:#6f42c1\">firstName</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">} ${</span><span style=\"color:#6f42c1\">lastName</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">}`</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"how-it-works\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#how-it-works\">#</a> How it Works</h2><p>Signals are event emitters that hold a list of subscriptions. They notify their subscribers whenever their value changes.</p><p>Where things get more interesting is how these subscriptions happen. Solid uses automatic dependency tracking. Updates happen automatically as the data changes.</p><p>The trick is a global stack at runtime. Before an Effect or Memo executes (or re-executes) its developer-provided function, it pushes itself on to that stack. Then any Signal that is read checks if there is a current listener on the stack and if so adds the listener to its subscriptions.</p><p>You can think of it like this:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">function</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#e36209\">value</span><span style=\"color:#24292e\">) {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">subscribers</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">new</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">Set</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">read</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">listener</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">getCurrentListener</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">if</span><span style=\"color:#24292e\"> (listener) subscribers.</span><span style=\"color:#6f42c1\">add</span><span style=\"color:#24292e\">(listener);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> value;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  };</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">write</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">nextValue</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    value </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> nextValue;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">for</span><span style=\"color:#24292e\"> (</span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">sub</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">of</span><span style=\"color:#24292e\"> subscribers) sub.</span><span style=\"color:#6f42c1\">run</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  };</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> [read, write];</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span></code></pre><p>Now whenever we update the Signal we know which Effects to re-run. Simple yet effective. The actual implementation is much more complicated but that is the guts of what is going on.</p><p>For more detailed understanding of how Reactivity works these are useful articles:</p><p><a href=\"https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf\">A Hands-on Introduction to Fine-Grained Reactivity</a></p><p><a href=\"https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p\">Building a Reactive Library from Scratch</a></p><p><a href=\"https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering\">SolidJS: Reactivity to Rendering</a></p><h2 id=\"considerations\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#considerations\">#</a> Considerations</h2><p>This approach to reactivity is very powerful and dynamic. It can handle dependencies changing on the fly through executing different branches of conditional code. It also works through many levels of indirection. Any function executed inside a tracking scope is also being tracked.</p><p>However, there are some key behaviors and tradeoffs we must be aware of.</p><ol> <li> <p>All reactivity is tracked from function calls whether directly or hidden beneath getter/proxy and triggered by property access. This means where you access properties on reactive objects is important.</p> </li> <li> <p>Components and callbacks from control flows are not tracking scopes and only execute once. This means destructuring or doing logic top-level in your components will not re-execute. You must access these Signals, Stores, and props from within other reactive primitives or the JSX for that part of the code to re-evaluate.</p> </li> <li> <p>This approach only tracks synchronously. If you have a setTimeout or use an async function in your Effect the code that executes async after the fact won't be tracked.</p> </li> </ol></section><section class=\"mt-10\"><h1 id=\"rendering\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#rendering\">#</a> Rendering</h1><p>Solid supports templating in 3 forms JSX, Tagged Template Literals and Solid's HyperScript variant, although JSX is the predominate form. Why? JSX is a great DSL made for compilation. It has clear syntax, supports TypeScript, works with Babel and supports other tooling like Code Syntax Highlighting and Prettier. It was only pragmatic to use a tool that basically gives you that all for free. As a compiled solution it provides great DX. Why struggle with custom Syntax DSLs when you can use one so widely supported?</p><h2 id=\"jsx-compilation\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#jsx-compilation\">#</a> JSX Compilation</h2><p>Rendering involves precompilation of JSX templates into optimized native js code. The JSX code constructs:</p><ul> <li>Template DOM elements which are cloned on each instantiation</li> <li>A series of reference declarations using only firstChild and nextSibling</li> <li>Fine grained computations to update the created elements.</li> </ul><p>This approach is both more performant and produces less code than creating each element, one by one, with document.createElement.</p><h2 id=\"attributes-and-props\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#attributes-and-props\">#</a> Attributes and Props</h2><p>Solid attempts to reflect HTML conventions as much as possible including case insensitivity of attributes.</p><p>The majority of all attributes on native element JSX are set as DOM attributes. Static values are built right into the template that is cloned. There are a number of exceptions like <code>class</code>, <code>style</code>, <code>value</code>, <code>innerHTML</code> which provide extra functionality.</p><p>However, custom elements (with exception of native built-ins) default to properties when dynamic. This is to handle more complex data types. It does this conversion by camel casing standard snake case attribute names <code>some-attr</code> to <code>someAttr</code>.</p><p>However, it is possible to control this behavior directly with namespace directives. You can force an attribute with <code>attr:</code> or force prop <code>prop:</code></p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">my-element</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">prop</span><span style=\"color:#24292e\">:</span><span style=\"color:#005cc5\">UniqACC</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{state.value} </span><span style=\"color:#005cc5\">attr</span><span style=\"color:#24292e\">:</span><span style=\"color:#005cc5\">title</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{state.title} /&gt;</span></span>\n<span class=\"line\"></span></code></pre><blockquote> <p><strong>Note:</strong> Static attributes are created as part of the html template that is cloned. Expressions fixed and dynamic are applied afterwards in JSX binding order. While this is fine for most DOM elements there are some, like input elements with <code>type='range'</code>, where order matters. Keep this in mind when binding elements.</p> </blockquote><h2 id=\"entry\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#entry\">#</a> Entry</h2><p>The easiest way to mount Solid is to import render from 'solid-js/web'. <code>render</code> takes a function as the first argument and the mounting container for the second and returns a disposal method. This <code>render</code> automatically creates the reactive root and handles rendering into the mount container. For best performance use an element with no children.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { render } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">render</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, document.</span><span style=\"color:#6f42c1\">getElementById</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;main&quot;</span><span style=\"color:#24292e\">));</span></span>\n<span class=\"line\"></span></code></pre><blockquote> <p><strong>Important</strong> The first argument needs to be a function. Otherwise we can't properly track and schedule the reactive system. This simple ommission will cause your Effects not to run.</p> </blockquote><h2 id=\"components\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#components\">#</a> Components</h2><p>Components in Solid are just Pascal (Capital) cased functions. Their first argument is a props object and they return real DOM nodes.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Parent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;Hello&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;John&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.greeting}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    {props.children}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>Since all JSX nodes are actual DOM nodes, the only responsibility of top level Components is to append them to the DOM.</p><h2 id=\"props\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#props\">#</a> Props</h2><p>Much like React, Vue, Angular and other frameworks, Solid allows you to define properties on your components to pass data to child components. Here a parent is passing the string &quot;Hello&quot; to the <code>Label</code> component via a <code>greeting</code> property.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Parent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;Hello&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;John&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>In the above example, the value set on <code>greeting</code> is static, but we can also set dynamic values. For example:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Parent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setGreeting</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;Hello&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">greeting</span><span style=\"color:#24292e\">()}&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;John&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  );</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>Components can access properties passed to them via a <code>props</code> argument.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.greeting}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    {props.children}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>Unlike in some other frameworks, you cannot use object destructuring on the <code>props</code> of a component. This is because the <code>props</code> object, behind the scenes, relies on Object getters to lazily retrieve values. Using object destructuring breaks the reactivity of <code>props</code>.</p><p>This example shows the &quot;correct&quot; way of accessing props in Solid:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// Here, `props.name` will update like you&#39;d expect</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">MyComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.name}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p>This example shows the wrong way of accessing props in Solid:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// This is bad</span></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Here, `props.name` will not update (i.e. is not reactive) as it is destructured into `name`</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">MyComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> ({ </span><span style=\"color:#e36209\">name</span><span style=\"color:#24292e\"> }) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{name}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p>While the props object looks like a normal object when you use it (and Typescript users will note that it is typed like a normal object), in reality it is reactive – somewhat similar to a Signal. This has a few implications.</p><p>Because unlike most JSX frameworks, Solid's function components are only executed once (rather than every render cycle), the following example will not work as expected.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { createSignal } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{value}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">export</span><span style=\"color:#e36209\"> </span><span style=\"color:#d73a49\">default</span><span style=\"color:#e36209\"> </span><span style=\"color:#d73a49\">function</span><span style=\"color:#e36209\"> </span><span style=\"color:#6f42c1\">Form</span><span style=\"color:#e36209\">() </span><span style=\"color:#24292e\">{</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setValue</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()} /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">input</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">type</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;text&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">oninput</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{(</span><span style=\"color:#e36209\">e</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">setValue</span><span style=\"color:#24292e\">(e.currentTarget.value)} /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  );</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span></code></pre><p>In this example, what we probably want to happen is for the <code>BasicComponent</code> to display the current value typed into the <code>input</code>. But, as a reminder, the <code>BasicComponent</code> function will only be executed once when the component is initially created. At this time (at creation), <code>props.value</code> will equal <code>''</code>. This means that <code>const value</code> in <code>BasicComponent</code> will resolve to <code>'default'</code> and never update. While the <code>props</code> object is reactive, accessing the props in <code>const value = props.value || 'default';</code> is outside the observable scope of Solid, so it isn't automatically re-evaluated when props change.</p><p>So how can we fix our problem?</p><p>Well, in general, we need to access <code>props</code> somewhere that Solid can observe it. Generally this means inside JSX or inside a <code>createMemo</code>, <code>createEffect</code>, or thunk(<code>() =&gt; ...</code>). Here is one solution that works as expected:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>This, equivalently, can be hoisted into a function:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>Another option, if it is an expensive computation, is to use <code>createMemo</code>. For example:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>Or using a helper</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  props </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">({ value: </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\"> }, props);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.value}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>As a reminder, the following examples will <em>not</em> work:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// bad</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> { </span><span style=\"color:#e36209\">value</span><span style=\"color:#24292e\">: </span><span style=\"color:#005cc5\">valueProp</span><span style=\"color:#24292e\"> } </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> props;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> valueProp </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// bad</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">valueProp</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> prop.value;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> valueProp </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>Solid's Components are the key part of its performance. Solid's approach of &quot;Vanishing&quot; Components is made possible by lazy prop evaluation. Instead of evaluating prop expressions immediately and passing in values, execution is deferred until the prop is accessed in the child. Doing so we postpone execution until the last moment, typically right in the DOM bindings, maximizing performance. This flattens the hierarchy and removes the need to maintain a tree of Components.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">Component</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">prop1</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;static&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">prop2</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{state.dynamic} /&gt;;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// compiles roughly to:</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// we untrack the component body to isolate it and prevent costly updates</span></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">untrack</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6f42c1\">Component</span><span style=\"color:#24292e\">({</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    prop1: </span><span style=\"color:#032f62\">&quot;static&quot;</span><span style=\"color:#24292e\">,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#6a737d\">// dynamic expression so we wrap in a getter</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">get</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">prop2</span><span style=\"color:#24292e\">() {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> state.dynamic;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    },</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  })</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>To help maintain reactivity Solid has a couple of prop helpers:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// default props</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">props </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">({ name: </span><span style=\"color:#032f62\">&quot;Smith&quot;</span><span style=\"color:#24292e\"> }, props);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// clone props</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">newProps</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">(props);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// merge props</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">props </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">(props, otherProps);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// split props into multiple props objects</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">local</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">others</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">splitProps</span><span style=\"color:#24292e\">(props, [</span><span style=\"color:#032f62\">&quot;className&quot;</span><span style=\"color:#24292e\">])</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\"> {</span><span style=\"color:#d73a49\">...</span><span style=\"color:#24292e\">others} </span><span style=\"color:#005cc5\">className</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">cx</span><span style=\"color:#24292e\">(local.className, theme.component)} /&gt;</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"children\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#children\">#</a> Children</h2><p>Solid handles JSX Children similar to React. A single child is a single value on <code>props.children</code> and multiple children is handled via an array of values. Normally, you pass them through to the JSX view. However, if you want to interact with them the suggested method is the <code>children</code> helper which resolves any downstream control flows and returns a memo.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// single child</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">class</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;label&quot;</span><span style=\"color:#24292e\">&gt;Hi, { props.children }&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;&lt;</span><span style=\"color:#22863a\">span</span><span style=\"color:#24292e\">&gt;Josie&lt;/</span><span style=\"color:#22863a\">span</span><span style=\"color:#24292e\">&gt;&lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// multi child</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">List</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.children}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">List</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;First&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  {state.expression}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;Judith&lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">List</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// map children</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">List</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">each</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{props.children}&gt;{</span><span style=\"color:#e36209\">item</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;{item}&lt;/</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;}&lt;/</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// modify and map children using helper</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">List</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6a737d\">// children helper memoizes value and resolves all intermediate reactivity</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">memo</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">children</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> props.children);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6f42c1\">createEffect</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">children</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">memo</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    children.</span><span style=\"color:#6f42c1\">forEach</span><span style=\"color:#24292e\">((</span><span style=\"color:#e36209\">c</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> c.classList.</span><span style=\"color:#6f42c1\">add</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;list-child&quot;</span><span style=\"color:#24292e\">))</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  })</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">each</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">memo</span><span style=\"color:#24292e\">()}&gt;{</span><span style=\"color:#e36209\">item</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;{item}&lt;/</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;}&lt;/</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p><strong>Important:</strong> Solid treats child tags as expensive expressions and wraps them the same way as dynamic reactive expressions. This means they evaluate lazily on <code>prop</code> access. Be careful accessing them multiple times or destructuring before the place you would use them in the view. This is because Solid doesn't have the luxury of creating Virtual DOM nodes ahead of time and then diffing them, so resolution of these <code>props</code> must be lazy and deliberate. Use <code>children</code> helper if you wish to do this as it memoizes them.</p></section><section class=\"mt-10\"><h1 id=\"server-side-rendering\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#server-side-rendering\">#</a> Server Side Rendering</h1><p>Solid handles Server rendering by compiling JSX templates to ultra efficient string appending code. This can be achieved through the babel plugin or preset by passing in <code>generate: &quot;ssr&quot;</code>. For both client and server you need to pass in <code>hydratable: true</code> to generate the hydration compatible code.</p><p>The <code>solid-js</code> and <code>solid-js/web</code> runtimes are swapped for non-reactive counterparts when running in a node environment. For other environments you will need to bundle the server code with conditional exports set to <code>node</code>. Most bundlers have a way of doing this. In general we also recommend using the <code>solid</code> export conditions as well as it is recommend that libraries ship their source under the <code>solid</code> export.</p><p>Building for SSR definitely takes a bit more configuration because we will be generating 2 separate bundles. The client entry should use <code>hydrate</code>:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { hydrate } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">hydrate</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, document);</span></span>\n<span class=\"line\"></span></code></pre><p><em>Note: It is possible to render and hydrate from the Document root. This allows us to describe our full view in JSX.</em></p><p>The server entry can use one of the four rendering options offered by Solid. Each produces the output and a script tag to be inserted in the head of the document.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToString,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToStringAsync,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToNodeStream,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToWebStream,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">} </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Synchronous string rendering</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">renderToString</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Asynchronous string rendering</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">await</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">renderToStringAsync</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Node Stream API</span></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">pipeToNodeWritable</span><span style=\"color:#24292e\">(App, res);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Web Stream API (for like Cloudflare Workers)</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> { </span><span style=\"color:#005cc5\">readable</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">writable</span><span style=\"color:#24292e\"> } </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">new</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">TransformStream</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">pipeToWritable</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, writable);</span></span>\n<span class=\"line\"></span></code></pre><p>For your convenience <code>solid-js/web</code> exports an <code>isServer</code> flag. This is useful as most bundlers will be able to treeshake anything under this flag or imports only used by code under this flag out of your client bundle.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { isServer } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">if</span><span style=\"color:#24292e\"> (isServer) {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6a737d\">// only do this on the server</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">} </span><span style=\"color:#d73a49\">else</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6a737d\">// only do this in the browser</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"hydration-script\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#hydration-script\">#</a> Hydration Script</h2><p>In order to progressively hydrate even before Solid's runtime loads, a special script needs to be inserted on the page. It can either be generated and inserted via <code>generateHydrationScript</code> or included as part of the JSX using the <code>&lt;HydrationScript /&gt;</code> tag.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { generateHydrationScript } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">app</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">renderToString</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#e36209\">App</span><span style=\"color:#24292e\"> /&gt;);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">`</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">  &lt;html lang=&quot;en&quot;&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">    &lt;head&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;title&gt;🔥 Solid SSR 🔥&lt;/title&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;meta charset=&quot;UTF-8&quot; /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;link rel=&quot;stylesheet&quot; href=&quot;/styles.css&quot; /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      ${</span><span style=\"color:#6f42c1\">generateHydrationScript</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">}</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">    &lt;/head&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">    &lt;body&gt;${</span><span style=\"color:#24292e\">app</span><span style=\"color:#032f62\">}&lt;/body&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">  &lt;/html&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">`</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span></code></pre><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { HydrationScript } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">App</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">lang</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;en&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">head</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">title</span><span style=\"color:#24292e\">&gt;🔥 Solid SSR 🔥&lt;/</span><span style=\"color:#22863a\">title</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">meta</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">charset</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;UTF-8&quot;</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">meta</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">name</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;viewport&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">content</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;width=device-width, initial-scale=1.0&quot;</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">link</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">rel</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;stylesheet&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">href</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;/styles.css&quot;</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">HydrationScript</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;/</span><span style=\"color:#22863a\">head</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6a737d\">/*... rest of App*/</span><span style=\"color:#24292e\">}&lt;/</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  );</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>When hydrating from the document inserting assets that aren't available in the client run also can mess things up. Solid provides a <code>&lt;NoHydration&gt;</code> component whose children will work as normal on the server, but not hydrate in the browser.</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">NoHydration</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  {manifest.</span><span style=\"color:#6f42c1\">map</span><span style=\"color:#24292e\">((</span><span style=\"color:#e36209\">m</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">link</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">rel</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;modulepreload&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">href</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{m.href} /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  ))}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">NoHydration</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"async-and-streaming-ssr\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#async-and-streaming-ssr\">#</a> Async and Streaming SSR</h2><p>These mechanisms are built on Solid's knowledge of how your application works. It does so by using Suspense and the Resource API on the server, instead of fetching ahead and then rendering. Solid fetches as it renders on the server just like it does on the client. Your code and execution patterns is written exactly the same way.</p><p>Async rendering waits until all Suspense boundaries resolve and then sends the results (or writes them to a file in the case of Static Site Generation).</p><p>Streaming starts flushing synchronous content to the browser immediately rendering your Suspense Fallbacks on the server. Then as the async data finishes on the server it sends the data over the same stream to the client to resolve Suspense where the browser finishes the job and replaces the fallback with real content.</p><p>The advantage of this approach:</p><ul> <li>Server doesn't have to wait for Async data to respond. Assets can start loading sooner in the browser, and the user can start seeing content sooner.</li> <li>Compared to client fetching like JAMStack, data loading starts on the server immediately and doesn't have to wait for client JavaScript to load.</li> <li>All data is serialized and transported from server to client automatically.</li> </ul><h2 id=\"ssr-caveats\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#ssr-caveats\">#</a> SSR Caveats</h2><p>Solid's Isomorphic SSR solution is very powerful in that you can write your code mostly as single code base that runs similarly in both environments. However there are expectations that this puts on hydration. Mostly that the rendered view in the client is the same as it would be rendered on the server. It doesn't need to be exact in terms of text, but structurally the markup should be the same.</p><p>We use markers rendered in the server to match elements and resource locations on server. For this reason the Client and Server should have the same components. This is not typically a problem given that Solid renders the same way on client and server. But currently there is no means to render something on the server that does not get hydrated on the client. Currently, there is no way to partially hydrate a whole page, and not generate hydration markers for it. It is all or nothing. Partial Hydration is something we want to explore in the future.</p><p>Finally, all resources need to be defined under the <code>render</code> tree. They are automatically serialized and picked up in the browser, but that works because the <code>render</code> or <code>pipeTo</code> methods keep track of the progress of the render. Something we cannot do if they are created in isolated context. Similarly there is no reactivity on the server so do not update signals on initial render and expect them to reflect higher up the tree. While we have Suspense boundaries Solid's SSR is basically top down.</p><h2 id=\"getting-started-with-ssr\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#getting-started-with-ssr\">#</a> Getting Started with SSR</h2><p>SSR configurations are tricky. We have a few examples in the <a href=\"https://github.com/solidjs/solid/blob/main/packages/solid-ssr\">solid-ssr</a> package.</p><p>However, a new starter is in the works <a href=\"https://github.com/solidjs/solid-start\">SolidStart</a> that aims to make this experience much smoother.</p><h2 id=\"getting-started-with-static-site-generation\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#getting-started-with-static-site-generation\">#</a> Getting Started with Static Site Generation</h2><p><a href=\"https://github.com/solidjs/solid/blob/main/packages/solid-ssr\">solid-ssr</a> also ships with a simple utility for generating static or prerendered sites. Read the README for more information.</p></section>";
var guide = {
	sections: sections,
	content: content
};

export { content, guide as default, sections };
