Slow SSR

Since Next.js came with server side rendering, there has been a hype created around it that its so powerful and you should use it to make your website faster, but as always it depends...

Ever since we migrated from React to Next as a front-end framework of choice, we have always wanted to use SSR for all the data fetching. Even Next.js have many powerful feature that you can use out of the box, we got most excited about SSR because we thought it will make a huge difference. Well it did make a difference, made the website even slower.

Now, its not all bad. We just didn't know why we shouldn't use.

I will just give it to you, if your website will have small number of users E.g like a internal tool then its probably a bad idea and here's why.

Before we start it good idea to know how lambdas work and here is the definition: You organize your code into Lambda functions. Lambda runs your function only when needed and scales automatically, from a few requests per day to thousands per second. You pay only for the compute time that you consume—there is no charge when your code is not running.

The page with SSR function will gets deployed as lambdas on AWS and when there lambdas are cold they can take up to 10 sec to come back with a response, now as of React 17, there is no way you could display a loading state until the server responds. So users just see a blank screen and will see delays when switching tabs. Even the server side function is not doing or returning anything, it will still need a container to run in. The slow start of lambdas also known as cold start. When the lambda has a container and its warm, you will see a huge difference in performance. The pages will load a lot faster.

So when deciding to choose a technology always check if it fits you use case. It can save a lot of dev hours.