Server-side rendering på edge
Rendera fullstack-sidor i realtid på edge för snabb första rendering, dynamiskt innehåll och SEO-vänlig HTML.
Server-side rendering på edge är en gratis lektion i Edge computing med Cloudflare Workers och Deno på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Edge computing med Cloudflare Workers och Deno, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Edge computing med Cloudflare Workers och Deno innehåller totalt 4 lektioner.
Varför SSR vid kanten?
Server-Side Rendering (SSR) genererar HTML för varje begäran i stället för att skicka ett tomt skal till webbläsaren.
SSR vid kanten innebär att:
- HTML byggs nära användaren, med låg fördröjning
- Första visningen och SEO blir bättre
- Innehållet kan personaliseras och vara dynamiskt för varje begäran
SSR jämfört med statiska webbplatser
Statiska sidor byggs i förväg och cachas. De är snabba men identiska för alla.
SSR bygger HTML för varje begäran och passar innehåll som beror på användaren, platsen eller aktuella data.
Många edge-appar kombinerar båda.
Returnera HTML från en Worker
I grunden innebär SSR bara att en HTML-sträng returneras med rätt 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' }
});
}
};Infoga dynamiska data
Hämta data först och infoga den sedan i HTML-koden innan svaret skickas.
const user = await env.DB.prepare('SELECT name FROM users WHERE id = ?')
.bind(id).first();
const html = '<h1>Welcome, ' + escapeHtml(user.name) + '</h1>';SSR med ramverk vid kanten
Moderna ramverk renderar till en sträng på servern. Deras edge-adaptrar kör detta inuti en Worker.
import { renderToString } from 'react-dom/server';
import { App } from './App';
const markup = renderToString(App({ user }));Strömmande SSR
Vänta inte på hela sidan. Strömma HTML medan den renderas, så börjar webbläsaren visa innehåll tidigare.
const { readable, writable } = new TransformStream();
renderToReadableStream(App()).then((s) => s.pipeTo(writable));
return new Response(readable, {
headers: { 'Content-Type': 'text/html' }
});Hydrering
SSR producerar statisk HTML, och klientens JS hydrerar den sedan för att göra den interaktiv.
Skicka samma data till klienten så att hydreringen exakt matchar serverns utdata; avvikelser orsakar varningar.
const tag = '<script>window.__DATA__ = ' + JSON.stringify(data) + ';</script>';Använda HTMLRewriter
Cloudflares HTMLRewriter strömmar och transformerar HTML effektivt och passar perfekt för att infoga innehåll i en basmall.
return new HTMLRewriter()
.on('title', { element(e) { e.setInnerContent('My Page'); } })
.transform(response);Cacha SSR-utdata
Rent statiska delar av SSR-utdata kan cachas, men personaliserade sidor får inte cachas offentligt.
Använd Cache-Control med omdöme och variera efter användare där det behövs.
headers.set('Cache-Control', 'private, no-store');SEO-fördelar
Eftersom SSR returnerar fullständigt formaterad HTML ser sökrobotar verkligt innehåll direkt, utan att JavaScript behöver köras. Det förbättrar SEO och förhandsvisningar i sociala medier.
Sammanfattning av bästa praxis
För stabil SSR vid kanten:
- Hämta data och rendera sedan till en sträng eller ström
- Escapa alltid interpolerade data
- Hydrera med matchande klientdata
- Strömma för snabbare första visning
- Cacha statiska delar, men cacha aldrig privata sidor offentligt
Snabbtest
Vilken är den främsta fördelen med strömmande SSR jämfört med att först rendera hela sidan?
Sammanfattning
Nu kan Ni rendera hela sidor vid kanten:
- Returnera dynamisk, escapad HTML för varje begäran
- Använd ramverksadaptrar och strömning för bättre hastighet
- Hydrera med matchande klientdata
- Transformera utdata med HTMLRewriter och cacha varsamt
SSR vid kanten ger snabba, dynamiska och SEO-vänliga fullstackappar.
Lär dig Edge computing med Cloudflare Workers och Deno med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 47
Vanliga frågor
Är lektionen ”Server-side rendering på edge” gratis?
Ja – hela texten till ”Server-side rendering på edge” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Edge computing med Cloudflare Workers och Deno, kan Ni uppgradera till CoddyKit PRO. Kursen i Edge computing med Cloudflare Workers och Deno innehåller totalt 4 lektioner.
Vad lär jag mig i ”Server-side rendering på edge”?
Rendera fullstack-sidor i realtid på edge för snabb första rendering, dynamiskt innehåll och SEO-vänlig HTML. Ni övar på Edge computing med Cloudflare Workers och Deno med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Edge computing med Cloudflare Workers och Deno?
Du behöver inga förkunskaper. Utbildningen i Edge computing med Cloudflare Workers och Deno på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Server-side rendering på edge”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Edge computing med Cloudflare Workers och Deno-lektionen?
Ja. Varje Edge computing med Cloudflare Workers och Deno-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Workers Sites och Pages
- Integration med frontend-ramverk
- Databasproxies med Deno
- Server-side rendering på edge