How we managed 6k+ concurrent users?
So on Jan 31, we suddenly got 6000+ concurrent users on crackeddevs.com (opens in a new tab) and this is how we managed the traffic ✨️.
The major pain point in our app is the many job posts and rendering each.
So every time a user lands on our page a read request is sent to our Postgres DB if we calculate 6000 requests to read DB in a second just
for the landing page, and it causes a lot of load on our server.
One of the major keys to our success is
Caching.
We cache in 3 different levels.
-
Client Side - We use the useMemo hook of react to cache the jobs, so if a user toggles between different filters the jobs don't get re-render.
Here is an example code of how it is implementedimport { useMemo } from 'react' export default function PostItem(job) { const PostItemBody = useMemo( () => ( <div> <span>job?.title</span> <span>job?.description</span> </div> ), [job] ) return <>{PostItemBody}</> }
-
Vercel Caching - So vercel automatically caches your requests and pages. It also helps to reduce load. It revalidates every 10 min.
-
API caching using Redis - So we also cache out API using Redis, basically when a read request (GET) comes to the server for the first time it reads from the main Postgres database and that response gets stored into an upstash Redis db and after that every read request is redirected to redis db, it saves us computation on main db and increases the speed of our API.
Here is full blog post (opens in a new tab) about to how to implement it.
Pagination
We paginated our job posts, so only 10 posts are rendered at a time, it helps us to reduce the load on the server and also helps the user to load , and of these 10 posts first 3 are server side rendered and the rest are client side rendered , doing this help us to get faster TTFB and also helps us to reduce the load on the server.
Server Less Functions
So in a serverless function, the server is only spun up when a request is made and it shuts down after that ,this reduces the costs.
Load Balancing
We use Vercel for hosting our app and it automatically scales the app according to the traffic. It also has a feature of load balancing so if the traffic increases it automatically scales the app and balances the load.
Monitoring
We use Sentry for monitoring our app, it helps us to track the errors and performance of our app. It also helps us to track the API and client side errors.
At last
So that's it , I hope you enjoyed reading this article , if you did please share it on twitter (opens in a new tab)
also visit crackeddevs.com (opens in a new tab)
Have a great day ahead 🌠️
© anurag.RSS