Dynamic Rendering

Was ist Dynamic Rendering und wann ist es eine sinnvolle Lösung für JavaScript-lastige Webseiten?
  1. Was ist Dynamic Rendering?
  2. Wann Dynamic Rendering einsetzen?
  3. Wie funktioniert Dynamic Rendering technisch?
  4. Dynamic Rendering implementieren
  5. Risiken und Nachteile
  6. Alternativen zum Dynamic Rendering

Was ist Dynamic Rendering?

Dynamic Rendering ist eine Technik, bei der Webseiten je nach dem anfragenden Client unterschiedliche Versionen ausliefern:

Google hat Dynamic Rendering als Übergangslösung für JavaScript-lastige Seiten vorgeschlagen, die nicht kurzfristig auf Server-Side Rendering umgestellt werden können.

Wann Dynamic Rendering einsetzen?

Google empfiehlt Dynamic Rendering ausdrücklich als Übergangslösung, nicht als dauerhaften Ansatz. Es eignet sich für:

Dynamic Rendering ist keine Empfehlung für neue Projekte. Diese sollten von Beginn an SSR oder SSG einsetzen.

Wie funktioniert Dynamic Rendering technisch?

Dynamic Rendering benötigt zwei Komponenten:

  1. User-Agent-Erkennung – Der Server erkennt anhand des User-Agent-Strings, ob die Anfrage von einem Crawler kommt.
  2. Prerenderer – Ein Prerenderer (z.B. Puppeteer, Rendertron) öffnet die Seite in einem Headless Browser, führt das JavaScript aus und liefert den resultierenden HTML-Quelltext zurück.

Bekannte Googlebot User-Agents: Googlebot/2.1, Googlebot-Image/1.0, APIs-Google

Dynamic Rendering implementieren

Nginx-Konfigurationsbeispiel mit Rendertron:

# Nginx-Konfiguration für Dynamic Rendering
map $http_user_agent $prerender_ua {
  default 0;
  "~*Googlebot" 1;
  "~*bingbot" 1;
  "~*Twitterbot" 1;
  "~*facebookexternalhit" 1;
}

server {
  location / {
    if ($prerender_ua = 1) {
      # Crawler an Rendertron weiterleiten
      proxy_pass http://rendertron-server:3000/render/$scheme://$host$request_uri;
    }
    # Normale Nutzer: Standard-App ausliefern
    try_files $uri /index.html;
  }
}

Risiken und Nachteile

Alternativen zum Dynamic Rendering

Weitere Informationen finden Sie auf den Seiten JavaScript SEO, SSR vs. CSR und robots.txt.