Edge Computing with Cloudflare Workers & Deno · Leçon

Rendu côté serveur à la périphérie

Générez des pages complètes à la volée à la périphérie pour accélérer le premier affichage, proposer du contenu dynamique et produire du HTML optimisé pour le SEO.

Rendu côté serveur à la périphérie est une leçon Edge Computing with Cloudflare Workers & Deno gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Edge Computing with Cloudflare Workers & Deno, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Edge Computing with Cloudflare Workers & Deno comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Rendu côté serveur à la périphérie » est-elle gratuite ?

Oui — le texte complet de « Rendu côté serveur à la périphérie » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Edge Computing with Cloudflare Workers & Deno, passe à CoddyKit PRO. Le cours Edge Computing with Cloudflare Workers & Deno comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Rendu côté serveur à la périphérie » ?

Générez des pages complètes à la volée à la périphérie pour accélérer le premier affichage, proposer du contenu dynamique et produire du HTML optimisé pour le SEO. Tu pratiques Edge Computing with Cloudflare Workers & Deno avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Edge Computing with Cloudflare Workers & Deno ?

Aucune expérience préalable n'est requise. Edge Computing with Cloudflare Workers & Deno sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Rendu côté serveur à la périphérie » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Edge Computing with Cloudflare Workers & Deno ?

Oui. Chaque leçon Edge Computing with Cloudflare Workers & Deno inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Edge Computing with Cloudflare Workers & Deno