Server Side React JavaScript

@ateevchopra

Stack

• NodeJs

• ReactJs

• Redux

• Redis

Evolution of the web

• Static web pages

• SPAs and gotchas

• Universal Apps and gotchas [SOLVED]

Static Websites

Static Websites

• First Load 👍😍

• Visibility / SEO 👍😍

• Dynamic 👎😢

JavaScript

Single Page Applications

SPAs

• First Load 👎😢

• Visibility / SEO 👎😢

• Dynamic 👍😍

Universal JavaScript

Server Side Rendering +

SPA

• First Load 👎😢

• Dynamic 👍😍

• Visibility / SEO 👍😍

4

3

2 1

Calculating Perf

5

Calculating Perf

500ms (response time from API)

+150ms (for server side rendering)

+10 ms (for node server)

+150 ms (network latency)

------------------------------------------

= 810 ms

Cache me if you can !

4

3

2 1

Calculating Perf

5

Caching the API

500ms (response time from API)

+150ms (for server side rendering)

+10 ms (for node server)

----------------------------------------

= 160 ms (500 ms saved ! )👍😍

4

3

2 1

Calculating Perf

5

Caching the whole page !

500ms (response time from API)

+150ms (for server side rendering)

+10 ms (for node server)

----------------------------------

= 20 ms (650 ms saved ! )👍😍

Cache Bursting !

• Manual Trigger/ When data updates happen.

• Whenever you deploy !

Server Side Rendering +

SPA+

Caching

• First Load 👍😍

• Visibility / SEO 👍😍

• Dynamic 👍😍

Highlights• Static websites

• SPAs

• Universal Apps

• Performant Universal Apps

• Next ?

@ateevchopraateev.in