2nd/10_Wiki/Topic_Programming/Coding/Frontend_Solid_Qwik_Deep.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
frontend-solid-qwik-deep	SolidJS / Qwik — signal-based reactivity	Coding	draft	B	conceptual	2026-05-09	2026-05-09	frontend solid qwik vibe-coding	language applicable_to TS Frontend		SolidJS Qwik signals fine-grained reactivity resumability no VDOM

SolidJS / Qwik

React 의 future. Solid (signal, no VDOM), Qwik (resumability, 0 hydration). Modern reactivity primitive.

📖 핵심 개념

• Signal: reactive primitive.
• Solid: compile-time + signals.
• Qwik: lazy hydrate (resumability).
• React Compiler 가 비슷 path.

💻 코드 패턴

Solid

import { createSignal, createEffect } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);
  
  createEffect(() => {
    console.log('count:', count());
  });
  
  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

→ count() 가 function. Component 가 1번 만 (no re-render).

Solid 의 signal

const [name, setName] = createSignal('Alice');
console.log(name());          // 'Alice'
setName('Bob');
console.log(name());          // 'Bob'

→ Get / set primitive.

Effect / memo

const double = createMemo(() => count() * 2);
// → cached, signal 변경 시만 재계산.

createEffect(() => {
  console.log('double:', double());
});

→ React 의 useMemo / useEffect 비슷.

Resource (async)

const [user] = createResource(userId, fetchUser);

return <p>{user()?.name}</p>;

→ Suspense 친화.

Solid 의 "no VDOM"

React: 매 render = VDOM diff.
Solid: 매 signal 변경 = 정확 DOM 부분 update.

→ "Most efficient"  benchmark.

Solid Start (fullstack)

// routes/index.tsx
export default function Home() {
  const [count, setCount] = createSignal(0);
  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

→ Next.js 의 Solid version.

Qwik

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);
  
  return (
    <button onClick$={() => count.value++}>
      {count.value}
    </button>
  );
});

→ $ = lazy boundary. JS 가 lazy load.

Qwik 의 resumability

React:
- Server render HTML.
- Client hydrate (모든 JS).
- "Hydration cost" = 큰.

Qwik:
- Server render HTML + state.
- Client = 0 JS download (idle).
- Click 시 = 그 click handler 의 JS 만 download.

→ 큰 page = 매우 빠름 first interaction.

Qwik City (fullstack)

// routes/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>Hello</h1>;
});

// Server route
export const onGet: RequestHandler = async ({ json }) => {
  json(200, { msg: 'API' });
};

vs React

React:
- VDOM + reconciliation.
- React Compiler 가 자동 memo (modern).
- 큰 ecosystem.

Solid:
- No VDOM.
- 매우 빠름.
- 작은 ecosystem.

Qwik:
- Resumability.
- 0 hydration cost.
- Steeper learning.

Signals 의 evolution

1. Knockout / RxJS (옛 reactive).
2. Vue / Angular (자체 signal).
3. SolidJS (modern primitive).
4. Preact signals.
5. Svelte 5 (rune).
6. React Compiler (대신 자동 memo).

→ Signal 가 수렴.

Use case

Solid:
- Performance critical (data viz, real-time).
- Small bundle (작은 lib).
- React 비슷 API 가 좋음.

Qwik:
- E-commerce (Shopify Hydrogen 의 alternative).
- Marketing site (FCP critical).
- 큰 page + 적은 interaction.

When NOT?

- 큰 React ecosystem 에 의존.
- Library 가 React-only.
- Team 가 React 만 알아.
- Migration cost 큰.

→ React + Compiler 가 수렴.

Migration Solid (React 에서)

// React
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;

// Solid
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(count() + 1)}>{count()}</button>;

→ 거의 같음. Function call vs property.

Solid devtools

Browser extension.
- Component tree.
- Signal state.
- 매 effect 의 trigger.

Production

Solid:
- Small but growing.
- Babylon.js 의 demo.
- 작은 / specific app.

Qwik:
- Builder.io (자체).
- Some Shopify e-commerce.

함정 (Solid)

- `count` vs `count()`: function call 잊음.
- Destructure: signal 가 lose reactivity.
- For each + signal: createSignal 안에서 lifecycle.

// ❌
const { count, setCount } = state;  // destructure → 잃음.

// ✅ accessor
return <p>{state.count()}</p>;

Future

2026: Solid 가 niche, React Compiler 가 mainstream.
Qwik 가 specific (e-commerce).
React + Compiler 가 가장 큰 user base.

→ "Best framework" debate 가 지난.
"Use what works" 가 답.

🤔 의사결정 기준

상황	추천
Performance critical	Solid
0 hydration cost	Qwik
큰 ecosystem	React + Compiler
Migration	React stay
New small project	Solid 시도
E-commerce	Qwik / Astro

❌ 안티패턴

• Signal destructure: lose reactivity.
• Solid + React patterns 가정: 다름.
• 모든 거 reactive: 가짜 dependency.
• Qwik + heavy interaction: hydration cost.
• Bundle size 강조 + library 큰: trade-off.

🤖 LLM 활용 힌트

• Signal 가 modern reactivity.
• React Compiler 가 React 의 답.
• Solid 가 niche / specific.
• Qwik 가 e-commerce 친화.

🔗 관련 문서

• Frontend_SolidJS_Qwik
• Frontend_React_Compiler_Deep
• Frontend_Million_Optimization