Google has launched a brand new episode of its Search Central Lightning Talks, which focuses on rendering methods, an essential subject for net builders.
On this video, Martin Splitt, a Developer Advocate at Google, explains the intricacies of various rendering strategies and the way these approaches impression web site efficiency, consumer expertise, and SEO (search engine optimisation).
This episode additionally connects to latest discussions concerning the overuse of JavaScript and its results on AI search crawlers, a subject beforehand addressed by Search Engine Journal.
Splitt’s insights supply sensible steering for builders who wish to optimize their web sites for contemporary engines like google and customers.
What Is Rendering?
Splitt begins by explaining what rendering means within the context of internet sites.
He explains rendering in easy phrases, saying:
“Rendering on this context is the method of pulling information right into a template. There are totally different methods as to the place and when this occurs, so let’s have a look collectively.”
Prior to now, builders would immediately edit and add HTML recordsdata to servers.
Nevertheless, trendy web sites usually use templates to simplify the creation of pages with related constructions however various content material, equivalent to product listings or weblog posts.
Splitt categorizes rendering into three essential methods:
- Pre-Rendering (Static Website Technology)
- Server-Aspect Rendering (SSR)
- Consumer-Aspect Rendering (CSR)
1. Pre-Rendering
Pre-rendering, often known as static website era, generates HTML recordsdata upfront and serves them to customers.
Splitt highlights its simplicity and safety:
“It’s additionally very strong and really safe, as there isn’t a lot interplay occurring with the server, and you’ll lock it down fairly tightly.”
Nevertheless, he additionally notes its limitations:
“It can also’t reply to interactions out of your guests. In order that limits what you are able to do in your web site.”
Instruments equivalent to Jekyll, Hugo, and Gatsby automate this course of by combining templates and content material to create static recordsdata.
Benefits:
- Easy setup with minimal server necessities
- Excessive safety as a consequence of restricted server interplay
- Sturdy and dependable efficiency
Disadvantages:
- Requires guide or automated regeneration each time content material adjustments
- Restricted interactivity, as pages can’t dynamically reply to consumer actions
2. Server-Aspect Rendering (SSR): Flexibility with Commerce-Offs
Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.Server-side rendering dynamically generates net pages on the server every time a consumer visits a website.
This strategy allows web sites to ship personalised content material, equivalent to user-specific dashboards and interactive options, like remark sections.
Splitt says:
“This system decides on issues just like the URL, customer, cookies, and different issues—what content material to place into which template and return it to the consumer’s browser.”
Splitt additionally factors out its flexibility:
“It might probably reply to issues like a consumer’s login standing or actions, like signing up for a publication or posting a remark.”
However he acknowledges its downsides:
“The setup is a little more advanced and requires extra work to maintain it safe, as customers’ enter can now attain your server and doubtlessly trigger issues.”
Benefits:
- Helps dynamic consumer interactions and tailor-made content material
- Can accommodate user-generated content material, equivalent to evaluations and feedback
Disadvantages:
- Advanced setup and ongoing upkeep
- Increased useful resource consumption, as pages are rendered for every customer
- Doubtlessly slower load occasions as a consequence of server response delays
To alleviate useful resource calls for, builders can use caching or proxies to reduce redundant processing.
3. Consumer-Aspect Rendering (CSR): Interactivity with Dangers
Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.Consumer-side rendering makes use of JavaScript to fetch and show information within the consumer’s browser.
This technique creates interactive web sites and net purposes, particularly these with real-time updates or advanced consumer interfaces.
Splitt highlights its app-like performance:
“The interactions really feel like they’re in an app. They occur easily within the background with out the web page reloading visibly.”
Nevertheless, he cautions about its dangers:
“The primary problem with CSR normally is the chance that, in case one thing goes incorrect throughout transmission, the consumer gained’t see any of your content material. That may even have search engine optimisation implications.”
Benefits:
- Customers take pleasure in a clean, app-like expertise with out web page reloads.
- It permits options like offline entry utilizing progressive net apps (PWAs).
Disadvantages:
- It relies upon closely on the consumer’s machine and browser.
- Serps could have bother indexing JavaScript-rendered content material, resulting in search engine optimisation challenges.
- Customers would possibly see clean pages if JavaScript fails to load or run.
Splitt suggests a hybrid strategy referred to as “hydration ” to enhance search engine optimisation.
On this technique, the server initially renders the content material, after which client-side rendering handles additional interactions.
Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.How one can Select the Proper Rendering Technique
Splitt factors out that there is no such thing as a one-size-fits-all answer for web site growth.
Builders ought to take into account what an internet site wants by taking a look at particular components.
Splitt says:
“Ultimately, that will depend on a bunch of things, equivalent to what does your web site do? How usually does the content material change? What sort of interactions do you wish to assist? And what sort of sources do it’s important to construct, run, and preserve your setup?”
He supplies a visible abstract of the professionals and cons of every strategy to assist builders make knowledgeable decisions.
Screenshot from: YouTube.com/GoogleSearchCentral, January 2025.Connecting the Dots: Rendering and JavaScript Overuse
This episode continues earlier discussions concerning the drawbacks of extreme JavaScript use, particularly relating to search engine optimisation within the age of AI search crawlers.
As beforehand reported, AI crawlers like GPTBot usually have issue processing web sites that rely closely on JavaScript, which may lower their visibility in search outcomes.
To handle this problem, Splitt recommends utilizing server-side rendering or pre-rendering to make sure that important content material is accessible to each customers and engines like google. Builders are inspired to implement progressive enhancement strategies and to restrict JavaScript utilization to conditions the place it genuinely provides worth.
See the video under to study extra about rendering methods.
Featured Picture: Screenshot from: YouTube.com/GoogleSearchCentral, January 2025
