Static vs Dynamic Websites
January 03, 2023
Before we examine the differences between static and dynamic websites, it's important to review a few basic principles of websites:
- a typical web page that you view consists of HTML (layout of viewable elements), CSS (style of viewable elements), and JavaScript (functionality of viewable elements).
- although CSS and JavaScript can be embedded into HTML, they're typically served to the user (you) via separate
.cssand.jsfiles that are fetched by your browser once it reads links to these.cssand.jsfiles within the HTML (typically in the header). However, your browser first checks its local storage to make sure it doesn't already have these files from a previous visit (or different page in the case of dynamic websites).
Static Websites
Software.Land is a static website built from GatsbyJS, meaning that:
- all of the HTML, CSS, and JavaScript is downloaded by your browser the first time you load this website.
- subsequent visits (as well as subsequent page clicks) don't require any new data fetched from the server.
- the content is stored in a storage bucket (AWS S3) without any running servers (except for the ones under-the-hood that run CloudFront and S3).
- after the content is loaded into your browser, subsequent page requests are handled by the Front-End (React in this case) page router.
Dynamic Websites
A great example of a dynamic website is Facebook. Each user sees a timeline and profile page that's unique to them. These pages were generated/rendered at the server(s), often involving processes that run on schedules in order to pre-compute the data so that it's ready for you when you load the page. A great way to quickly learn more about complex architectures similar to Facebook is through websites that were designed to provide example solutions to system design interview questions. A popular source is Grokking Modern System Design Interviews. However, a dynamic website can be as simple as a server and a database.
Pros and Cons of Static vs Dynamic Websites
| Pros | Cons | |
|---|---|---|
| Static Websites | Generally faster to load than dynamic websites. Simpler to develop and maintain. More secure, as they do not have the complexity of a backend server or database that stores user information. | Manual updates to the content are required. Do not offer the same level of interactivity or personalization as dynamic websites. |
| Dynamic Websites | Personalized or changing content can be displayed. Higher level of interactivity offered. Can be easier for users to update and manage their own content. | More complex to develop and maintain. Can be slower to load than static websites. May be less secure due to the complexity of the backend server and database. |
Ultimately, the choice between a static or dynamic website will depend on the specific needs and goals of the website. Note that the two choices are not mutually exclusive as hybrid websites are also common where some elements in a static site interact with a backend server+database.