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.
What is a Single Page Applications
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)
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.
Static Site Generation (SSG)
Static Site Generation (SSG) is a process of generating a static HTML site before it is served to the client. The site is generated at build time, and each page is pre-rendered as HTML files. These pre-rendered HTML files can be hosted on a content delivery network (CDN) for faster loading times. This is simpler than with SSR, which requires a server to process each request and to generate the initial page to be sent back to the client. With statically-generated sites, a simple HTML file is sent with links to its CSS and JavaScript assets, making the process much easier to implement and with a wide variety of choices for hosting.
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.
Conclusion
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.