JavaScript frameworks have been rising in recognition over the previous few years, thanks in no small half to the pliability they provide. “JavaScript frameworks enable for speedy growth. It affords higher consumer expertise. It affords higher efficiency and it affords enhanced performance that conventional frameworks — non-JavaScript ones — type of lack,” mentioned Nati Elimelech, tech SEO lead at Wix.
“So, it’s no shock that very massive web sites or advanced UIs with advanced logic and options normally have a tendency to make use of JavaScript frameworks these days,” he added.
At SMX Next, Elimelech offered an summary of how JavaScript works for client-side, server-side and dynamic rendering, and shared insights for auditing gained from implementing JavaScript on over 200 million web sites.
Client-side vs. Server-side rendering
Different rendering strategies are appropriate for completely different functions. Elimelech advocated on behalf of dynamic rendering as a way to fulfill search engine bots and customers alike, however first, it’s obligatory to know how client-side and server-side rendering work.
Client-side rendering
When a consumer clicks on a hyperlink, their browser sends requests to the server that web site is hosted on.
“When we’re speaking about JavaScript frameworks, that server responds with one thing that’s a bit completely different than what we’re used to,” Elimelech mentioned.
“It responds with a skeleton HTML — simply the fundamental HTML, however with loads of JavaScript. Basically, what it does is inform my browser to run the JavaScript itself to get all of the necessary HTML,” he mentioned, including that the consumer’s browser then produces the rendered HTML (the ultimate HTML that’s used to assemble the web page the way in which that we really see it). This course of is called client-side rendering.
Image: Natie Elimelech.
“It’s very very like assembling your personal furnishings as a result of mainly the server tells the browser, ‘Hey, these are all of the items, these are the directions, assemble the web page. I belief you.’ And that implies that all of the exhausting lifting is moved to the browser as an alternative of the server,” Elimelech mentioned.
Client-side rendering could be nice for customers, however there are circumstances by which a consumer doesn’t execute JavaScript, which implies it received’t get the total content material of your web page. One such instance could also be search engine crawlers; though Googlebot can now see extra of your content material than ever earlier than, there are nonetheless limitations.
Server-side rendering
For shoppers that don’t execute JavaScript, server-side rendering can be utilized.
“Server-side rendering is when all of that JavaScript is executed on the server-side. All of the assets are required on the server-side and your browser and the search engine bot don’t must execute JavaScript to get the totally rendered HTML,” Elimelech defined. This implies that server-side rendering could be quicker and fewer resource-intensive for browsers.
Image: Natie Elimelech.
“Server-side rendering is like offering your visitors with an precise chair they will sit it on as an alternative of having to assemble it,” he mentioned, persevering with his earlier analogy. “And, while you do server-side rendering, you mainly make your HTML seen to all types of bots, all types of shoppers . . . It doesn’t matter what the JavaScript capabilities are, it could possibly see the ultimate necessary rendered HTML,” he added.
Dynamic rendering
Dynamic rendering represents “the most effective of each worlds,” Elimelech mentioned. Dynamic rendering means “switching between client-side rendered and pre-rendered content material for particular consumer brokers,” in response to Google.
Below is a simplified diagram explaining how dynamic rendering works for completely different consumer brokers (customers and bots).
Image: Natie Elimelech.
”So there’s a request to URL, however this time we test: Do we all know this consumer agent? Is this a recognized bot? Is it Google? Is it Bing? Is it Semrush? Is it one thing we all know of? If it’s not, we assume it’s a consumer after which we do client-side rendering,” Elimelech mentioned.
In that case, the consumer’s browser runs the JavaScript to get the rendered HTML, however nonetheless benefits from the benefits of client-side rendering, which regularly features a perceived enhance in velocity.
On the opposite hand, if the consumer is a bot, then server-side rendering is used to serve the totally rendered HTML. “So, it sees every part that must be seen,” Elimelech mentioned.
This represents the “finest of each worlds” as a result of web site house owners are nonetheless in a position to serve their content material regardless of the consumer’s JavaScript capabilities. And, as a result of there are two flows, web site house owners can optimize every to higher serve customers or bots with out impacting the opposite.
But, dynamic rendering isn’t good
There are, nevertheless, problems related to dynamic rendering. “We have two flows to take care of, two units of logics, caching, different advanced methods; so it’s extra advanced when you may have two methods as an alternative of one,” Elimelech mentioned, noting that web site house owners should additionally keep an inventory of consumer brokers as a way to determine bots.
Image: Natie Elimelech.
Some may fear that serving search engine bots one thing completely different than what you’re displaying customers could be thought of cloaking.
“Dynamic rendering is definitely a most well-liked and really useful resolution by Google as a result of what Google cares about is that if the necessary stuff is similar [between the two versions],” Elimelech mentioned, including that, “The ‘necessary stuff’ is issues we care about as SEOs: the content material, the headings, the meta tags, inner hyperlinks, navigational hyperlinks, the robots, the title, the canonical, structured knowledge markup, content material, photos — every part that has to do with how a bot would react to the web page . . . it’s necessary to maintain an identical and while you hold these an identical, particularly the content material and particularly the meta tags, Google has no concern with that.”
Image: Natie Elimelech.
Since it’s obligatory to take care of parity between what you’re serving bots and what you’re serving customers, it’s additionally essential to audit for points which may break that parity.
To audit for potential issues, Elimelech recommends Screaming Frog or an identical device that means that you can evaluate two crawls. “So, what we love to do is crawl a web site as Googlebot (or one other search engine consumer agent) and crawl it as a consumer and ensure there aren’t any variations,” he mentioned. Comparing the suitable parts between the 2 crawls will help you determine potential points.
Image: Natie Elimelech.
Elimelech additionally talked about the next strategies to display screen for points:
“Remember, JavaScript frameworks aren’t going wherever,” he mentioned. “Chances are you’re going to satisfy one of them quickly, so that you higher be ready to deal with them.”
Watch the total SMX Next presentation right here (free registration required).
New on Search Engine Land
About The Author
George Nguyen is an editor for Search Engine Land, protecting natural search, podcasting and e-commerce. His background is in journalism and content material advertising and marketing. Prior to getting into the trade, he labored as a radio character, author, podcast host and public faculty instructor.
https://searchengineland.com/the-benefits-of-dynamic-rendering-for-seo-380302
