A debate that’s gone on for years now.
Google announced in 2014 they’ve;
decided to try to understand pages by executing JavaScript
Well, that sent developers wild believing they could build anything and Google could index it fine.
The amount of times I received that link, or another similar link, is ridiculous.
Yeah, Google can execute javascript. But it’s like a baby. You need to spoon-feed it that javascript, and it also needs to essentially visit a page twice.
How does Google execute/process JS?
They sum it up here nicely, with a pretty chart;
Google essentially needs to hit your page twice.
Once on the initial crawl, and once on the rendering of all the JS.
You’re making Google do more work!
What is Client-Side Rendering (CSR)?
Client-side rendering is when the rendering of a webpage, is done in a users browser, so on the “client”.
The server sends a minimal amount of information to the user, and then the user’s browser processes all this information, makes the requests for data, and renders the page locally.
What is Server-Side Rendering (SSR)?
Server-side rendering is when all the rendering for the webpage is done on the server before the page is sent to a user’s browser.
The server processes everything first, so processes everything, makes all data requests, and then builds the page, before delivering a user the formatted HTML.
What is the Difference Between Client-Side and Server-Side?
Client-side rendering forces the browsers technology to do the work, which in most cases is fine – except for the ‘lower tech’ search engines. It can have faster initial response times from the server, since less is processed and less work is done, but increases the resource requirement on the end-user.
Server-side rendering generally requires significant caching, to ensure subsequent loads of a page are already rendered, which will save both server resources and load time. SSR removes the requirement of search engines having to execute anything, so its essentially easier for them to process what was initially received, with no re-processing required to render that page.
Determining What Content is Loaded Server-Side Verse Loaded Client-Side
Disabling javascript in your browser
The absolute easiest way to determine what is server-side and what is client-side, is to just disable javascript in your browser.
In chrome, you disable javascript by;
1. Right clicking, then ‘inspect’
2. Clicking the options menu
3. Enable the ‘disable javascript’ option
Now you just need to reload the page.
Any content that is loaded client-side will now simply not load. If you get a completely white page, well, have fun with that.
Checking the HTML source of a page
The second way to check if content is CSR or SSR, is to look at the HTML source code of the page.
Not the inspect element HTML code, as this is the final browser view, but the right-click “view page source” option.
Then just CTRL+F to find the content you’re looking for.
So if it’s a text widget you’d like to check for SSR, just copy some of the text from the page and then try and search the HTML source for it.
If you find the content in the HTML, it’s SSR. If it doesn’t exist, it’s not HTML.
However, there may still be additional CSR blockers being used, that could render different content, so just keep that in mind and make sure you also check with JS disabled to confirm any possible issues.
Things to keep in mind when checking the HTML source
- HTML Formatting
HTML formatting can sometimes be different in the HTML, verse what you’ll see in the client. Try and search for the shortest thing you can, to find what you’re looking for. This will lead to less formatting changes and less chances of missing what you want.
- JSON or other code
Sometimes what you’re looking for will exist, but it will sit within a JSON code section. If it sits here, and only here, then the content will load client-side, as the browser will request the content from this section when it loads. The easiest way to tell this is if it’s HTML the text is inside, you’re okay. You’ll see javascript formatting with out of place {} and similar “code” if its JS.
How to Server-Side Load Client-Side Content
1. Rebuild the app
If you really care about your SEO, then you should be making your App work server-side properly.
You shouldn’t be taking shortcuts to make CSR “work” as it won’t be the same.
Do it right from the start, and you’ll set yourself up for years to come.
2. Use prerender.io or similar
A solution like Prerender.io will take your CSR app, and essentially make it run server-side for Google.
Google’s changed how this sort of setup works over the years, by deprecating the initial way this type of setup worked back in 2015 because they are “generally able to render and understand your web pages” – lol. They then deprecated the new way prerender worked a few years ago, but then relaunched/tweaked it with the release of this… which is where my knowledge of the actual processing ends, but, it’s still the same principle. You’re slapping lipstick on a pig.
I still recommend against this if possible, and really recommend rebuilding properly so you have a solid base to build off.
However, I also know this isn’t always possible. If it’s not possible, then prerender.io will be your go-to choice.
Server-side your app from the start and you will have smooth sailing
Building an app with SSR in mind from the get-go will simplify things going forward, and give you the best standing with Google without any hacky integrations.
