AstroでHTMLコメントを動的に出力する

2023/08/20（日）

AstroでHTMLコメントを動的に出力したい場合を想定します。
安直に以下の様に記述すると文字列として、それもエスケープされた状態で出力されてしまいます。

---
const {text) = Astro.props
---

<body>
  {`<!-- ${text} -->`} // &lt;!-- hoge --&gt;
</body>

こういった動的にHTMLコメントを文字列ではなく、HTMLとして出力したい場合は<Fragment />が有効です。<Fragment />はReactでいうところの<></>と同じように機能します。

---
const {text) = Astro.props
---

<body>
  <Fragment set:html={`<!-- ${text} -->`} /> // <!-- hoge -->
</body>

<Fragment />に対してset:htmlを指定することで、文字列ではなくHTMLとして出力することが出来ます。

動的にHTMLコメントを出力する場面はそう多くは無いでしょうが、例えばSSIの記述を出力をしたい場合などにはこの方法が有効でしょう。
以下の様なラッパーコンポーネントがあると幸せになれそうです。

---
const { path } = Astro.props
---

<Fragment set:html={`<!--#include virtual="${path}"-->`} /> // <!--#include virtual="parts/header.html"-->

---
import SSIInclude from '@components/Utils/SSIInclude.astro'
---

<body>
  <SSIInclude path="parts/header.html" />
</body>