Разработка фронтенда сайта на Solid.js

Разработка фронтенда сайта на Solid.js

Solid.js — реактивный фреймворк, который компилируется в нативный DOM-код без виртуального дерева. Никакого reconciliation-overhead, никакого re-render всего компонентного дерева. Если вам нужен React-подобный DX с производительностью, близкой к ванильному JS, — Solid.js это покрывает.

Почему Solid.js, а не React или Vue

Компоненты в Solid запускаются один раз. Нет хуков с правилами, нет зависимости от порядка вызовов. Реактивность строится через createSignal, createMemo и createEffect — это compile-time примитивы, которые генерируют точечные DOM-подписки.

Архитектура проекта

Стандартный стек для production-проекта на Solid.js:

• SolidStart — full-stack мета-фреймворк (SSR/SSG/SPA режимы)
• @solidjs/router — клиентский и серверный роутинг
• @tanstack/solid-query — асинхронные данные и кэш
• solid-primitives — дополнительные реактивные примитивы
• Vite — сборка, HMR, code splitting

// Пример компонента с реактивным состоянием
import { createSignal, createMemo, For } from 'solid-js';

function ProductList(props) {
  const [filter, setFilter] = createSignal('');

  const filtered = createMemo(() =>
    props.items.filter(p =>
      p.name.toLowerCase().includes(filter().toLowerCase())
    )
  );

  return (
    <div>
      <input value={filter()} onInput={e => setFilter(e.target.value)} />
      <For each={filtered()}>
        {item => <ProductCard item={item} />}
      </For>
    </div>
  );
}

createMemo пересчитывается только при изменении filter() или props.items — без ненужных итераций.

Что входит в разработку

Базовая интеграция (1–2 недели)

• Настройка SolidStart + Vite + TypeScript
• Конфигурация роутинга с lazy-загрузкой маршрутов
• Подключение TanStack Query для работы с API
• Базовые анимации через Motion One

Полноценный фронтенд (3–5 недель)

• Компонентная библиотека под дизайн-систему клиента
• Формы с валидацией через @modular-forms/solid
• Интеграция с REST/GraphQL API (Axios или fetch + типизация)
• SSR-режим через SolidStart с createRouteData
• Оптимизация Core Web Vitals: LCP < 1.5s, CLS = 0

Особенности реализации

Управление состоянием решается через встроенные примитивы без внешних стейт-менеджеров. Для глобального состояния используется паттерн Context + Signal:

import { createContext, useContext, createSignal } from 'solid-js';

const CartContext = createContext();

export function CartProvider(props) {
  const [items, setItems] = createSignal([]);
  const add = (item) => setItems(prev => [...prev, item]);
  return (
    <CartContext.Provider value={{ items, add }}>
      {props.children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

Стриминговый SSR доступен из коробки в SolidStart — компоненты отдаются клиенту по мере готовности через Suspense и <Show>, без блокировки HTML-потока.

Сроки и этапы

• Неделя 1: настройка окружения, компонентная база, роутинг
• Недели 2–3: бизнес-логика, интеграция API, формы
• Неделя 4: SEO, SSR или SSG, оптимизация бандла
• Неделя 5: тестирование (Vitest + @solidjs/testing-library), деплой

Деплой и инфраструктура

SolidStart поддерживает адаптеры для Vercel, Netlify, Cloudflare Workers, Node.js. Статический режим генерирует чистый HTML + минимальный JS-гидратор. Для Cloudflare Workers размер cold-start критичен — бандл Solid.js в 7 KB здесь имеет прямое бизнес-значение.

Если проект уже работает на React — миграция возможна постепенно. Solid.js компоненты можно встраивать в существующую страницу через render() без перестройки всего приложения.