EN
Going back to the early days of the web, building and delivering content to users was pretty simple. Developers would type out create static HTML files by hand and place them on a server. Then when a visitor opened a webpage, the server delivered those exact files — word for word, image by image.
It was a simple and reliable approach, but also very inflexible. A small change to a header or text, and you had to edit dozens or even hundreds of static files individually. Woof.
But just like any other emerging tech story, as websites evolved, our tools and processes became more efficient and effective. Content Management Systems (CMS) like WordPress hit the scene, making it easy for non-tech savvy site owners to make updates with ease by removing the need for writing raw HTML code to do so.
How did it do that exactly? That’s where the stars of this story come in: SSR (Server Side Rendering), SPA (Single-Page Application), and SSG (Static Site Generation).
These three applications make up the backbone of modern web experiences, but each have their ideal use cases based on the type of rendering that best fits your needs and your project.
Simply looking to publish an informational site? Or a dynamic e-commerce with ever-changing data? Whatever it is you’re doing, we recommend you continue reading before deciding what platform or framework to use, so you know exactly how it could impact your site's performance.
What is Server Side Rendering (SSR)?
WordPress, Craft, and Drupal all use an SSR approach. They give clients a fully rendered page on demand, instead of having to wait several seconds for specific elements to load. It uses the traditional way of working, where the rendering occurs on the server before passing them on to the browser. When content is requested on the client, data is grabbed from the database or CMS as the user continues to navigate the page. While it’s still a much faster process than rendering of the pas, compared to SPA and SSG, it comes in last. BUT the tradeoff is that the server delivers fully rendered HTML content for both users and web crawlers, making it another good option for SEO.
The Pros of SSRs
With SSRs, you basically get the best of both worlds — an SEO-friendly static HTML at initial load with a SPA-like navigation after hydration.
With static files being served via CDNs, you get lightning-fast performance with any changes displayed instantaneously. You can create dynamic, personalized content without the tedious workarounds.
Creating personalized experiences doesn’t sacrifice ranking well with SEO, unlike SPAs. SPAs.
SSR sites are client agnostic, unlike SPAs where clients determine page load time or quality.
The Cons of SSRs
By default, SSRs are slower than SPAs and SSGs. That’s because…
Content updates require a rebuild process, which may take longer for highly dynamic sites.
SSRs typically require more API calls to the server.
When to use an SSR
SSRs are ideal for dynamic applications that rely on fresh data for every request — that includes news sites, social media feeds, and e-commerce stores with ever-changing inventory. When you’re dealing with time-sensitive applications or those that rely on large volumes of user interactions, you can create dynamic, personalized experiences. But it is important to make sure your infrastructure can handle requests to the servers and that they’re able to scale as traffic increases.
What is a Single Page Application (SPA)?
Popular Javascript frameworks like Pure react, Vue, and Angular implement single page applications with an emphasis on building fast interfaces. SPA is a broad term for applications rendered when the client requests them, meaning it renders almost all changes on the client side (or the browser). In other words, these sites are essentially one empty HTML document that loads all data and graphs via JavaScript. And for that reason, it’s blazing fast.
The Pros of SPAs
While the initial load may be a little longer than the alternatives, you get blazing-fast interactions the rest of the way.
Thanks to a highly dynamic UI, you can create dynamic experiences and customize extensively.
Teams have a lot of control over their architectures and can make use of modern frameworks.
You can use SPAs in tandem with other technologies.
The Cons of SPAs
The more the application grows in size and complexity, the slower initial lead times can become, which can negatively impact user experience.
If not managed correctly, maintaining good SEO is basically impossible since the browser has to fetch and run a large JavaScript bundle.
Large files within complex web applications can become tough to manage and organize.
Any challenges that do arise require workarounds which can be costly and time-consuming.
When to use an SPA
An SPA is awesome for highly interactive and complex front-end experiences. But if SEO is a top priority or you have a very content-heavy site, this isn’t the framework for you.
What is a Static Site Generator (SSG)?
Consider SSG as the next evolution of SPA. But unlike SPAs that load all of their data on a single HTML site rendered only by client request, SSGs generate content when new pages are being built or changes are made to the content. And that’s because SSGs are creating static sites. It takes a library like React or Vue, and adds multiple features, like the ability to generate static files out of your SPA code. This also gives you all the info you need for web crawlers to search and position your site in search engine rankings. And it’s also super fast.
The Pros of SSGs
Since search engines are able to see and index a fully rendered page, it’s great for sites with SEO goals.
With most of the content being re-rendered and static by nature, it promises fast page load times
An easily scalable infrastructure allows the site to grow organically.
You can create decoupled architecture with multiple content sources making it more dynamic and continuously customizable.
The Cons of SSGs
Most of the personalization and dynamic components require workarounds or additional services.
There’s a potentially slower initial load than a static file and a server load on every request.
Given the more complex infrastructure, you must rebuild the site in order to reflect any changes made.
When to use an SSG
SSGs are great for static content, marketing sites, blogs, and portfolios — in other words, sites that don’t need highly personalized content. If you want top-notch performance and SEO with content that doesn’t change too often, this is an option you’ll want to consider.
Conclusion
To break it down simply, both SSGs and SSRs are the next generation of SPA. They each give you the faster loading times of a status site with the user-friendliness for content editors. Sure, you’ll have to invest a little more for the advanced technologies that make that all possible, but you’ll get the performance and ease of use that make life a lot easier, and more profitable in the long-run.
But if you’re looking for the winner out of the three, you’ll be disappointed to hear, there isn’t one. It will all come down to your unique needs and goals, from simple informational pages to complex e-commerce sites. So if you want to make sure you make the right decision for your business, just contact us at Assemble. We’d love to chat about finding the best solution for achieving all your visions for the future.