Edge Computing with Cloudflare Workers & Deno · درس

العرض من جانب الخادم على الحافة

اعرض صفحات متكاملة أثناء التشغيل على الحافة لتحقيق ظهور أول سريع، ومحتوى ديناميكي، وHTML ملائمًا لمحركات البحث.

العرض من جانب الخادم على الحافة درس مجاني في Edge Computing with Cloudflare Workers & Deno على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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.

الأسئلة الشائعة

هل درس «العرض من جانب الخادم على الحافة» مجاني؟

نعم — نص درس «العرض من جانب الخادم على الحافة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Edge Computing with Cloudflare Workers & Deno، انتقل إلى CoddyKit PRO. تتضمن دورة Edge Computing with Cloudflare Workers & Deno 4 دروس في المجموع.

ماذا ستتعلم في «العرض من جانب الخادم على الحافة»؟

اعرض صفحات متكاملة أثناء التشغيل على الحافة لتحقيق ظهور أول سريع، ومحتوى ديناميكي، وHTML ملائمًا لمحركات البحث. تتمرن على Edge Computing with Cloudflare Workers & Deno مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Edge Computing with Cloudflare Workers & Deno