Which page rendering strategy is right for you?

In the Jamstack world, you can have three common ways to render a page: statically generated pages, server-side render pages and hybrid pages. In this post, I’ll explain how each works and list their pros and cons.

DotCMS is a headless CMS that decouples content from the front-end delivery layer, which gives the developer the freedom to choose how to render the pages to users. The choice of rendering strategy is a vital part of your web app performance, user experience and search engine optimization, which is why it’s important to understand the pros and cons of each.

Static Site Generation (SSG)

Popularized by Gatsby, this is the most common of the rendering strategies. Static Site Generation can be considered a pre-rendering strategy because the entire site’s pages (HTML, CSS, and JavaScript) are generated during build time and can be deployed to a static hosting service.

Process

1. Make a request to the dotCMS page API.
2. After you get the JSON object with the page information, you can generate the respective page and its route.
3. The page is built and deployed on a static host such as Netlify, GitHub Pages, Vercel or Amazon AWS.
4. When the user requests the page, the server doesn't have to build anything. It just returns the pre-generated page files and is very fast.

Pros

• Security: There are no servers, APIs, or databases running to display the page, thus preventing Cross-site Scripting (XSS), SQL injections and other common attacks.
• Performance: Static sites use cache, minimized code, and are deployed by CDN, which results in a very fast website.
• Reliability: As a static application, there are fewer moving parts to break.
• Cheap: In terms of hosting and maintenance costs, this strategy is low cost.

Cons

• Large sites: The build time increases with the number of pages, so if you have a large site the time to update can be long. However, there are solutions like Gatsby Cloud that can help.
• Real-time content: If you need to handle dynamic content (users, profiles, data, listings) it is better to take another approach.

When to use it?

• The information on your pages does not change frequently
• You don't need to access database resources (user, data, etc.) to build the page
• Don’t need custom user base content
• You want to deploy to a cheap hosting provider

Server-side Render

This method builds the page at runtime each time the client makes a request to it. This method was popularized by PHP, especially with WordPress, and has made a comeback with Next.js and other modern JavaScript frameworks.

Process

1. The client (browser) requests the page from the server
2. The server:
   1. requests the page from dotCMS or any other source
   2. builds the page: HTML, CSS and JavaScript
   3. responds with the page HTML
3. The browser receives the HTML and displays it to the user

Pros

• Fresh content: Users always get the latest version of the page content.
• User-based content: You can get customized content for the user.
• Better performance: Since much of the heavy lifting for rendering the page happens on the server, it performs well even on devices with little processing power.
• It is fast: But speed depends on the resources offered by the server.
• A/B Testing: You can show different versions of the same page and compare performance results.

Cons

• High costs: When using a server to process and create pages, your hosting costs can increase considerably.
• Security: It is susceptible to injection attacks, sensitive data leaks, and others.
• Complex caching: Setting up the cache will require more complexity than with SSG pages because you have to write many granular rules.
• Higher latency: If there are many users at the same time, the server load will increase, which can slow down the response.

When to use it?

• You need personalized page content per user
• You need to do A/B testing
• The page content changes frequently

Hybrid Site Rendering

With hybrid site render, you partially render the page using static site generation (SSG). Then after the initial render, you can add the content you need to be user personalized using client-side render.

But what is client-side rendering?

Client-side rendering allows rendering the whole page in the browser using JavaScript, which was popularized by React.js and Angular. However, it had many problems, one being bad SEO.

Process

1. A request is made to the dotCMS page API.
2. With the response, we create each page, most of its content, and its path.
3. The page is built and deployed on a static host such as Netlify, GitHub Pages, Vercel or Amazon AWS.
4. When the user requests the page, nearly all of it is rendered, but some parts will be added after loading using AJAX (Asynchronous JavaScript And XML).

AJAX is a technique that allows you to request information and add content to your page after rendering without having to reload the page.

Pros

• All the benefits of SSG.
• Parts of the page can be populated with custom and/or authorized content.
• A/B testing of sections of your site is possible.
• You can be super granular with how you display content.
• Low hosting costs.

Cons

• As with SSG, large sites can be problematic.
• The complexity of developing your pages increases.
• On slower devices, it can result in small performance issues.

Conclusion

Each of these page rendering strategies has its pros and cons. The right approach will depend on your particular case. Modern JavaScript frameworks like Nextjs (React), Nuxt (Vue), Sveltekit (Svelte) and Angular allow you to develop your pages with any of the strategies mentioned in this post. Before choosing one, be sure to consider your overall goals, content strategy and performance expectations.