As of the publication of this course, here are a few options:
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:
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 (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.
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:
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.
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.
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!