Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Server Componentで生のHTMLを扱う技術

Avatar for nakataki nakataki
February 26, 2025
0
400

React Server Componentで生のHTMLを扱う技術

はてなCMSはノーコードエディタが出力するHTML・CSSをReact Server Componentsでレンダリングしています。また、ユーザーが自由にHTML・CSSを記述する機能も備えています。
Next.js App Router上において、ノーコードで作ったコンテンツをServer-Side Renderingしてパフォーマンスを確保することと、ユーザがHTMLや`script`タグを自由度高く埋め込めることを両立するために、どのような工夫を行ったのか解説します。
Avatar for nakataki

nakataki

February 26, 2025
Tweet

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
76
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.4k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k

Transcript

  1. React Server Componentで 生のHTMLを扱う技術 id:nakataki / @nakataki17 2025/02/25 Hatena Engineer

    Seminar #32 1

  2. 自己紹介 id:nakataki (@nakataki17) 株式会社はてな 23年新卒入社 → ブログチーム Webアプリケーションエンジニア 得意分野は React

    + Next.js 副業で謎解きクリエイターもやっています 2

  3. はてなCMS ノーコードでカンタンにWebサイトの構築・公開・運用ができるCMS Next.js製 2024/2/3 リリース はてなCMSのLPも、はてなCMS製です！ 3

  4. LPもはてなCMS製! 4

  5. プロダクトのバックボーン Unlayer はてなCMSが採用した、プロプライエタリなノーコードエディタ React ComponentとしてのAPIも提供するので要望に合致 ページを作ると、HTMLとCSSを生成 大事なのは、これが生のHTMLとCSSを出力するということ これをどうやってNext.jsでSSRしようか？ 5

  6. はてなCMSのしくみ ページ管理とページのレンダリングを同一 のNext.jsアプリケーションで実施 ノーコードエディタが出力するHTMLに CMSならではの設定項目を反映して、 React Server Componentに変換して Server-Side Rendering

    6

  7. こういう流れになる 7

  8. CMSならではの設定項目 ざっくり3つ ブログの記事埋め込み カスタム<head> 自由HTML埋め込み これらをApp Routerで各個撃破！ 8

  9. 各ステップに対応する 9

  10. ブログの記事埋め込み 10

  11. ブログの記事埋め込み レンダリング時にブログ本体と通信して記事データをもらってくる 単一のReact Componentとして開発 では、HTMLの一部をどうやってReact Componentにするのか？ 11

  12. ブログの記事埋め込み 2 まず、Unlayerを拡張してこういうHTMLを吐き出してもらう(例) <div data-**="embeddedBlog" data-***="{設定項目}" /> これをReactコンポーネントに変換 Unlayer(HTML) →

    JSDOM(パース) → html-react-parser(Component生成) 12

  13. html-react-parser 文字列からReactコンポーネントを組み立ててくれる。 import parse from "html-react-parser"; const Hello = parse("<div>Hello,

    World!</div>"); ↑同じ！↓ const Hello = <div>Hello,World!</div>; 13

  14. html-react-parser 2 操作もできる(コードはnpmを参照) parse('<p id="replace">text</p>', { replace(domNode) { if (domNode.attribs

    && domNode.attribs.id === "replace") { return <span>replaced</span>; } }, }); 14

  15. ブログの記事埋め込み 3 できたReactコンポーネントをServer Componentとしてレンダリング Next.js App Routerならではポイント 記事データの取得もサーバ側で行う(= キャッシュが効く) 15

  16. 余談: App Routerの強み 今回の要件: HTMLからReact Componentを生成して配信したい 16

  17. 余談: App Routerの強み Pages Routerを使うと… getServerSideProps ではJSONにSerializeできるものしか返せない JSX Element(Reactコンポーネント)は渡せない つまり、Componentの生成を

    Page() 以下でやるしかない そして Page() の処理は、クライアントにコードが露出してしまう セキュリティ、パフォーマンスの両面で懸念 17

  18. 余談: App Routerの強み 2 App Routerだと… React Server Compoentを生成できる Component生成のロジックは隠蔽される

    つまり… React Componentを生成してSSRしたかったら、App Routerを使おう！ 18

  19. カスタム<head> 19

  20. カスタム<head> App Routerでは、もはや<head>を触らせてくれない。 <Next/Head> なんてない 各種メタデータを generateMetadata() 関数でエクスポート export function

    generateMetadata(): Metadata { return { title: "Hello, World!", description: "Hatena Engineer Seminar #32", }; } ユーザが入力した文字列から Metadata オブジェクトを組み立てるのは 非現実的… 20

  21. カスタム<head> 2 React 19の新機能を使おう React がこのコンポーネントをレンダーする際、 <title> , <link> ,

    <meta> タグを認識し、自動的にドキュメントの <head> セクションに移動させます。 React v19 – React Reactから直接ドキュメントにメタデータを追加できるようになっている！ 21

  22. カスタム<head> 3 Easy (簡略化しています) document.querySelectorAll("script, meta, link").forEach((elem, index) => {

    if (elem.tagName.toLowerCase() === "style") { elem.setAttribute("precedence", "high"); elem.setAttribute("href", `user_style_${index}`); } if (elem.tagName.toLowerCase() === "link") { elem.setAttribute("precedence", "high"); } headContent += elem.outerHTML; }); 22

  23. 余談: styleとlink <style> と <link> は… precedence 属性(React独自)をつけないと並び替えてくれない headに挿入する際に、どこに挿入するのか優先度 (

    precedence ) を指定する必要がある 23

  24. 自由HTML埋め込み 24

  25. 自由HTML埋め込み ユーザ入力のHTML <script> を Next/Script に置き換えて生成 → レンダリング時に展開 してやればよさそう…？ 25

  26. ここで問題発生 26

  27. LPの資料請求フォームが出ない！ 27

  28. LPの資料請求フォームが出ない！ 28

  29. 自由HTML埋め込み: 落とし穴 LPの資料請求フォームが出ない！ <script> でBIツールを埋め込んでいた このツールは、実行時にまず <div> を生成して、そこにFormを展開す る挙動をする 29

  30. 自由HTML埋め込み: 調べる Twitterカード なども動かない DOMをその場に生成する <script> が動いていなさそう Hydration Error が起きていたのが原因

    30

  31. Hydration Errorとは？ Next.js はサーバ側でHTMLを作成し、クライアントへ送る クライアントのHTML構造がサーバで準備したものと異なるとエラーに なる 今回はクライアント側でフォームやTwitterカードの挿入が発生し、 HTML構造が変わったため発生 31

  32. 今回のケースではこう 32

  33. 自由HTML埋め込み: 直す const isServerSide = typeof window === "undefined"; export

    function SSROnlyBlock({ html }: { html: string }) { return ( <div suppressHydrationWarning dangerouslySetInnerHTML={{ __html: isServerSide ? html : "" }} /> ); } Next.jsは dangerouslySetInnerHTML で指定したScriptをHydrationの 対象にしない suppressHydrationWarning でエラーを回避 33

  34. 余談: dangerous すぎないか？ はてなブログ/CMSは、その特性上、ユーザが任意のJSを実行できる。 そういう意味で、 dangerous であることは避けられない そこで記事編集と閲覧/プレビューをドメインごと分離し、JSの実行は 閲覧用ドメインに限るようにしている hatena.ne.jp

    = 記事編集画面 hatena.com(など) = 記事閲覧画面 記事編集画面での任意コード実行を防ぐ 詳しくはnanto_viさんの発表にて 34

  35. 解決まとめ ブログの記事埋め込み → JSDOM + html-react-parser <head> → React 19の新機能(巻き上げ)

    自由HTML埋め込み → suppressHydrationWarning 35

  36. まとめ 最新のWebフレームワークを使って、CMSの未来を切り開いていきます 36