CSS-in-JS 한계

~18 min · CSS-in-JS, styled-components, registry

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

styled-components 와 emotion 이 고생하는 이유

둘 다 JavaScript 통해 runtime 에 style inject. Server Component 가 client 에 JS 0 ship; runtime CSS-in-JS 가 Server Component 에서 작동 못 함. Directive boundary 가 hard wall.

접근	Server Component	Client Component
CSS Module	✅	✅
Tailwind CSS	✅	✅
styled-components	❌	✅ (with registry)
emotion	❌	✅ (with registry)

Registry pattern

CSS-in-JS 유지해야 하면, server rendering 동안 style collect 해서 response 에 flush 하는 Client "style registry" 로 app wrap. Performance 가 영원히 내는 세금.

깔끔한 답

새 project 위해선 Tailwind 또는 CSS Module. 어디서든 돌고 runtime 비용 0.

Code

styled-components registry·tsx

// lib/StyledComponentsRegistry.tsx
'use client';
import { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

export function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
  const [sheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = sheet.getStyleElement();
    sheet.instance.clearTag();
    return <>{styles}</>;
  });

  return (
    <StyleSheetManager sheet={sheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

External links

CSS-in-JS docs

Exercise

Project 가 styled-components 쓰면 registry pattern 설정하고 SSR style 이 unstyled content 의 flash 없이 도착하는지 확인. 안 쓰면 도입 찬/반 한 paragraph case 작성.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousTailwind CSS Next →next/image

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.