Using GitHub to Power Up Your Static Sites

What are static vs. dynamic sites (& SSR + CSR)?

Static websites are really good for content that doesn't change very often. So a portfolio or a personal website is a really good example of this. Next you have a restaurant website and landing pages for product launches, both of which are great for static websites. As might be able to tell from the word dynamic, these sites have a lot more going on than your average static site. When you look at a dynamic site, the content you see might be different from what someone else sees or it may have changed again when you look at it in a few hours. So the first example of a dynamic site is a news site. For instance, on the right hand side of news websites, they might have a “Just in” column where news is updated and added every so often. This piece of content is updated very frequently that the server is providing and the server is just a computer or hardware that is located somewhere else that information is stored in.

The next example is Netflix. Dynamic sites use server technology such as PHP to dynamically build a website when you visit the page. When you type in an address, your browser send a request to the server, which then goes and finds a bunch of different information and then it returns a response. The browser then takes the information and serves it up in a fully cohesive, fully rendered page. For example, the recommendations that you see on Netflix are based on what you’ve watched before and the page builds on the fly in real time at your request. If someone else is watching Netflix, the URL is the same, but they’ll see a very different set of recommendations.

This process of recovering data and processing it before responding to our browsers as fully rendered web pages is called server side rendering. And each time you make a request, this same process has to occur. So every page is independent and rendered separately. Traditionally, server side rendering is the only approach to load an HTML page. Now, when JavaScript frameworks such as React, Vue, and Angular came into the picture, it brought about new rendering technologies which included server side rendering.

While CSR sites can be dynamic, the server actually sends back one black HTML page with links to a JavaScript bundle, which is like React or the framework that you’re using, and it’s this JavaScript file that handles the dynamic rendering of the website. So, when you interact with this page, your browser isn't requesting more information from the server to send back like in SSR, the information is already there. So typically, in client-side rendered websites such as SPAS, which are single-page applications, they tend to feel a lot smoother and faster once the initial data has been loaded because the information is all there in the browser.

What are the pros and cons of static and dynamic websites?

Static websites are less work and easier to build. They’re HTML files, you don’t have to learn anything too complicated. They also have improved security. Because there’s less JavaScript, there are fewer vulnerabilities for hackers to exploit and hijack. Static sites also have improved SEO because the pages are pre-build, so search engines can quickly crawl through and index all the site and information. Static sites are also fast. They have an improved performance over dynamic sites because the information is already there. And they have low cost, you can host static sites for cheap or for free events. On the other hand, they’re more difficult to scale & update. There’s also limited personalization. The information is the same for everyone who visits the site, regardless of who it is.

Whereas dynamic websites are highly customizable because it’s based on the information that websites and companies have collected on you, what you like to watch and do based on user data. Dynamic sites are also used with content management systems, which means you’re separating the content from the layout which makes it a lot easier to update as well. They take advantage of template systems, whereas for a static site you have to copy the footer for every single page. In a dynamic site, you just make it once, and then import it as a component into a larger parent page. This is really useful as you’re a lot less prone to error if you update one thing instead of multiple instances of that thing. Lastly, dynamic sites often have tools and add-ones that other developers have created to extend functionality. On the other hand, they do take longer to code and to develop, which translates to great cost and time. And they’re slower in in speed and less secure because of the JavaScript, and the back and forth between the server and the browser.

What are static site generators (SSGs)?

A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. It then compiles and updates all this into a folder with the appropriate HTML, styles, and assets. And you can deploy these files for static hosting. You’re basically pre-rendering data to serve to the browser. You can think of SSGs as a hard coded static website and a fully fledged management system. Less pain, more gain.

Now, some pros and cons of SSGs. One of the pros is that you can code faster with templates, it’s a lot less repetitive, and more efficient, and more maintainable. You also save on web hosting. At the end of the day it’s a static site and you can host static sites for free. You decrease the page loading time as well, which makes your site a lot faster and it improves SEO. And last but not least, you have increased security and scalability. However, there is an initial setup time and it’s pretty challenging if you need dynamic interactions like user forms, login credentials, search functionality, and basically other server and database interactivity.