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

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

Solid.js — реактивний фреймворк, який компілюється в нативний DOM-код без віртуального дерева. Без overhead переконциліації, без перерендеру всього дерева компонентів. Якщо вам потрібен 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 розмір бандла критичний — бандл Solid.js у 7 KB має прямий бізнес-сенс тут.

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