Skip to main content

sometechblog.com

Performance comparison: server-side rendered app vs. static app

The main advantage of server-side applications is that you can render large parts of applications on the server, where there is already access to the database and other configurations that do not exist on the user side without building an API logic. But one of the most important elements for usability is that the application loads quickly. Server-side rendered applications of course have an advantage in that you can send less code to the user; an example is a header that either contains a login button or a user panel. The server-side rendered application would only need to send either a login button or a user panel because it can check on the server if the user is logged in.

But how much slower does a server-side rendered application load? The fastest static applications deployed on a global CDN load the HTML on average around 50ms (e.g. www.sqlai.ai, see test here). The subsequent pages are faster than they should be because they are pre-loaded, which is of course also possible in a server-side rendered application.

A server-side rendered application built on Astro and deployed on Cloudflare “Edge” with a Turso database, Better Auth authentication library and React loads the HTML in 250ms (e.g. www.chartmaker.io, see test here). Each request is rendered on server and the server checks if the user is logged in (information is stored in a cookie so database is not hit).

For pages with a database call, it takes around 400 ms to load (e.g. www.chartmaker.io/charts/01lQ6DrPDx9NpWeAHgZCp, see test here). To summarize:

Static HTML (NextJS) Server-side rendered (Astro)
Frontpage ~50ms ~250ms
With 1 DB call - ~400ms

If the load time creeps up, you can relatively easily cache various database queries in a key-value storage and knock the load time back to around 250ms. Of course, you can also place heavy queries at the client for a server-side rendered application.