Informatik Webentwicklung – Server-Side Rendering und SEO
Karteikarten zum Thema „Informatik“ · 15 Karten · von atrio. Beispiele: Was ist Server-Side Rendering (SSR)? · Wie unterscheidet sich SSR von Client-Side Ren…
Karten
15 KartenWas ist Server-Side Rendering (SSR)?
Rückseite
SSR generiert HTML auf dem Server bei jeder Anfrage und sendet fertiges Markup an den Browser, statt nur ein leeres Shell-Dokument.
Wie unterscheidet sich SSR von Client-Side Rendering (CSR)?
Rückseite
CSR lädt minimales HTML und baut die Seite per JavaScript im Browser auf, SSR liefert sofort vollständiges HTML für Crawler und First Paint.
Was bedeutet Hydration im Kontext von SSR?
Rückseite
Hydration macht servergerendertes HTML interaktiv, indem Client-seitiges JavaScript Event-Listener bindet und State wiederherstellt.
Warum verbessert SSR die SEO-Performance?
Rückseite
Suchmaschinen-Crawler erhalten sofort vollständigen Inhalt ohne JavaScript-Ausführung, was Indexierung beschleunigt und Rendering-Fehler vermeidet.
Welche Core Web Vitals profitieren direkt von SSR?
Rückseite
First Contentful Paint (FCP) und Largest Contentful Paint (LCP) verbessern sich, da sichtbare Inhalte ohne JavaScript-Wartezeit geliefert werden.
Was ist der Unterschied zwischen getServerSideProps und getStaticProps in Next.js?
Rückseite
getServerSideProps rendert bei jeder Anfrage neu (SSR), getStaticProps generiert HTML zur Build-Zeit (SSG) und cached es per CDN.
Wie handhabt Nuxt.js SSR im Vergleich zu Next.js?
Rückseite
Nuxt nutzt useAsyncData und useFetch für serverseitiges Datenladen, bietet auto-imports und Vue-zentrierte SSR-APIs analog zu Next.js.
Was ist Partial Hydration oder Islands Architecture?
Rückseite
Nur interaktive Komponenten (Inseln) werden hydratisiert, statische Bereiche bleiben reines HTML – reduziert JavaScript-Bundle und Hydration-Kosten.
Wie funktioniert Streaming SSR mit React 18?
Rückseite
Der Server streamt HTML-Chunks progressiv an den Client, während Suspense-Grenzen Fallback-UI zeigen, bis Daten geladen sind.
Wie werden Meta-Tags und Open-Graph-Daten bei SSR gesetzt?
Rückseite
Framework-APIs (Next.js Head, Nuxt useHead) rendern Meta-Tags serverseitig in den initialen HTML-Head, sodass Social-Crawler sie sofort lesen.
Welche Caching-Strategien eignen sich für SSR-Seiten?
Rückseite
Stale-While-Revalidate (SWR) auf Edge/CDN: gecachte HTML sofort ausliefern, im Hintergrund neu rendern – balanciert Frische und Performance.
Wann solltest du SSG statt SSR wählen?
Rückseite
Bei Inhalten, die sich selten ändern (Blogs, Docs), da SSG schnellere TTFB und CDN-Caching ohne Server-Last ermöglicht.
Was ist Edge Rendering und welchen Vorteil bietet es für SSR?
Rückseite
Code läuft auf Edge-Servern nahe dem Nutzer, reduziert Latenz und ermöglicht personalisiertes SSR ohne zentralen Origin-Server.
Wie wirkt sich SSR auf Social-Media-Sharing aus?
Rückseite
OG-Tags und Twitter-Cards sind im initialen HTML vorhanden, sodass Link-Vorschauen korrekt gerendert werden ohne JavaScript-Ausführung.
Nenne drei Nachteile von SSR gegenüber CSR.
Rückseite
Höhere Server-Last, komplexere Infrastruktur (Node.js Runtime), längere Time-to-First-Byte bei uncached Requests im Vergleich zu statischem Hosting.