Fortgeschrittenes SSR und SSG mit Spring & React

Fortgeschrittenes Server-Side Rendering und SSG mit Spring Boot & React

Dein früherer Artikel zum Thema SSR mit Spring Boot und React war sehr erfolgreich. In diesem Beitrag gehen wir einen Schritt weiter – mit fortgeschrittenen Techniken wie SSG (Static Site Generation), React-Hydration, CDN-Strategien und DevOps-Deployment.

1. SSR vs. SSG – Die Grundlagen

SSR (Server Side Rendering) bedeutet, dass React-Komponenten zur Laufzeit auf dem Server gerendert werden. SSG erzeugt HTML bereits beim Build.

• Bessere SEO (HTML für Bots)
• Schnelleres First Paint (optimiertes TTFB)
• Besseres Ladegefühl beim Nutzer

SSG eignet sich für statische Inhalte, SSR für dynamische Seiten mit API-Abhängigkeit.

2. Rückblick: SSR mit Spring Boot und Thymeleaf

Du hast gezeigt, wie man mit Spring Boot und Thymeleaf serverseitig rendert:

// Controller
@GetMapping("/")
public String index(Model model) {
  model.addAttribute("data", myService.getData());
  return "index";
}

Das funktioniert, ist aber limitiert, wenn man auf reines React setzen möchte. Zeit für neue Ansätze.

3. Option A: Volles SSR mit Express + React + Spring API

Lass Spring Boot nur die API liefern, während ein Node.js-/Express-Server React serverseitig rendert:

3.1 Express mit React SSR

// server.js
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
import fs from 'fs';
import path from 'path';

const app = express();

app.use(express.static('build'));

app.get('*', (req, res) => {
  const html = renderToString(<App />);
  const index = fs.readFileSync(path.resolve('./build/index.html'), 'utf8');
  const result = index.replace('<div id="root"></div>', `<div id="root">${html}</div>`);
  res.send(result);
});

app.listen(3000);

3.2 Vorteile

• Frontend bleibt unabhängig und reines React
• Feine Kontrolle über SSR und Hydration
• Skalierbar mit Varnish/CDN

4. Option B: SSG (Static Site Generation)

Nutze Tools wie react-snap oder vite-plugin-ssg um Seiten schon beim Build zu generieren.

npx react-snap
// oder mit Vite
npm i vite-plugin-ssg

Diese HTML-Dateien kannst du mit Spring Boot (aus dem /static Ordner) oder über ein CDN ausliefern.

5. React Hydration optimieren

Nach dem SSR wird React auf dem Client "wiederbelebt". Du kannst das gezielt steuern:

• react-lazy-hydration für verzögerte Aktivierung
• React.lazy() + Suspense für Split-Loading
• "Islands-Architektur": nur relevante Bereiche hydratisieren

import { lazyHydrate } from 'react-lazy-hydration';

lazyHydrate(() => import('./HeavyComponent'), { whenVisible: true });

6. Caching & CDN

• Nutze WebMvcConfigurer in Spring für HTTP-Caching
• Statische Inhalte über Cloudflare oder S3+CloudFront bereitstellen

@Configuration
public class CacheConfig implements WebMvcConfigurer {
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**")
      .addResourceLocations("classpath:/static/")
      .setCachePeriod(31556926);
  }
}

7. SEO-Tuning

• react-helmet für Meta-Tags und Titel im SSR
• Open Graph Tags, Twitter Cards, JSON-LD ergänzen

8. Docker & CI/CD

Nutze ein Multi-Stage-Dockerfile für Node (Frontend) und Java (Backend):

# Dockerfile
FROM node:18 as frontend
WORKDIR /app
COPY client/ .
RUN npm install && npm run build

FROM maven:3.8-jdk-17 as backend
WORKDIR /app
COPY server/ .
RUN mvn clean package

FROM openjdk:17
WORKDIR /app
COPY --from=frontend /app/build /app/static
COPY --from=backend /app/target/*.jar app.jar
ENTRYPOINT ["java", "-jar", "app.jar"]

9. Vergleich: SSR vs. SSG

10. Fazit

Mit den hier gezeigten Techniken kannst du:

• SSR mit Node oder SSG effizient umsetzen
• Hydration gezielt optimieren
• SEO, CDN und Deployment professionell gestalten

Im nächsten Beitrag widmen wir uns der SSR mit geschützten Routen, Authentifizierung und Rollenkonzepten.