SolidStart 1.0 production — Astro 대비 동적 위주 사이트 사후

핵심 요약

SolidStart 1.0 GA. 사내 SaaS 대시보드 1개(MAU 4.2만) Next.js에서 마이그레이션. fine-grained reactivity로 re-render 호출 88% 감소, TTI 1.6s → 0.8s. 단 생태계는 여전히 작음.

1. fine-grained reactivity — Re-render 부재

React는 state 변경 시 컴포넌트 재실행. Solid는 signal 변경 시 해당 DOM 노드만 업데이트. 컴포넌트 함수는 mount 시 1번만 실행.

function Counter() {
  const [count, setCount] = createSignal(0)
  console.log('mount once')  // 1번만 출력
  return <button onClick={() => setCount(c => c + 1)}>{count()}</button>
}

2. SolidStart routes — file-based + signal-aware

// src/routes/posts/[id].tsx
import { createAsync, useParams } from '@solidjs/router'
export default function Post() {
  const params = useParams()
  const post = createAsync(() => fetch(`/api/posts/${params.id}`).then(r => r.json()))
  return <article>{post()?.title}</article>
}

3. Next.js 대비 — 14개 페이지 마이그레이션

4. 생태계 — 약점

• UI 라이브러리 — shadcn-solid 있으나 컴포넌트 수 절반
• Forms — solid-form-handler 등 있으나 react-hook-form 수준 아님
• State — store API 좋지만 Redux 같은 큰 에코 부재

5. 함정

• destructuring signal — const { count } = state는 reactive 깨짐, accessor 그대로 사용
• Effect 의존 — createEffect 안에서 호출한 signal만 추적, conditional 분기 주의
• Hydration — SSR 후 client에서 signal 동기화, mismatch 시 화이트스크린
• Vinxi 빌드 — 일부 vite plugin 호환 미진, plugin order 신경