Edge Computing with Cloudflare Workers & Deno · Lezione

Server-side rendering all’edge

Eseguite il rendering al volo di pagine full-stack all’edge per ottenere un primo rendering rapido, contenuti dinamici e HTML ottimizzato per la SEO.

Server-side rendering all’edge è una lezione Edge Computing with Cloudflare Workers & Deno gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Edge Computing with Cloudflare Workers & Deno, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Edge Computing with Cloudflare Workers & Deno include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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.

Domande Frequenti

La lezione «Server-side rendering all’edge» è gratuita?

Sì — il testo completo di «Server-side rendering all’edge» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Edge Computing with Cloudflare Workers & Deno, passa a CoddyKit PRO. Il corso Edge Computing with Cloudflare Workers & Deno include 4 lezioni in totale.

Cosa imparerò in «Server-side rendering all’edge»?

Eseguite il rendering al volo di pagine full-stack all’edge per ottenere un primo rendering rapido, contenuti dinamici e HTML ottimizzato per la SEO. Eserciti Edge Computing with Cloudflare Workers & Deno con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Edge Computing with Cloudflare Workers & Deno?

Non è richiesta alcuna esperienza precedente. Edge Computing with Cloudflare Workers & Deno su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Server-side rendering all’edge»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Edge Computing with Cloudflare Workers & Deno?

Sì. Ogni lezione Edge Computing with Cloudflare Workers & Deno include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Edge Computing with Cloudflare Workers & Deno