Lit 4.0 SSR — Web Components 서버 렌더 사후

핵심 요약

Lit 4.0 SSR로 사내 design system 28개 컴포넌트 web components 작성. React·Vue·plain HTML 어디서나 동일하게 사용. SSR로 FOUC 제거, hydration이 React/Vue와 자연스럽게 통합.

1. Lit 4.0 컴포넌트 — Tailwind 통합

import { LitElement, html, css } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('ys-button')
export class Button extends LitElement {
  static styles = css`
    button { padding: 8px 16px; border-radius: 8px; }
    .primary { background: var(--color-primary); color: white; }
  `
  @property() variant: 'primary' | 'outline' = 'primary'

  render() {
    return html``
  }
}

2. SSR — React에 임베드

// Next.js page.tsx
import { render } from '@lit-labs/ssr'
import './ys-button'
export default function Page() {
  const html = render(`Click me`)
  return 

}

3. 사용 사례 — 28 컴포넌트

Button·Card·Modal·Dropdown 등 28개. React, Vue, plain HTML, Astro, SvelteKit 사이트에서 동일 사용. 디자인 변경이 한 곳에서 끝남.

4. React 대비

5. 함정

• Shadow DOM 스타일링 — global CSS가 안 들어감, design token CSS 변수로 전달
• Form integration — formAssociated custom elements 필수, 그렇지 않으면 form submit 안 됨
• React Server Components — Lit SSR과 어색한 통합, 'use client' 명시 필요
• TypeScript — JSX/template literal 둘 다 type-safe하나 IDE 자동완성 React 대비 약함