边缘的服务器端渲染
在边缘动态渲染全栈页面，以实现快速的首次绘制、动态内容和对 SEO 友好的 HTML。
边缘的服务器端渲染 是 CoddyKit 上的免费 Edge Computing with Cloudflare Workers & Deno 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Edge Computing with Cloudflare Workers & Deno 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Edge Computing with Cloudflare Workers & Deno 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why SSR at the Edge?
Server-Side Rendering (SSR) generates HTML on each request instead of shipping a blank shell to the browser.
Running SSR at the edge means:
- HTML is built close to the user, low latency
- Great first paint and SEO
- Personalized, dynamic content per request
SSR vs Static Sites
Static pages are pre-built and cached, fast but identical for everyone.
SSR builds HTML per request, ideal for content that depends on the user, location, or live data.
Many edge apps mix both.
Returning HTML from a Worker
At its core, SSR is just returning an HTML string with the right content type.
export default {
async fetch(request) {
const html = '<!DOCTYPE html><html><body><h1>Hello Edge</h1></body></html>';
return new Response(html, {
headers: { 'Content-Type': 'text/html;charset=UTF-8' }
});
}
};Injecting Dynamic Data
Fetch data first, then template it into the HTML before responding.
const user = await env.DB.prepare('SELECT name FROM users WHERE id = ?')
.bind(id).first();
const html = '<h1>Welcome, ' + escapeHtml(user.name) + '</h1>';Framework SSR on the Edge
Modern frameworks render to a string on the server. Their edge adapters run this inside a Worker.
import { renderToString } from 'react-dom/server';
import { App } from './App';
const markup = renderToString(App({ user }));Streaming SSR
Instead of waiting for the whole page, stream HTML as it renders so the browser starts painting sooner.
const { readable, writable } = new TransformStream();
renderToReadableStream(App()).then((s) => s.pipeTo(writable));
return new Response(readable, {
headers: { 'Content-Type': 'text/html' }
});Hydration
SSR produces static HTML, then client JS hydrates it to make it interactive.
Send the same data to the client so hydration matches the server output exactly, mismatches cause warnings.
const tag = '<script>window.__DATA__ = ' + JSON.stringify(data) + ';</script>';Using HTMLRewriter
Cloudflare's HTMLRewriter streams and transforms HTML efficiently, perfect for injecting content into a base template.
return new HTMLRewriter()
.on('title', { element(e) { e.setInnerContent('My Page'); } })
.transform(response);Caching SSR Output
Pure-static portions of SSR output can be cached, but personalized pages must not be cached publicly.
Use Cache-Control wisely and vary by user where needed.
headers.set('Cache-Control', 'private, no-store');SEO Benefits
Because SSR returns fully-formed HTML, crawlers see real content immediately, no JS execution required, improving SEO and social previews.
Best Practices Summary
For solid edge SSR:
- Fetch data, then render to a string or stream
- Always escape interpolated data
- Hydrate with matching client data
- Stream for faster first paint
- Cache static parts, never cache private pages publicly
Quick Check
What is the main advantage of streaming SSR over rendering the full page first?
Recap
You can now render full pages at the edge:
- Return dynamic, escaped HTML per request
- Use framework adapters and streaming for speed
- Hydrate with matching client data
- Transform output with HTMLRewriter and cache carefully
Edge SSR gives you fast, dynamic, SEO-friendly full-stack apps.
常见问题解答
「边缘的服务器端渲染」课时是免费的吗？
是的 — 「边缘的服务器端渲染」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Edge Computing with Cloudflare Workers & Deno 课程的其余内容，请升级到 CoddyKit PRO。 Edge Computing with Cloudflare Workers & Deno 课程共包含 4 节课。
「边缘的服务器端渲染」这节课中我会学到什么？
在边缘动态渲染全栈页面，以实现快速的首次绘制、动态内容和对 SEO 友好的 HTML。 你通过在浏览器中直接运行的动手代码来练习 Edge Computing with Cloudflare Workers & Deno，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Edge Computing with Cloudflare Workers & Deno 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Edge Computing with Cloudflare Workers & Deno 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「边缘的服务器端渲染」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Edge Computing with Cloudflare Workers & Deno 课中编写并运行代码吗？
能。每节 Edge Computing with Cloudflare Workers & Deno 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。