Rendering on the web
When developing web applications, it’s very important that you think about performance and SEO (Search Engine Optimization). However, it is not always obvious that everyone knows why certain choices, such as choosing a rendering method, are made. In this article I will explain commonly used rendering methods and why you should pick which. Specifically I will answer the following question:
Which rendering method gives the best performance and SEO results for the different type of websites from today?
To start with answering this question I will first have to list the existing rendering methods. The existing rendering methods are as follows: Server-Side Rendering (SSR), Client-Side Rendering (CSR) and Static Site Generation (SSG). Then there are a number of variants or hybrids such as Rehydration or Static SSR (Miller & Osmani, 2019). But what do these terms actually mean? And why should I use which method? In order to answer this, I need to know exactly what the difference is between these methods.
But before I go into the methods, I will first explain a few key terms that are important to make the difference between the methods visible in terms of performance and SEO.
TTFB: Time to First Byte — the time between clicking a link and the first bit of content being loaded.
FP: First Paint — the time pixels become visible to the user.
FCP: First Contentful Paint — the time the requested content (article text, etc) becomes visible.
TTI: Time To Interactive — the time a page becomes interactive.
(Miller & Osmani, 2019)
Server Side Rendering
Server-side rendering (SSR) is the ability of an application to contribute by displaying the web page on the server rather than displaying it in the browser. The server thus handles all the data and the client only has to present the data (Konshin, 2018). In general, this makes for faster First Paint (FP) and First Contentful Paint (FCP). This will also improve the user experience, as the page becomes visible faster. Below is an image illustrating Server-side rendering.
With server-side rendering, the logic and rendering of the pages is performed on the server, so there is not much javascript to be sent to the client. This is nice because the page becomes interactive faster (TTI), because the server now only has to send text and links to the client instead of heavy javascript code that also has to be executed (Miller & Osmani, 2019). But also generating pages on the server can take a lot of time. This therefore also causes a slow Time to First Byte (TTFB) (Miller & Osmani, 2019). The main advantages and disadvantages are listed below.
Benefits:
- Web pages are loaded faster, which ensures a better user experience.
- It is good for SEO (search engine optimization) because pages are indexed correctly (Klimek, 2019).
- It helps with loading a page even if the user has a bad internet connection, as the heavy lifting is already done by the server (Klimek, 2019).
- It ensures that the latest data is always retrieved with every refresh or change of navigation.
Cons:
- Generating a large application on the server can take quite some time and therefore the loading time will also be longer.
- Every time you navigate to another page, the page will have to be completely refreshed (Klimek, 2019).
- You have to do more configuration work on the server and therefore the server will also have a greater workload (Klimek, 2019).
Client Side Rendering
Client-side rendering (CSR) means rendering a page directly in the browser using javascript. All logic, data fetching, templating, and routing is done by the client rather than the server (Miller & Osmani, 2019). Below is an image illustrating Client-side rendering.
Client-side rendering ensures fast page rendering after the very first load time (initial load). This is because the client can dynamically control the routing without having to refresh the page from the server each time (Iskander et al., 2020). But this comes at the expense of a fast First Contentful Paint because a lot of javascript is sent from the server to the client and the client will still have to render the page. For users with a good internet connection, this happens quite quickly and can be very effective. But for slower internet connections it can take a long time before all javascript code is received and all data is retrieved (Breux, 2018). Below are the main advantages and disadvantages.
Benefits:
- Website rendering after the initial load is very fast.
- Less amount of work for the server.
- Fast navigation through your site.
Cons:
- Slow initial load.
- The more javascript, the slower the application, which is not good for scalability (Miller & Osmani, 2019).
- More dependent on the user’s internet connection.
Static Site Generation
Static Site Generation (SSG) also called prerendering means that all components and routes have already been rendered and built in advance (Stencil, 2020). Meaning the pages are already completely ready and nothing more needs to be loaded. Because all routes have already been rendered, all content is already available to the user and search engines, thereby maximizing SEO and performance (Stencil, 2020). For this reason, SSG has the fastest performance of all rendering methods. But while this method is very fast, the name says it all, it is also static. Changes to the content won’t come through or data won’t change if you don’t completely regenerate it (Wayner, 2019). Static Site Generation brings several advantages and disadvantages.
Benefits:
- Super fast TTFB, FP, FCP and TTI (Miller & Osmani, 2019).
- Good SEO.
- Flexible, although they are not dynamic you can update them regularly when it suits you to make the latest version visible (Wayner, 2019).
Cons:
- It is static and therefore cannot handle dynamic content.
- The site can become very lagging if it is not updated consistently. Not only can this be bad for a company’s image by having an outdated website, but also for security. If people find out that it is an older version website, there are already more possibilities for hacking leaks (Wayner, 2019).
- You need to know all possible URLs in advance. Since everything is generated in advance, all possible outcomes must also be known, which can sometimes be difficult with larger applications (Wayner, 2019).
Hybrids
Hybrids or variants of the above methods are attempts to get the best of the methods used without their drawbacks. This can be very effective if used properly. For example, you have Rehydration, this application does both Client-side rendering and Server-side rendering. It allows for fast First Contentful Paint due to the server-side rendering. This is because the server handles the reloads and full page loads. While the client navigation adopts changes after the initial load (Miller & Osmani, 2019). What is less nice about this is that the page is completely visible with all content but is not yet interactive since the client is still rendering in the background. This gives a deceptive picture, a page that appears to be fully interactive but is not yet (Miller & Osmani, 2019).
There are a number of variants such as streaming server rendering, Progressive Rehydration, partial Rehydration and Trisomorphic Rendering (Miller & Osmani, 2019). It is good to know that the methods are flexible enough to adapt to the needs of a website. I won’t go into all of these variants as there are many and almost all of them descended from the larger methods.
These types of hybrids take over all kinds of advantages and disadvantages of the large methods. However, this does not alter the fact that a combination of methods can be very effective for specific requirements of a website. In the next section I will go into more detail about the different types of websites to find out which specific requirements best suit the properties of the methods.
Type Websites
Now that the methods and their properties are clear. I will look at which type of website is compatible with which method. In order to match the methods to a certain type of website, I first have to properly name the different types of websites. But since this list is huge these days, I’ll only mention most commonly seen websites.
Ecommerce Website, a website where you can buy products. Often large applications with a lot of content (the products) that are very rich in features. With an Ecommerce website it is super important to be able to deal with rapid changes and large amounts of data. Not to mention that you want very good SEO to get more visitors for a better revenue.
Blog Website, a website where articles, photos and videos are visible. A blog is regularly updated and that is why it is important to always show the latest version. SEO also plays an important role here, because the creator wants to have more readers.
Business Website, a website that represents a company. For such a website, it is important for the company to show online presence. Unless the customer likes to acquire customers through the website, SEO is not a high priority. Often only static information is shown about the company.
Media & Entertainment website, a website that regularly shows updated content on various types of topics. Just like a blog site, this website must therefore continuously have the latest version. SEO also plays a major role again, since you want more viewers as a publisher.
Conclusion
So which rendering method is best suited for the type of websites listed above to optimize SEO and performance? The answer is unfortunately not that simple. Websites, even from the same kind, will always vary and have different requirements. The web itself is also constantly changing and existing methods are regularly improved. In addition, search engines, such as Google, change their strategy quite often when it comes to SEO and thus the ranking of search results (Iskandar & Komara, 2018). Still, it is possible to answer the question for the current status of all these factors based on the research conducted. Below is a clear overview of my recommendations, based on the research conducted, for choosing a rendering method for each of the aforementioned website types to get the best SEO and performance.
What immediately stands out from the table above is that SSR is the most chosen rendering method. And this is for good reason, currently SSR is very well adopted by frameworks such as Next.js (Konshin, 2018). Since today’s websites are becoming increasingly complex and dynamic, SSR can respond well to this. For less Dynamic websites with static content, SSG is definitely the go to. The incredibly fast performance ensures a good user experience. Then there’s CSR that on its own without SSR or other methods isn’t the best choice for a website today, unless the focus is on app development. However, this does not mean that it is a completely worthless method, you can apply it very well for pages that do not always have to have the latest version but which often have to render (Rehydration application). All in all, it is important to keep a close eye on the new changes within this topic. Currently, the recommendations in the table above are highly relevant. But this could change quickly. That is why you will have to check your website regularly and adjust it if necessary based on changes within this topic, in order to get the best SEO and performance for your website.
Source list
Miller, J., & Osmani, A. (2019). Rendering on the Web. Google Developers.
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Konshin, K. (2018). Next.js Quick Start Guide: Server-side rendering done right. Packt Publishing Ltd.
https://books.google.nl/books/about/Next_js_Quick_Start_Guide.html?id=-rBmDwAAQBAJ&redir_esc=y
Klimek, J. (2019). Client-Side Rendering versus Server-Side Rendering. Altalogy.
https://altalogy.com/blog/client-side-rendering-vs-server-side-rendering/
Iskandar, T. F., Lubis, M., Kusumasari, T. F. & Lubis, A. R. (2020). Comparison between client-side and server-side rendering in the web development. IOP Publishing.
https://iopscience.iop.org/article/10.1088/1757-899X/801/1/012136/pdf
Breux, G. (2018). Client-side vs. Server-side vs. Pre-rendering for Web Apps. Toptal.
https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering
Wayner, P. (2019). Static site generator pros and cons. InfoWorld.
https://www.infoworld.com/article/3399556/static-site-generator-pros-and-cons.html
Stencil (2020). Static Site Generation with Stencil. Stencil.
https://stenciljs.com/docs/static-site-generation
Wilcox, A., & Zetlen, J. (2020). Server-Side vs Client-Side Rendering And Changing SEO Practices. Magento Commerce.
https://magento.com/blog/technical/server-side-vs-client-side-rendering-and-changing-seo-practices
Iskandar, M. S., & Komara, D. (2018). Application Marketing Strategy Search Engine Optimization (SEO). IOP Publishing.
https://iopscience.iop.org/article/10.1088/1757-899X/407/1/012011/pdf
