Solid Core Overview

solid-core-overview

Quick Reference

Version Matrix

Key Version Dependencies

Critical Warnings

NEVER use SolidStart 0.x APIs (createServerData$, createServerAction$) in new projects — they are removed in SolidStart 1.0. ALWAYS use "use server" with query/action instead.

NEVER use cache from @solidjs/router — it is deprecated. ALWAYS use query (available in router 0.15+).

NEVER import store utilities from solid-js — stores live in solid-js/store. Wrong imports cause runtime errors with no compile-time warning.

NEVER import rendering utilities from solid-js — SSR/hydration functions live in solid-js/web.

NEVER confuse @solidjs/router (current) with the old solid-app-router package — the old package is abandoned.

API Categories at a Glance

Reactivity Primitives (solid-js)

Reactive Utilities (solid-js)

Lifecycle (solid-js)

Store Utilities (solid-js/store)

Component Utilities (solid-js)

Control Flow (solid-js)

Rendering (solid-js/web)

Router (@solidjs/router)

SolidStart (@solidjs/start)

SolidJS 2.x Changes Summary

New 2.x Primitives

• <Loading> — Fallback during initial render without tearing down UI
• isPending() — Track refreshing state
• action() — Dedicated mutation primitive with optimistic patterns
• createOptimistic / createOptimisticStore — Explicit optimistic UI

Getting Started

npm init solid@latest

Minimal SolidStart Project Structure

my-app/
├── public/
├── src/
│   ├── routes/
│   │   └── index.tsx          # / route
│   ├── entry-client.tsx       # Client hydration entry
│   ├── entry-server.tsx       # Server handler entry
│   └── app.tsx                # Root component
├── app.config.ts              # SolidStart configuration
├── package.json
├── tsconfig.json
└── vite.config.ts

Minimal app.tsx (SolidStart)

import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";

export default function App() {
  return (
    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>
  );
}

Minimal SolidJS App (No SolidStart)

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function App() {
  const [count, setCount] = createSignal(0);
  return <button => setCount((c) => c + 1)}>Count: {count()}</button>;
}

render(() => <App />, document.getElementById("root")!);

Ecosystem Package Map

Reference Links

• references/methods.md -- Complete import map for all entry points
• references/examples.md -- App setup, SolidStart setup, version-specific patterns
• references/anti-patterns.md -- Wrong imports, version mismatches, ecosystem confusion

Official Sources

• https://docs.solidjs.com/concepts/intro-to-reactivity
• https://docs.solidjs.com/solid-start
• https://docs.solidjs.com/solid-router
• https://github.com/solidjs/solid
• https://github.com/solidjs-community/solid-primitives