Importance of Separating Static From Dynamic Content for Modern Web Apps

Over the past few years, storage has become significantly cheaper compared to computation power. You might wonder, what does this have to do with web apps? Well, if you consider using a single web server and a database server for a small three-tier web app, this might not matter much, but with scale, how you store and serve content has a direct impact on achieving the required performance with the least cost involved.

Let's dive into the details to understand the importance of architecting a web application to store and serve content.

When it comes to the content served from a web app, these can be classified into two segments called Static Content and Dynamic Content. Static Content mostly involved things like HTML, JavaScript, CSS, Images, Videos, and Files. In contrast, it is difficult to identify the exact types of Dynamic Content, but mostly these applications data are in the form of Dynamic Content which is commonly saved in a database. It is important to understand that some Static Content may also be served as Dynamic Content depending on the specific application requirements.

Traditional Three-Tier Web App

Traditionally in a three-tier application, we were used to storing all content in a web server and in a database server.

I have seen many applications store Static Content such as HTML, JavaScript, web app images, and CSS on the web server. This is fine since these files are changing once a new deployment happens. However, it is not recommended to store files, images, and videos uploaded from the application inside the web server since it greatly limits the horizontal scaling abilities of the application as well as increases the file I/O and storage consumption of the web server. Using a third-party managed service or Network Attached Storage to store Static Content could help to address these concerns.

Similarly, it is not recommended to do computationally heavy and memory intensive operations such as image manipulation or transcoding video on a web server. These operations are highly resource intensive and could affect the common operations of the web server suffering from performance bottlenecks at scale.

You might wonder whether using third-party services, CDNs, etc. could help to reduce costs and improve reliability, performance, and efficiency of a web app. Only looking at content storage won't show you the whole picture.

Reducing the Computational Need

It is a constant debate to find the right balance between Static Content and Dynamic Content for a web application. As we discussed, since storage is cheaper, there are techniques to minimize the computational needs of web servers.

For example, you can do the image manipulation on the client-side using JavaScript and upload the image to either to a web server, file storage server, or even a third-party managed service.

This is one of the reasons that Single Page Applications are getting more popular when it comes to rendering the HTML on the client-side rather than on the web server.

When developing web apps, it is also possible to identify data which requires high processing power and time to compute or to query, which can be stored for direct access rather computing or running complex queries each time.

Serving Web App Content

When serving Static Content and Dynamic Content, the caching requirements are different. For example, Static Content could be easily served through a Content Delivery Network (CDN) while Dynamic Content will require Third-Party Caching solutions at the application level or database level at scale. In addition, Dynamic Content is mostly served through the Web Server but for Static Content, it is not mandatory.

When using third-party managed services, such as Amazon S3, Azure Blob, Cloudinary, etc., it is possible to store and serve the files either directly or through their CDN counterparts.

How Does This Affect Total Cost of Ownership

When we consider using a web server to handle both Static and Dynamic Content, the hardware we choose is a big factor in overcoming the limitations (can be processing, memory, storage, and throughput). At scale, this will increase the costs since we have to horizontally scale these servers to handle the increased capacity. In addition, it is quite expensive to build a Content Delivery Network for a global user base due to large overhead in implementing data centers all around the world. On top of this, implementing reliability will further increase the cost and complexity which is more relevant at scale.

Therefore, it is important to identify the Static and Dynamic Content, Storage, and Delivery requirements and use appropriate third-party managed services (or required distributed storage and delivery implementations) and design the web app.

Conclusion

Let us revisit the question of whether using third-party services, CDNs, etc. can help to reduce costs and improve reliability, performance, and efficiency as compared to scaling out a single web server which handles both Static and Dynamic Content.

Overall it is quite difficult to say whether it will actually reduce the costs or not for the web app since it is dependent on the particular third-party service being used. However, using these managed services will probably improve reliability, performance, and efficiency of the web app compared to scaling out a single web server with a competitive total cost of ownership.