如何在Fresh框架中渲染静态HTML字符串而非Preact？

Fresh默认会把导出的内容当作Preact组件解析，直接返回HTML字符串会被误识别为组件标签，这就是你遇到报错的原因。以下是两种可行的实现方案：

方案一：使用Fresh官方的raw工具函数 #

Fresh的runtime模块提供了raw函数，专门用来绕过Preact的转义逻辑，直接渲染原始HTML内容。修改代码如下：

// index.ts
import { raw } from "$fresh/runtime.ts";

export default raw(`<h1>Title</h1>`);

这个函数会明确告知Fresh：传入的字符串是原生HTML，不需要当作组件处理。

方案二：通过Preact组件的dangerouslySetInnerHTML属性渲染 #

如果需要结合其他Preact元素一起渲染，或者需要更灵活的控制，可以创建一个简单组件，使用dangerouslySetInnerHTML注入静态HTML：

// index.ts
export default function Page() {
  return <div dangerouslySetInnerHTML={{ __html: `<h1>Title</h1>` }} />;
}

注意事项 #

• 无论使用哪种方式，都要确保HTML内容是可信的，避免引入XSS安全风险。
• Fresh目前处于早期开发阶段，对非Preact渲染的支持有限，上述两种都是官方认可的静态HTML渲染方式。

内容的提问来源于stack exchange，提问作者Oscar Alfonso Guerrero