Web Framework Deep Dive

Solid

JSX with the performance of Svelte. Solid looks like React, but compiles to fine-grained reactive updates — components run once, signals do the work.

JavaScript / TypeScriptJSXFine-grained ReactivityNo Virtual DOMFast
← Back to Client Side
Quick Facts

At a Glance

Language
JavaScript / TypeScript
Created
2018 · Ryan Carniato
Style
JSX + Signals
Render
Compile-time, no VDOM
Latest
Solid 1.x · SolidStart for full-stack

Basic Concepts

  • Components run once — only signals re-execute. No "re-render the function" model.
  • Signals (createSignal) are the reactive primitive — read with a getter, write with a setter.
  • Memos (createMemo) cache derived values; Effects (createEffect) run side effects.
  • JSX looks like React but is compiled differently — directly to DOM operations.
  • No diffing: the compiler knows exactly which DOM nodes depend on which signals.
Syntax

Taste of Solid

import { createSignal, createResource, For, Show } from "solid-js";

function ProductList() {
  const [products] = createResource(() =>
    fetch("/api/products").then(r => r.json())
  );

  return (
    <Show when={!products.loading} fallback={<p>Loading…</p>}>
      <ul>
        <For each={products()}>
          {p => <li>{p.name} — ${p.price}</li>}
        </For>
      </ul>
    </Show>
  );
}
Mechanics

Key Features

Signals & Fine-Grained Reactivity

A createSignal() returns a getter and a setter. When you read the getter inside a JSX expression or memo, Solid records the dependency. When you call the setter, only those exact DOM bindings update — no diffing, no reconciliation.

Resources & Suspense

createResource is a first-class async primitive — fetch + loading + error in one. Pair with <Suspense> for declarative loading boundaries.

Built-in Control Flow

<For>, <Show>, <Switch>, <Suspense>, <ErrorBoundary> — these compile to optimal DOM updates. Avoid .map() and ?: for lists/conditions.

SolidStart

Solid's meta-framework — file-based routing, server functions, SSR, streaming. Solid's answer to Next.js / SvelteKit.

Trade-offs

Strengths & Weaknesses

Strengths
  • JS framework benchmark champion year after year.
  • JSX feels familiar to React devs but performs better.
  • Tiny bundle, no virtual DOM overhead.
  • Predictable: components run once, period.
Weaknesses
  • Small ecosystem & hiring pool.
  • Mental model differs subtly from React — easy to misuse.
  • Fewer tutorials & UI kits.
  • SolidStart is younger than Next.js / SvelteKit.
Where It Shines

Sweet Spots

Performance-Critical UIs

Dashboards, real-time data, low-end devices.

React Devs Wanting Speed

Familiar JSX, dramatically better runtime.

Embedded & Edge UIs

Tiny bundles fit in widgets & edge environments.

Greenfield Projects

No legacy React habits to unlearn.

Continue

Other Web Frameworks

ReactAngularVueSvelteNext.jsNuxtSvelteKit ↑ Back to Client Side