The Challenges and Pitfalls of Server Side Rendering

on YouTube ↗30m

" summary

Wix moves nearly 100 million sites from CSR to SSR and measures a ~60% improvement in time‑to‑visible after three years and two failed attempts. Engineering fixes include using WeakMap per session to avoid mutable globals and memory leaks, restarting Node less often, and adding ESLint with custom rules to block unguarded DOM access. Expect hydration to leave pages visible but slower to become interactive, require extensive tests, new DevOps skills, and enough engineers and time to hunt subtle server‑side leaks and diverging HTML.

AI-written summary · about

" chapters (23)

1. 0:00Introduction
2. 0:46About Dan
3. 1:26What is Server Side Rendering
4. 3:23Isomorphic JavaScript
5. 3:49Hydration
6. 4:53Benefits
7. 6:24Impact
8. 7:29Supported frameworks
9. 8:09It was not that easy
10. 8:45Challenges
11. 11:58What can you do
12. 12:40JavaScript context
13. 14:19Global variables
14. 15:35Solution
15. 16:23Memory Leaks
16. 18:10Tools
17. 18:21Test First
18. 20:35Time to Visible vs Time to Interactive
19. 22:38Multiroute Rendering
20. 24:16Dis diverges
21. 24:52Un unjustified diverges
22. 27:22Summary
23. 27:51Takeaway

" related talks

• 44mServer Side Rendering from the trenchesWilliam Durand · jsDay 2018
• 04mA few things to know about SSRMatthieu Lux · dotJS 2017
• 45mThe War of HTML Rendering: SSR, CSR and Hybrid Rendering — Which Is Fastest?Thomas Rumas, JOHANN REBOULLEAU · DevFest Lille 2024
• 30mImproving Load Time for 100 Million Websites - Wix Case-StudyDan Shappir · DeltaV Conference 2018
• 30mRendering RevealedAdam Jahr · JSWorld Conference 2024
• 20mCSR, SSR, SSG, ISR, and OMG. WTF? BBQ!Ahmad Awais · Next.js Conf 2020
• 13mStraight Talk About Server-Side RenderingGray Norton, Sam Lee, Trey Shugart · Polymer Summit 2017
• 25mServer-side Rendering with ReactJS: Win or LoseLilit Tadevosyan (Arm) | ReactConfAM19 · React Conf Armenia 2019