Server Side Rendering, caching and performance
-
Upload
ateev-chopra -
Category
Technology
-
view
278 -
download
3
Transcript of Server Side Rendering, caching and performance
![Page 1: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/1.jpg)
Server Side React JavaScript
@ateevchopra
![Page 2: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/2.jpg)
![Page 3: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/3.jpg)
Stack
• NodeJs
• ReactJs
• Redux
• Redis
![Page 4: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/4.jpg)
Evolution of the web
• Static web pages
• SPAs and gotchas
• Universal Apps and gotchas [SOLVED]
![Page 5: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/5.jpg)
Static Websites
![Page 6: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/6.jpg)
Static Websites
• First Load 👍😍
• Visibility / SEO 👍😍
• Dynamic 👎😢
![Page 7: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/7.jpg)
JavaScript
![Page 8: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/8.jpg)
Single Page Applications
![Page 9: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/9.jpg)
SPAs
• First Load 👎😢
• Visibility / SEO 👎😢
• Dynamic 👍😍
![Page 10: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/10.jpg)
Universal JavaScript
![Page 11: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/11.jpg)
Server Side Rendering +
SPA
• First Load 👎😢
• Dynamic 👍😍
• Visibility / SEO 👍😍
![Page 12: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/12.jpg)
![Page 13: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/13.jpg)
4
3
2 1
Calculating Perf
5
![Page 14: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/14.jpg)
Calculating Perf
500ms (response time from API)
+150ms (for server side rendering)
+10 ms (for node server)
+150 ms (network latency)
------------------------------------------
= 810 ms
![Page 15: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/15.jpg)
Cache me if you can !
![Page 16: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/16.jpg)
4
3
2 1
Calculating Perf
5
![Page 17: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/17.jpg)
Caching the API
500ms (response time from API)
+150ms (for server side rendering)
+10 ms (for node server)
----------------------------------------
= 160 ms (500 ms saved ! )👍😍
![Page 18: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/18.jpg)
4
3
2 1
Calculating Perf
5
![Page 19: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/19.jpg)
Caching the whole page !
500ms (response time from API)
+150ms (for server side rendering)
+10 ms (for node server)
----------------------------------
= 20 ms (650 ms saved ! )👍😍
![Page 20: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/20.jpg)
Cache Bursting !
• Manual Trigger/ When data updates happen.
• Whenever you deploy !
![Page 21: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/21.jpg)
Server Side Rendering +
SPA+
Caching
• First Load 👍😍
• Visibility / SEO 👍😍
• Dynamic 👍😍
![Page 22: Server Side Rendering, caching and performance](https://reader038.fdocuments.us/reader038/viewer/2022103010/58ac0b531a28ab33178b4923/html5/thumbnails/22.jpg)
Highlights• Static websites
• SPAs
• Universal Apps
• Performant Universal Apps
• Next ?