Static Site Generation (SSG) vs Server-Side Rendering (SSR)

Let's start at the beginning

At the very beginning of the Internet, the technology was not where we are now, the only solution to design a website was using a so-called static site. When a site was accessed, an HTTP request was sent to the server, which returned the HTML that was interpreted by your browser. It was simple but lacked a lot of dynamism. For example, to have a bilingual site you needed to copy each page in full and translate it.

Next comes the server-side rendering

The next advance in the field comes thanks to PHP, a language that allows you to design a website rendered server-side (SSR)! It's a way to generate HTML on the server-side while allowing modify it before returning the generated HTML to the client. This allows content management systems (CMS) such as WordPress or Drupal, to make it easier to modify and revitalize a website.

The idea is good, a client asks to see a page, and the CMS builds the requested page with the data and returns a generated page to the client. This technique has facilitated content management, but still has a disadvantage, now the server must generate the page on demand, no more static pages already generated, which can take longer to receive the information.

Javascript libraries then come into play

It's a little later that Javascript explodes, thanks to AJAX we can now easily make calls from our web page to generate our page! It is here that single-page applications (SPA) are born. The server now only has to return a small part of your site and the rest will be rendered directly in your browser. Instead of having only one call to your server, it will now be several that will be made to generate the requested page, but as everything is done on the same page, the server responses are faster.

This kind of website is a good approach for a more application-based website, however, since the page is generated on the client-side, if your client has a less efficient mobile, his page will take longer to generate than a static site. The big advantage of a site like this is that everything can be boosted, but that's also what brings us to the next problem. As the content is generated on the client-side, not all robots will be able to scan your pages, which can make your placement in search engines less efficient. It is nevertheless a good option for an application site!

Back to basics?

After all these innovations, it is now the turn of static site generators (SSG or Server-side generation in English) to make their arrival. But what is a static site that we call generated? It is a site that will be generated like a classic static site, but instead of being on-demand like those rendered on the server-side, it will be compiled when the content of your website is modified. Your site is therefore dynamic since it is now based on your content or your CMS! Once you change your content, the site is generated instantly, allowing your users to receive a static site quickly! The client will not have to wait for the server to recompile a page on demand like with an SSR site, since it will always be generated automatically.

For example, my site uses Nuxt as a static site generator, when I create a new blog post, my server detects the new content and asks Nuxt to regenerate my site. Once my site is generated, the server will return it with my new blog post, and voila! The generation is done only once when the content changes and afterward the clients have a fast site since they never have to wait for their page to be generated, it always is!

Which solution suits me best?

With all these choices, it can indeed be difficult to find what's best for you! For several sites (informational, corporate, or other sites that do not change for each client), the best solution is a generated static site, since that is what will give the best customer experience! Also, don't worry, if you have a part of your site that you still want to boost for each client, it's always possible to add it after generation much like a single-page application. This is probably the option that will provide the best experience for your users!

If on the other hand, you want an application site, for example, Facebook, a single-page application is your solution since it will make it more dynamic for each user.

As for server-side sites, it's hard to find a big advantage over our two competitors. Even on the hosting side, it's much more expensive to host since it requires more resources than a generated static site, which will only transmit the HTML pages and that's it. As SSGs are still new compared to SSRs, the latter is even more present as a web solution. But it's only a matter of time before these get replaced over time since a lot of sites would be a lot better in SSG!

Do you need help with a project?

If you are interested, do not hesitate to contact me, I am available whatever the solution that suits you best. I have worked with all these types of websites and I could therefore advise you according to your needs!