Server-side rendering aan de edge
Render full-stackpagina's on the fly aan de edge voor een snelle eerste weergave, dynamische content en SEO-vriendelijke HTML.
Server-side rendering aan de edge is een gratis Edge computing met Cloudflare Workers en Deno-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Edge computing met Cloudflare Workers en Deno. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Edge computing met Cloudflare Workers en Deno bevat in totaal 4 lessen.
Waarom SSR aan de edge?
Server-side rendering (SSR) genereert bij elk verzoek HTML in plaats van een lege basis naar de browser te sturen.
SSR aan de edge betekent:
- HTML wordt dicht bij de gebruiker opgebouwd, met lage latentie
- Een snelle eerste weergave en goede SEO
- Gepersonaliseerde, dynamische inhoud per verzoek
SSR versus statische sites
Statische pagina's worden vooraf opgebouwd en gecachet: ze zijn snel, maar voor iedereen hetzelfde.
SSR bouwt HTML per verzoek op en is ideaal voor inhoud die afhangt van de gebruiker, locatie of actuele gegevens.
Veel edge-apps combineren beide.
HTML retourneren vanuit een Worker
In de kern betekent SSR gewoon dat je een HTML-tekenreeks retourneert met het juiste inhoudstype.
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' }
});
}
};Dynamische gegevens invoegen
Haal eerst de gegevens op en verwerk ze daarna in de HTML voordat je antwoord geeft.
const user = await env.DB.prepare('SELECT name FROM users WHERE id = ?')
.bind(id).first();
const html = '<h1>Welcome, ' + escapeHtml(user.name) + '</h1>';SSR met frameworks aan de edge
Moderne frameworks renderen op de server naar een tekenreeks. Hun edge-adapters voeren dit uit binnen een Worker.
import { renderToString } from 'react-dom/server';
import { App } from './App';
const markup = renderToString(App({ user }));Streaming-SSR
Wacht niet op de hele pagina, maar stream HTML tijdens het renderen, zodat de browser eerder met weergeven begint.
const { readable, writable } = new TransformStream();
renderToReadableStream(App()).then((s) => s.pipeTo(writable));
return new Response(readable, {
headers: { 'Content-Type': 'text/html' }
});Hydratatie
SSR produceert statische HTML, waarna client-JavaScript deze hydrateert om haar interactief te maken.
Stuur dezelfde gegevens naar de client, zodat de hydratatie exact overeenkomt met de serveruitvoer; afwijkingen veroorzaken waarschuwingen.
const tag = '<script>window.__DATA__ = ' + JSON.stringify(data) + ';</script>';HTMLRewriter gebruiken
De HTMLRewriter van Cloudflare streamt en transformeert HTML efficiënt en is ideaal voor het invoegen van inhoud in een basissjabloon.
return new HTMLRewriter()
.on('title', { element(e) { e.setInnerContent('My Page'); } })
.transform(response);SSR-uitvoer cachen
Volledig statische delen van SSR-uitvoer kunnen worden gecachet, maar gepersonaliseerde pagina's mogen niet openbaar worden gecachet.
Gebruik Cache-Control verstandig en varieer waar nodig per gebruiker.
headers.set('Cache-Control', 'private, no-store');Voordelen voor SEO
Omdat SSR volledig gevormde HTML retourneert, zien crawlers direct echte inhoud. Er is geen uitvoering van JavaScript nodig, wat SEO en voorvertoningen op sociale media verbetert.
Samenvatting van best practices
Voor degelijke edge-SSR:
- Haal gegevens op en render ze daarna naar een tekenreeks of stream
- Escape geïnterpoleerde gegevens altijd
- Hydrateer met overeenkomende clientgegevens
- Gebruik streaming voor een snellere eerste weergave
- Cache statische delen, maar cache privépagina's nooit openbaar
Korte controle
Wat is het belangrijkste voordeel van streaming-SSR ten opzichte van eerst de volledige pagina renderen?
Samenvatting
Je kunt nu volledige pagina's aan de edge renderen:
- Retourneer per verzoek dynamische, geëscapete HTML
- Gebruik framework-adapters en streaming voor snelheid
- Hydrateer met overeenkomende clientgegevens
- Transformeer uitvoer met HTMLRewriter en cache zorgvuldig
Edge-SSR geeft je snelle, dynamische en SEO-vriendelijke full-stack-apps.
Leer Edge computing met Cloudflare Workers en Deno met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 47
Veelgestelde vragen
Is de les “Server-side rendering aan de edge” gratis?
Ja — de volledige tekst van “Server-side rendering aan de edge” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Edge computing met Cloudflare Workers en Deno wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Edge computing met Cloudflare Workers en Deno bevat in totaal 4 lessen.
Wat leer ik in “Server-side rendering aan de edge”?
Render full-stackpagina's on the fly aan de edge voor een snelle eerste weergave, dynamische content en SEO-vriendelijke HTML. Je oefent met Edge computing met Cloudflare Workers en Deno door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Edge computing met Cloudflare Workers en Deno te beginnen?
Ervaring vooraf is niet nodig. Edge computing met Cloudflare Workers en Deno op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Server-side rendering aan de edge”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Edge computing met Cloudflare Workers en Deno?
Ja. Elke les over Edge computing met Cloudflare Workers en Deno bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Workers Sites en Pages
- Frontendframeworks integreren
- Databaseproxy's met Deno
- Server-side rendering aan de edge