A static website is a website that only contains only contains HTML, CSS, and/or (client-side) JS files.
Static simply means that the site is not generated on the server. Instead of being rendered dynamically, the HTML, CSS, and JS just sit there waiting on a server for a user to request them. Every user will see the same version of the files.
Rendering in the browser means faster changes because you don’t have to wait for information from the server with each update, but the data needs to be fetched after the initial rendering so the initial rendering is slower than a dynamic website/ server-side rendering.
Some advantages of static websites:
- Speed/ performance
- Version control for content
- Less hassle with the server
- Traffic surges
- Only static host is needed (i.e. it only needs to serve HTML, JS, CSS)
- Static hosts tend to be cheaper, setup is typically easier (ex. AWS S3, Firebase Hosting)
Some disadvantages of static websites:
- No real-time content
- No user input
- No admin UI
- As opposed to the incredibly easy publishing processes of sites such as WordPress or Medium, posts on static sites are typically written in Markdown & require the regeneration of the site (watch functionality does this automatically) in order to publish them and deploy the files to a server
- You might get performance issues since server might be more powerful than user’s browser
- SEO inefficiencies: search engine may not see the client-side rendered data, it only sees what’s initially on the page