[React] Product Detail Page in Tokopedia Mobile Web

This is my first medium post, i hope you guys can get some insight and lesson from my progress to build PDP (Product Detail Page) in Tokopedia Mobile Web.

First thing first, i’ll give you tech stack that we use on Tokopedia Mobile Web or Tokopedia Lite. Tokopedia Lite build with React, Redux, Apollo and Graphql. Before i start PDP, we are just CSR or Client Side Rendering only and for SEO support just apply prerender.

And then theres initiate for using SSR (Server Side Rendering) and also restructure for Tokopedia Lite because we want to achieve more load speed and make SEO effective. Theres been a rough time when i convert PDP for CSR and SSR in different Branch (this is really wasting of time), but i must do it because our SSR not ready.

After struggle almost 2 month, we finally release Tokopedia Lite with SSR, but also we face another problem again. Fire Country is coming! CPU usage spike almost 99% only several servers because our traffic not distributed well in our 6 servers (Specs: 2 core, 4gb ram) and we solve our load balancer, but our server still 90%++ and restart like 4 times a day. We tried to upgrade our ram to 8gb for each server, its hold enough but its like full load.

Then i and Putu Alfred Crosby have an idea to put some content in SSR and the rest is CSR using `window.requestAnimationFrame` for some component like share, shop, discuss, and review.