SSR vs CSR: Rendering-Methoden verstehen
Wie sollen Webseiten gerendert werden? Die Antwort liegt in SSR (Server-Side Rendering) und CSR (Client-Side Rendering).
Was ist Rendering?
Rendering ist der Prozess, bei dem Browser HTML, CSS und JavaScript auf dem Bildschirm darstellen. Der Hauptunterschied ist ob dies auf dem Server oder Client (Browser) geschieht.
CSR (Client-Side Rendering)
Funktionsweise
- Server sendet fast leeres HTML
- Browser lädt JavaScript herunter
- JavaScript erstellt DOM und rendert
<!-- Vom Server gesendetes HTML (fast leer) -->
<!DOCTYPE html>
<html>
<head><title>Meine App</title></head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
CSR-Vorteile
- Schnelle Seitenübergänge: Sofortige Navigation nach initialem Laden
- Reichhaltige Interaktionen: Einfache SPA-Implementierung
- Reduzierte Serverlast: Client übernimmt Rendering
CSR-Nachteile
- Langsames initiales Laden: Erfordert JavaScript-Download und -Ausführung
- Schlechtes SEO: Suchmaschinen sehen leeres HTML
- Leistungsprobleme: Langsam auf Low-End-Geräten
SSR (Server-Side Rendering)
Funktionsweise
- Server generiert vollständiges HTML
- Browser zeigt sofort Bildschirm an
- JavaScript aktiviert Interaktionen (Hydration)
// Next.js (SSR)
export async function getServerSideProps() {
const res = await fetch('http://api.example.com/products');
const products = await res.json();
return { props: { products } };
}
function ProductsPage({ products }) {
return (
<div>
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}
SSR-Vorteile
- Schnelles initiales Laden: Zeigt vollständiges HTML sofort an
- SEO-optimiert: Suchmaschinen crawlen vollständigen Inhalt
- Low-End-Geräte-freundlich: Server übernimmt Rendering
SSR-Nachteile
- Erhöhte Serverlast: Rendering bei jeder Anfrage erforderlich
- Langsamere Seitenübergänge: Serveranfrage jedes Mal erforderlich
- Komplexes Caching: Schwierig, dynamische Inhalte zu cachen
React vs Next.js
React (CSR-Framework)
- Reines CSR
- Client-Routing (React Router)
- Schwieriges SEO
Anwendungsfälle:
- Dashboards, Admin-Seiten
- Interne Tools, die Login erfordern
- Echtzeit-Chat, Kollaborationstools
Next.js (SSR/SSG-Framework)
- Unterstützt SSR, SSG, ISR
- Dateibasiertes Routing
- Automatisches Code-Splitting
- Integrierte API-Routen
Anwendungsfälle:
- Blogs, Nachrichtenseiten
- E-Commerce
- Marketing-Landingpages
- Portfolios
Next.js-Rendering-Optionen
1. SSR (Server-Side Rendering)
export async function getServerSideProps(context) {
const res = await fetch(`https://api.example.com/data`);
const data = await res.json();
return { props: { data } };
}
Wann verwenden:
- Echtzeitdaten (Aktien, Wetter)
- Benutzerspezifische Inhalte
- Häufig wechselnde Daten
2. SSG (Static Site Generation)
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts },
revalidate: 60 // ISR: Alle 60 Sekunden neu generieren
};
}
Wann verwenden:
- Blog-Beiträge
- Dokumentationsseiten
- Produktkataloge
3. CSR (Client-Side Rendering)
function Dashboard() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/user-data')
.then(res => res.json())
.then(setData);
}, []);
return <div>{data ? <UserDashboard data={data} /> : 'Laden...'}</div>;
}
Wann verwenden:
- Seiten nach Login
- Persönliche Dashboards
- Seiten, bei denen SEO nicht benötigt wird
Leistungsvergleich
CSR (React):
Serveranfrage → Leeres HTML → JS-Download → JS-Ausführung → API-Aufruf → Rendering
Gesamtzeit: 3-5 Sekunden
SSR (Next.js):
Serveranfrage → Vollständiges HTML → Sofortige Anzeige → JS-Download → Hydration
Gesamtzeit: 1-2 Sekunden (Anzeige bei 0,5 Sekunden)
Hybridansatz
Next.js ermöglicht verschiedene Rendering-Methoden pro Seite.
mein-ecommerce/
├── pages/
│ ├── index.js # SSG (Homepage)
│ ├── products/
│ │ └── [id].js # SSG + ISR (Produktdetails)
│ ├── cart.js # CSR (Warenkorb)
│ ├── checkout.js # SSR (Kasse)
│ └── dashboard/
│ └── orders.js # CSR (Bestellverlauf)
Auswahlhilfe
| Kriterium | React (CSR) | Next.js (SSR/SSG) |
|---|---|---|
| SEO-Wichtigkeit | Niedrig | Hoch |
| Initiale Ladegeschwindigkeit | Langsam | Schnell |
| Seitenübergänge | Sehr schnell | Schnell |
| Serverkosten | Niedrig | Hoch |
| Entwicklungskomplexität | Niedrig | Mittel |
| Anwendungsfälle | Interne Tools, SaaS | Marketing, E-Commerce |
Wählen Sie React wenn:
- Login-erforderliche Anwendungen
- SEO nicht wichtig ist
- Starke Echtzeit-Interaktionen
Wählen Sie Next.js wenn:
- SEO wichtig ist
- Schnelles initiales Laden erforderlich
- Viele statische Inhalte
Es gibt keine einzige Antwort. Wählen Sie basierend auf Projektanforderungen, aber in den meisten Fällen ist Next.js die bessere Wahl. Next.js unterstützt SSR, SSG und CSR und ermöglicht flexible Antworten.