Client Side Rendering
The CSS and JS files are only included in the HTML. A browser needs to parse and execute those files in order to display a complete web page. This is called rendering. Now, if rendering is happening in the end user’s browser then we say it is client-side rendering.
In client-side rendering, the server gives all the required files to the browser and tells it: okay, these are the files you need, now go on and execute them. A browser behaves as a worker and a server behave like a raw material provider. Let’s say a web page is a building to be constructed.
The server gives the raw materials to the browser and the browser takes these raw materials and builds the website.
A crawler behaves the same way as a browser. It needs to take in all the raw materials (CSS, JS) and start building the website (rendering).
Server Side Rendering
In server-side rendering, all the work is done by the server and the browser is served a static HTML file (which requires no extra work) and is displayed to the user. In this case, the browser does not need to do anything extra since all the work is done by the server.
As is clear, all the load is taken away from the client and is handled by the server. This might slow down the server.
In the previous guide, we learnt about the various SEO issues we might face while developing a JS website. There is a solution for each of them but needs to be handled by the developer only.
There are two tools you can use to check how your web page is being rendered by the Google bot. The mobile-friendly test tool and the URL inspection which is available in the search console.
As we already saw on this page, its source code doesn’t include any of the content presented on the front end.
Let’s check how this is being rendered by the Google bot. Go to the mobile-friendly test and run the test on this URL https://angular.io/guide/what-is-angular
This is what we get
Click on view tested page
So, it turns out content is being rendered correctly and we need not to worry further about it.
Implement Dynamic Rendering
Dynamic rendering is one of the ‘all in one’ solutions to all the SEO problems with JS websites. In Dynamic rendering, if the web page is requested by the google bot or any other crawler then we render the web page from the server-side and give the crawler a static HTML with all the content in it.
This way, a crawler doesn’t have to miss or render any content.
And if the web page is being requested by the normal user then we serve the web page normally for it to be rendered in the browser. Dynamic rendering doesn’t put any load on the server since requests from users and crawlers are handled separately. We don’t have to render web pages from the server side for all requests.
How do you test if dynamic rendering is correct or not? For that, you again use the Mobile-Friendly Test tool or URL inspection tool. You also need to make sure that structured data is also being rendered correctly. For that, you can use the Rich Results Test Tool.