如何在Cloudflare Worker中使用服务器端模板渲染动态内容？

PubDate

2024-02-26

Author

王福强

Cloudflare Worker允许打包除了js之外的其它内容，所以，我们可以将服务器端模板打包进Cloudflare Worker应用，然后再通过Mustache模板引擎渲染成结果内容，最后发送给客户端即可。

警告

Cloudflare Worker的运行时（runtime）有限制，所以，服务器端的模板渲染引擎可能很多，但试下来就Mustache可以正常使用。

要完成整个过程，第一步是通过wrangler.toml配置哪些资源要一起打包，我们选择将html和markdown内容一起打包：

rules = [
  { type = "Text", globs = ["**/*.md"], fallthrough = true },
  { type = "Text", globs = ["**/*.html"], fallthrough = true },
]

第二步是在js代码中引入(import)这些资源并使用：

import partial from "./templates/partial.html"
import readme from "./readme.md"

那这些资源到底是从哪里引入到程序的呢？ 这些资源实际上跟js源代码一起放在src目录下（更确切的说，是跟当前引用这些资源的js源代码放在一起，这个关系是由wrangler.toml中的main = "src/index.js"配置项决定的）：

src
├── index.js
├── readme.md
└── templates
    └── partial.html

第三步就是直接使用引入的内容了，比如：

import Mustache from "mustache"
...

app.get("/readme", c => c.text(readme))

app.get("/ssr", async (c)=> {
  let result = Mustache.render(partial, {
    value: "the dynamic content you would like to fill in."
  })
  return c.html(result)
})

像markdown内容，如果你不希望直接返回给客户端markdown格式的源代码内容，也可以再加一道转换逻辑，转换为html返回也是so easy，这里就不做演示了，大家可以自行探索。