WebAssemblyShikiRSCCloudflare Workers트러블슈팅DevLog

RSC 환경에서 WebAssembly가 차단되는 이유 — Shiki에서 rehype-prism-plus로

2026년 3월 16일11분 읽기

WebAssembly란 무엇인가

WebAssembly(Wasm)는 브라우저와 서버에서 실행할 수 있는 저수준 바이너리 포맷이다. C, C++, Rust 같은 언어로 작성된 코드를 컴파일해서 .wasm 바이너리로 만들고, JavaScript에서 WebAssembly.instantiate()로 로드해 실행한다.

JavaScript보다 빠른 성능이 필요할 때 사용된다. 이미지 처리, 암호화, 정규표현식 엔진 같은 CPU 집약적 작업이 대표적이다.

// WebAssembly 모듈 로드의 기본 형태
const response = await fetch("module.wasm");
const { instance } = await WebAssembly.instantiateStreaming(response);
instance.exports.someFunction();

문제는 모든 런타임이 WebAssembly를 허용하지는 않는다는 점이다.

Shiki는 왜 WebAssembly를 쓰는가

Shiki는 VS Code와 동일한 TextMate 문법을 사용하는 구문 강조 라이브러리다. TextMate 문법의 정규표현식은 JavaScript의 RegExp로는 처리할 수 없는 Oniguruma 정규표현식 문법을 사용한다.

tsx

// MdxRenderer.tsx — 문제의 코드
import { codeToHtml } from "shiki";

pre: async ({ children, ...props }) => {
  const highlighted = await codeToHtml(codeString, {
    lang: language ?? "text",
    theme: "github-dark",
  });
  return <CodeBlock code={highlighted} language={language} />;
},

// Workers에서 허용되는 방식
import wasm from "./module.wasm";
const instance = await WebAssembly.instantiate(wasm);

// Workers에서 차단되는 방식 — Shiki가 하는 방식
const response = await fetch("onig.wasm");
await WebAssembly.instantiateStreaming(response);

import rehypePrismPlus from "rehype-prism-plus";

const compiled = await compile(result.source, {
  outputFormat: "program",
  development: false,
  jsx: true,
  rehypePlugins: [[rehypePrismPlus, { ignoreMissing: true }]],
});

tsx

// Before — 런타임 Shiki (WASM 필요)
import { codeToHtml } from "shiki";

pre: async ({ children }) => {
  const highlighted = await codeToHtml(code, { lang, theme: "github-dark" });
  return <CodeBlock code={highlighted} />;
},

// After — 빌드 타임 하이라이팅 (WASM 불필요)
pre: ({ children }) => {
  return (
    pre

tsx

code: ({ className, ...props }) => {
  // 코드 블록 내부의 code인지 판별
  const isInCodeBlock = className?.split(" ")
    .some(c => c.startsWith("language-") || c === "code-highlight");

  if (isInCodeBlock) {
    return <code className="font-mono" {...props} />;
  }
  // 인라인 코드
  return <code className

[Before] 페이지 요청
  → RSC 렌더링 시작
  → pre 컴포넌트에서 codeToHtml() 호출
  → Shiki가 onig.wasm 로드 시도
  → WebAssembly.instantiate() 차단
  → 에러

[After] 빌드 타임
  → MDX 컴파일 시 rehype-prism-plus가 토큰화
  → .compiled.jsx에 하이라이팅된 span이 포함됨

[After] 페이지 요청
  → RSC 렌더링 시작
  → pre 컴포넌트가 이미 하이라이팅된 children을 그대로 렌더링
  → WASM 불필요 → 에러 없음

WebAssembly란 무엇인가

Shiki는 왜 WebAssembly를 쓰는가

오케이징에게 물어보기

포스트 목록

같은 섹션의 대표 이미지

본문 이미지를 나중에 넣는 게 아니라 — SEOJing 글쓰기.

문제 상황

왜 RSC 환경에서 WebAssembly가 차단되는가

해결: 런타임 하이라이팅에서 빌드 타임 하이라이팅으로

1. 의존성 교체

2. MDX 컴파일에 rehype 플러그인 추가

3. MdxRenderer에서 Shiki 제거

4. Prism 토큰 CSS 추가

Before / After 비교

핵심 교훈

글 위에 영상을 붙인다는 것 — SEOJing 요약.

대표 이미지 자동화 실험 — 검색과 Codex 생성이 같은.

대표 이미지를 글마다 다시 붙이는 방식 — 사진 검색에서.

Day 12 - 테스트 커버리지 개선, 모바일 프레젠테이션 버그 2건.

useEffect cleanup과 의존성 배열 — 실전 버그.

Day 11 - 프레젠테이션 확대 기능,.

vinext 오픈소스 기여기: 한국어 slug가 RSC에서.

vinext는 왜 빠를까? — SSR, Vite, Edge,.

100vh가 100%가 아닌 이유 — 모바일 뷰포트 단위 완전 정리.

Day 10 - 프레젠테이션 모드 안정화.

Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅.

모바일 웹에서 가로 모드를 강제하는 5가지 방법 — iOS.

블로그 글을 PPT로 만들기 — DOM 클로닝 기반.

Day 8 - 아티클 퀴즈와 스터디 자료.

Context로 퀴즈 컴포넌트를 만들다 막혀서.

Day 7 - Front Matter CMS와 관련 게시물.

Day 6 - 스터디 자료 작성과 데스크탑 비율 수정.

Day 5 - shiki 제거, MDX 모듈화, 그리고.

Day 4 - 배포와 CI/CD.

Cloudflare Workers에서 fs 모듈이 안 되는 이유와.

localStorage 읽기에서 하이드레이션 에러가 터지는 이유.

vinext + GitHub Actions로.

RSC 환경에서 WebAssembly가 차단되는 이유 —.

엄청난 피드백.

생각보다 어려웠던 댓글, 완독 로컬스토리지.

MDX 관련 이슈 노트.

Day 3 - MDX 이슈, 반응형, 다크모드.

디자인 시스템을 구축할 때 주의할 점.

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?.

MDX DOM 트리 파싱하기.

결국 Node.js 까지 와버렸다.

Day 2 - 블로그 스켈레톤과 MDX 파싱.

전체적인 플로우.

Storybook으로 디자인 시스템 테스팅하기.

MDX가 뭘까?.

Day 1 - 디자인 컨셉과 디자인 시스템.

기술 블로그를 직접 제작하게 된 이유.

왜 자꾸 프로젝트가 중단되는지.