Single page applications (SPAs) have become increasingly popular in web development due to their ability to provide a seamless user experience. However, there are several approaches to building SPAs, including server side rendering (SSR) and static site generation (SSG). In this blog post, we'll discuss what these approaches are and the benefits and drawbacks of each.
A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates the content as the user interacts with the application. This means that the page does not need to reload each time the user navigates to a new page, resulting in a faster and smoother user experience. The downside to client-side rendering (CSR) is that it's very difficult for search engines like Google to understand what your webpages are all about and to rank them accordingly. Check out my post about SEO for developers for more details.
Server Side Rendering (SSR) is the process of rendering the HTML of a web page on the server before sending it to the client. This means that the initial HTML is rendered on the server, and subsequent interactions are handled on the client side.
The main benefit of SSR is that it allows search engines to crawl and index the website's content, resulting in better SEO. SSR can also improve the initial loading time of the website since the HTML is already generated on the server.
However, SSR can be more challenging to implement than CSR and can require additional server resources, resulting in increased server costs. Using technologies like Next.js, which runs on top of React, it becomes much easier to get up and running with SSR. Vercel, a hosting provider created by creators of Next.js offer a great solution for hosting Next.js applications with an impressive free tier, and all of this takes a huge step towards implementing SSR for your production applications.
The main benefit of SSG is that it provides fast loading times since the content is already pre-rendered as HTML files. Additionally, SSG can reduce server costs since the server does not need to generate any HTML for each request, it simply returns the already-generated HTML page.
For me, Gatsby is a tool I like for SSG. This blog is created with Gatsby and it gives me the ability to create content without needing to create or maintain a server to host it.
In many web development projects, you are constrained as to what type of rendering you can implement. A blog, for example, can mostly be staticcally-generated. This post looks the same to everyone as the content has been written ahead of time.
If you're creating a user dashboard, then static generation won't be possible, because you don't know the user's name and personal information ahead of time. These dynamic pieces of information rule out static generation but might allow for server-side rendering - if you can fetch the information about the user at the time of the request, then that information can be pre-rendered at request-time.
There are times when you might not care about the performance or SEO benefits. If the application is loaded in the background and is only available for authenticated users, it could be that neither is a concern and a straight-up SPA with client-side rendering will suffice. You get to benefit from the simplicity and speed of development, as well as the reduced maintainance considerations and server costs.