Edge Computing with Cloudflare Workers & Deno · บทเรียน

การเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่เอดจ์

เรนเดอร์หน้าเว็บแบบครบสแตกแบบทันทีที่เอดจ์ เพื่อให้การแสดงผลครั้งแรกเร็ว เนื้อหาเป็นแบบไดนามิก และ HTML เป็นมิตรต่อ SEO

การเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่เอดจ์ เป็นบทเรียน Edge Computing with Cloudflare Workers & Deno ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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 ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Edge Computing with Cloudflare Workers & Deno ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Edge Computing with Cloudflare Workers & Deno มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่เอดจ์”

เรนเดอร์หน้าเว็บแบบครบสแตกแบบทันทีที่เอดจ์ เพื่อให้การแสดงผลครั้งแรกเร็ว เนื้อหาเป็นแบบไดนามิก และ HTML เป็นมิตรต่อ SEO คุณปฏิบัติ Edge Computing with Cloudflare Workers & Deno ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Edge Computing with Cloudflare Workers & Deno หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Edge Computing with Cloudflare Workers & Deno บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่เอดจ์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Edge Computing with Cloudflare Workers & Deno นี้ได้ไหม

ได้ บทเรียน Edge Computing with Cloudflare Workers & Deno ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Edge Computing with Cloudflare Workers & Deno