When to Create a Static Website?

What's a static website?

A static website doesn't have a server and is just a collection of content (javascript, html, css, images etc.) served from a CDN. A static website can use APIs to fetch content at runtime to make the page dynamic or fetch content at build time to prerender the data into your page. This is typically referred to as the Jamstack model.

Benefits of prerendering your pages

The main benefit of a static website is pre-rendering data onto your webpage. This is most important if you're concerned with the SEO performance of your page. Prerendered pages are easy for google to read and a website with prerendering can be blazing fast which is great for your Core Web Vitals (I recommend reading that link if you're interested in SEO and haven't heard of CWVs). Content that is non-transactional can be prerendered onto your website. Non-transactional content is content that doesn't change frequently and is the same for every user. A blog with only one or two writers is a great example of this! A blog with hundreds of authors wouldn't be a good fit for a static website because the content is frequently changing. If you're content updates frequently and can change depending on the user, you won't be able to take advantage of the number one benefit of a static website. Just because you have dynamic content doesn't mean you can't have a static website. Use serverless APIs to fetch personalized and dynamic content.

Are you on a budget?

Static websites are insanely cheap, if your website isn't too large there are a number of free options for deploying your website. For example, you can use Azure Static Web Apps. Azure's free option should be sufficient for most personal projects and if you need more storage and flexibility you can use the standard tier for only 9$ a month! This is much cheaper than hosting your own server which can be expensive and harder to maintain.

What if I want both static and server-side?

Most websites include some combination of static and dynamic data. Thankfully, are a number of frameworks that make this possible. For example, this website was built using Next.js and is a server-side application. But for blog posts like this one, the content is prerendered at build time by next.js. This allows me to take advantage of the speed benefits of prerendering while still having the option to create more dynamic server-side pages in the future.