SSR (서버 사이드 렌더링)

Inkio는 Next.js App Router 환경에서 SSR을 지원합니다.

동작 방식

1. 서버: generateHTML(@tiptap/html)로 정적 HTML 생성
2. 클라이언트: 정적 HTML을 SSR shell로 표시 → Tiptap 에디터가 hydration 후 대체

SSR shell은 클라이언트와 동일한 HTML을 생성하므로 hydration mismatch가 발생하지 않습니다.

설정

별도 설정 없이 동작합니다. Editor와 Viewer 컴포넌트가 자동으로 SSR을 처리합니다.

// Next.js App Router — 자동 SSR
import { Editor } from '@inkio/editor';
import '@inkio/editor/style.css';
 
export default function Page() {
  return <Editor content={content} />;
}

HTML 문자열 입력

content prop에 HTML 문자열을 전달하면, 서버에서는 sanitize-html로 XSS를 방지한 후 렌더링합니다.

<Editor content="<p>Hello <strong>World</strong></p>" />

보안

• JSON 콘텐츠: @tiptap/html의 DOM 기반 렌더링으로 텍스트 노드 자동 이스케이프
• HTML 문자열: sanitize-html 화이트리스트 기반 필터링
• 허용된 스타일: color, background-color, text-align만 허용
• 차단된 프로토콜: javascript:, vbscript:, 활성 콘텐츠 data: URL(image/svg+xml, text/html 등). 안전한 래스터 이미지(png/jpeg/gif/webp 등) data: URL은 에디터 노드 레이어에서만 허용됩니다
• 정적 HTML의 <img src>는 http(s)/blob만 허용됩니다
• target이 있는 링크에는 rel="noopener noreferrer"가 자동 적용됩니다 (reverse tabnabbing 방지)

주의사항

• parseMarkdown은 DOM이 필요하므로 모듈 레벨에서 호출할 수 없습니다
• 'use client' 지시어는 Editor/Viewer 컴포넌트에 이미 포함되어 있습니다