Server Side Rendering

Request → Server →  HTML Response

• Spolehlivé, rychlé řešení
• SEO ✓
• Přístupnost ✓

Client-Side Rendering

Request → Server →  HTML Kostra + JavaScript

Dále: AJAX Request → Server → JSON Response

• Lepší interaktivita
• Rychlé překliky
• Lepší offline podpora
• Rychlost ?
• SEO ?
• Přístupnost ?

Wix

https://www.webpagetest.org/result/170308_1Y_16PV/

https://www.webpagetest.org/result/170308_4C_1721/

https://www.webpagetest.org/result/170308_52_1738/

https://reacttraining.com/

SSR + CSR

• Time to render ✓
• Přístupnost ✓
• SEO ✓
• Rychlé prokliky ✓
• Interaktivita ✓
• Time to interactivity (?)
• Komplexita

https://www.webpagetest.org/result/170313_R1_NH5/

Optimalizace

• Hydratace
• Redukce kódu
• Updaty JS engine
• Service Worker (warm cache)
• Optimalizace JavaScriptu
• Web Workers

Demo

https://blog.meetserenity.com

https://demo.meetserenity.com

Děkuji za pozornost