The Challenges and Pitfalls of

Server-Side Rendering
Dan Shappir

dansh@wix.com twitter@DanShappir www.wix.engineering

Hi. I’m Dan
Performance Tech Lead at Wix R&D
Making over 100 Million sites load and execute faster

dansh@wix.com twitter@DanShappir
www.wix.engineering
What Goes
Around Comes
Around

Rendering Client- Server-

on the Side Side
Server Rendering Rendering
(CSR) (SSR)
 SSR

Isomorphic JavaScript

SERVER CLIENT
 SSR

Render HTML on Server

HTML

SERVER CLIENT
 SSR

Hydrated by Client

HTML

SERVER CLIENT
 SSR

Faster Time To Visible

✔ fewer roundtrips
✔ fast servers
✔ hot servers
✔ fast data requests
✔ streamed rendering
✔ server & client in
parallel

SERVER CLIENT
 SSR

Time To Visible At Wix

Up to 60% improvement !!!

 SSR

Framework support
At Wix we
failed twice
before
successfully
implementing
SSR.
 Technic Inheren
al t
challeng challeng
es es

Accidental Complexity and Essential Complexity

Technic Inheren
al t
challeng challeng
es es
 Challenge
#1

window.
✘ (jQuery
)

No DOM
 Challenge
#1
Eliminate what you
can.
window.
(jQuery
)

Safeguard the rest: typeof window !==

"undefined"
 Challenge
#2

The same JS context

 Challenge
#2

global var

✘
 Challenge
#2
Don’t allow mutable
globals.
global var

You can use WeakMaps keyed on session ID.

 Challenge
#3

10 KBPS

Memory
leak
 Challenge
#3

10 KBPS

5 min session →

3 MB
 Challenge
#3

10 KBPS

24 hours uptime
5 min session →
→
844 MB 3 MB
 Tools for the Job

SSR’s
Technical
Challenges
 Tests, tests, and more
tests

✔ No DOM
✔ Globals shared
✔ Memory leaks
 ESLint Rules

✔ No DOM
✔ Globals shared
Memory leaks
 NodeJS tools

No DOM
Globals shared
✔ Memory leaks
Technic Inheren
al t
challeng challeng
es es
 Challenge
#1

With CSR
Time To Visible and Time To
Interactive are one and the same.
 Challenge
#1

With SSR
They become distinct:
● Time To Visible is improved
● Time To Interactive at best remains the
same
 Challenge
#1
Mitigate using Progressive
Hydration
e
Pag
ReactDOM.render(
element1,
container1
);
Fold

ReactDOM.render(
element2,
container2
);
 Challenge
#2

Diverges

HTML≠ HTML
 Challenge
#2
Unjustified diverges

HTML
HTML

COMPARISON TEST
 Challenge
#2
Justified diverges

Placeholder
HTML
So.
SSR can provide very significant
performance boost for dynamic
sites,
specifically Time To Visible.
It’s not trivial
- Test, test, and test again
- Allocate time and resources
- Time to Visible < Time to
Interactive
Thank You

dansh@wix.com twitter@DanShappir
www.wix.engineering