What are Static, Dynamic, and SPA Websites?

The web first began with static sites where HTML was written by hand, stored on a server, and returned to the client after a server request. Since those days, new ways of creating web apps have been developed. The original method of serving static sites has also been revived with a new modern approach. The three approaches to website development are: Static sites, Dynamic sites, and SPAs(Single Page Applications). Let me explain the differences and clear up any questions you may have.

Static Sites

Static sites are where the web first began. Static sites include static assets such as HTML, CSS, images, videos, and even JavaScript code. Because static websites can contain JavaScript, it can be difficult to differentiate them from other website types. This website type has been gaining popularity due to the creation of static site generators. Static site generators allow static content to be rebuilt from a data source such as an API or a JSON file when needed(you decide when). Developers are now able to rebuild the static content on their websites on an interval, manually, or whenever they trigger an event (e.g. posting of an article). Static sites are very fast but they only make sense when your content changes infrequently. These sites are well built for SEO. If your website yields itself to static content yet still needs a dynamic section like article commenting, you could develop a hybrid solution.

Dynamic Sites

Dynamic websites are the most common type of website on the internet. These sites generate HTML on the server side through the use of templating engines or a language like PHP. The content is generated per request and is served slower than its static site counterpart. These websites do well with SEO because the content the user sees is the same that a web crawler would receive. The impact on the server is greater due to the processing required for each request. The main advantage of a dynamic website is that they do not need to be rebuilt. When your data changes, the content will be shown updated on the next refresh, assuming no caching takes place.

Single Page Applications (SPAs)

Single Page Applications are applications built in a manner that does not reload the entire page when navigating the site's routes. Instead of a full page reload, the site uses JavaScript(e.g. React.js) to replace the view or sections of the view. Your browser won't show you a tab loader each time you click a link in a SPA. Only your first request to a SPA will be loaded in a traditional manner. Single page applications can make up your entire website or just a section of it like a backend administration portal. Because these sites are so reliant on JavaScript, a web crawler can have a difficult time understanding what is actually being shown on the page. A web crawler may not wait for the JavaScript to finish executing before it is finished crawling. SPAs are known to not have the best SEO. These apps can be integrated into static or dynamic websites. Typically, a single HTML div will act as the root of the website. The content within this div will change dynamically.

What should I use?

There is no straightforward answer for which is best. What you should use depends on your use case.

• Static sites are only a good choice if your content doesn't change multiple times per hour or minute. Even with an automated building process, a dynamic or SPA website would be better. Static sites benefit from incredible speed and SEO.
• Dynamic sites are great if you have content that changes often. Using a dynamic website will help you out in SEO when compared to SPAs.
• SPAs are a great choice when you don't need the best SEO and require a seamless user experience. SPAs are great for interfaces that are behind a login portal.

Knowing about all of these options will help you next time you go to create a new site. Let me know if there's anything you need me to clarify in the comments section below.