您可以利用边缘函数做边缘页面渲染（ESR），页面可以以任意形式存在，比如简单的静态页面，或者根据具体请求信息动态生成。
通常源站会返回一些错误信息，比如 Java 的服务器通常会返回一个 tomcat 的页面，其中包含了较为敏感的代码 stacktrace 信息，这些信息如果直接返回给用户会非常不友好。使用边缘函数则可以拦截这种源站返回的错误页面，然后发送更为友好的自定义页面给用户。
const htmlResponse = ` <html> <head>错误页面</head> <body>服务器开了点小差，亲，请稍后再试</body> </html> `; addEventListener('fetch', (event) => { event.respondWith(handleResponse(event)); }); function isErrorStaus(st) { return st >= 500; } async function handleResponse(event) { const response = await fetch(event.request); // 如果源站返回了 >= 500的状态码，那么我们返回自定义错误页面 // 否则返回源站的信息。 if (isErrorStatus(response.status)) { return htmlResponse; } else { return response; } }
同时，这样的逻辑也适用于边缘特殊信息的兜底和校验，比如，源站的页面由于功能异常可能会泄漏敏感信息，边缘侧可以增加检查是否存在敏感信息的逻辑，并及时上报错误，这种功能常常和A/B测试结合使用。
天气预报页面利用用户的地理信息进行查询，您可以利用边缘函数运行时提供的该信息用于天气信息查询，然后再利用 JavaScript 代码将信息生成对应的页面。
const apiURL = 'http://www.tianqiapi.com/free/day?appsecret=abcdefg&appid=abcdefg&'; async function queryWeather(city) { const response = await fetch(apiURL + 'city=' + city); if (response.ok) { // 假设返回的数据为JSON /* { air: '94', city: '南京', cityid: '101190101', tem: '31', tem_day: '31', tem_night: '24', update_time: '14:12', wea: '多云', wea_img: 'yun', win: '东南风', win_meter: '9km/h', win_speed: '2级' } */ const data = await response.json(); const weather = data.wea; const tempDay = data.temp_day; const tempNight = data.temp_night; return `<html> <head> 来自${city} 的用户</head> <body> 您好，您的当地天气为：${weather}，白天气温为 ${ tempHigh}，夜间气温为 ${tempLow}</body> </html> `; } else { return '<html><head>天气API开小差了</head></body>'; } } async function handle(event) { // 获得客户端的ip城市地址信息 const city = event.info.geo.city; // 通过city查询该用户的天气信息 return queryWeather(city); }