Now that you know more about how Googlebot interprets JavaScript, let's look at some of the main rendering methods. As a reminder, rendering is the act of interpreting the code on the page to display your website.
This chapter focuses on steps you should take if you have already created or want to create a website using a JavaScript framework with marketing SEO requirements. If this is not the case, I suggest that you code user-facing websites in HTML/CSS!
As of the publication of this course, here are a few options:
Client-Side Rendering
Client-side rendering lets the browser render the JavaScript to generate the HTML content of your site. When the browser sends a request to the server, instead of getting all the content of the HTML document itself, you get a simple HTML document with a JavaScript file that will allow the browser to generate the rest of the site.
If SEO optimization is your goal, it's best to avoid this method. Remember what you learned in the previous chapter. Here are three reasons why this approach may not always be appropriate:
More complicated errors in JavaScript.
Googlebot limits some APIs and new JavaScript features.
Rendering takes more resources.
Googlebot is one of the only bots able to crawl and index content generated in JS. Other bots like Bingbot (for Bing search engine) are less efficient, or unable to index JS content.
It's better to avoid client-side rendering if you want to reference your site in China, Russia, or other countries that use alternative search engines.
Can I still optimize my site if I have already designed it with client-side rendering and don’t have time to redo it?
Yes, it's possible. However, you will have to follow SEO best practices and ensure that older browsers and robots can read your code.
The best solution in such cases is to set up pre-rendering!
Setting Up Pre-Rendering
Pre-rendering allows all the elements on a page to be pre-generated so they can be crawled and indexed.
Pre-rendering services will intercept a display request to see if the user-agent consulting your site is an indexing robot such as Googlebot. They will then send a cached version of your site to be generated with all the content, images, etc. If the user-agent is not a robot, then everything loads normally.
Pre-rendering is only used to optimize the bot experience.
Here are some pre-rendering services:
Prerender.io : if you use Prerender.io, remember to use the latest version! More information here.
Server-Side Rendering
Server-side rendering (SRR) is the standard way in which websites operate: the browser sends a request to the server which processes the information and sends an HTTP request containing the complete HTML to the browser, which then renders the content.
It is possible to design your JavaScript application with SRR when coding in React, Angular, or Vue.
This has two main advantages:
A perceived gain in performance: the content is ready to be displayed, so the page displays more quickly.
Improved SEO indexing.
But there are disadvantages as well:
The page will be displayed quicker, but the user won’t be able to interact with it until the JavaScript resources have all properly loaded.
Development is longer and more complex with SSR.
If you are developing your site in Vue.js and want to set up an SSR, here is a guide.
Choose the Solution That Fits Your Website
Let's recap the two scenarios and corresponding solutions:
If your website is already coded and has not been designed for server-side rendering, you should use pre-rendering.
If you are building your site from scratch, it's best to create it in Universal JavaScript or with SSR. For Vue.js, you could use Nuxt and refer to the guide above. That said, the skills needed to develop these are more complex and require greater expertise.
Above all, keep your ROI in mind: the goal is to balance the time and resources needed to grow your site with your users' experience and bottom line.
Let's Recap!
There are two types of rendering: client-side (CSR) and server-side (SSR).
It's better to use SSR for SEO if possible.
You can also opt for setting up pre-rendering.
Now that you've seen how to optimize your web application, let’s look at how to properly test rendering!
