1. The document discusses dynamic rendering techniques for websites built with JavaScript frameworks like React, including client-side rendering (CSR) and server-side rendering (SSR). 2. With dynamic rendering, sites can serve pre-rendered HTML to search engines and bots while using CSR for users, allowing compatibility with all clients while optimizing performance. 3. Maintaining parity between what bots and users see is important for SEO, and the document provides recommendations for tools and techniques to check for rendering issues between different user agents and JavaScript settings.

1. SMX Next
*
Dynamic rendering
at scale
What we learned from rendering over 200 million
websites in React.
Nati Elimelech, Tech SEO Lead, Wix @netanel November 2021

2. @netanel
Dynamic rendering at scale
SMX
Next
JS Frameworks aren’t going anywhere

3. @netanel
Dynamic rendering at scale
SMX
Next
The Rise of JS Frameworks
- Rapid development
- Better UX
- Better performance
- Enhanced functionality
React

4. @netanel
Dynamic rendering at scale
SMX
Next
When you visit a web page that
requires JS
Browser
executes JS &
updates DOM
Produces rendered
HTML
Your browser sends
a request to a URL
Server responds
w/ skeleton
HTML + JS
Browser
constructs the
web page

5. @netanel
Dynamic rendering at scale
SMX
Next
Client-side rendering
(CSR)
The client (browser) does all the heavy
lifting—needs to run JS to render the
final HTML.
Compatibility: clients with relevant
JS capabilities

6. @netanel
Dynamic rendering at scale
SMX
Next
The Dark Side
- Need to execute JS to get important
HTML
- Requires more resources from client
- Not all bots & crawlers support JS
- Things can break
Yes, another
Star Wars™
joke

7. @netanel
Dynamic rendering at scale
SMX
Next
When you visit a web page with
server side rendering
Browser gets
fully rendered
HTML
response HTML = rendered HTML
Your browser sends
a request to a URL
JS is executed &
HTML rendered
on server side
Browser
constructs the
web page

8. @netanel
Dynamic rendering at scale
SMX
Next
Server-side rendering
(SSR)
The server does all of the heavy lifting so
the client doesn’t need to execute JS to
see important HTML.
Compatibility: all bots and clients, most
animals, some furniture

9. @netanel
Dynamic rendering at scale
SMX
Next
🙎♂️🙍♀️
Introducing dynamic rendering
(oh so very simplified)
Request to URL
Is this
a known
bot?
No
Ye
s
Initial
response
Rest of
response
Render
HTML on
server side
Client Side Rendering
🤖🤖🤖
Serve
skeleton
HTML + JS
Serve fully
rendered HTML
as the response
Server Side Rendering

10. @netanel
Dynamic rendering at scale
SMX
Next
Server-side rendering
(SSR) for bots
Client-side rendering
(CSR) for users

11. @netanel
Dynamic rendering at scale
SMX
Next
More flexibility
➔ Serve content and HTML
regardless of client capabilities
➔ You can optimize HTML for bots
➔ User performance not impacted
More complications
➔ Requires maintaining a UA list
➔ Multiple flows to maintain
➔ Multiple flows 🠆 more cache misses
➔ Parity between flows requires auditing
Dynamic rendering brings:

12. @netanel
Dynamic rendering at scale
SMX
Next
What user clients see

13. @netanel
Dynamic rendering at scale
SMX
Next
What bots see (much tidier!)

14. @netanel
Dynamic rendering at scale
SMX
Next
A short PSA

15. SMX Next
*
More stuff I wanted
to say but didn't have
enough time for

16. @netanel
Dynamic rendering at scale
SMX
Next
Consistency is key
1. Main content of page inc. images
2. Title, canonical & robots tags
3. Internal links
4. Alternate / hreflang tags
5. Structured Data Markup
6. Other important elements on the page
7. Page layout doesn't break
Check your "SEO stuff" - sending mixed
signals to search engines is always a bad
thing.
By importance:

17. @netanel
Dynamic rendering at scale
SMX
Next
Checking for parity issues
2 sets of parity checks you want to be performing regularly:
Googlebot Vs. Regular Chrome UA
make sure bots see what users see, with JS
rendering on
1️⃣
Bot Rendered HTML Vs. Bot Response HTML
make sure bots that don't execute JS see
what bots that don't execute JS see (at
least for the important stuff)
2️⃣

18. @netanel
Dynamic rendering at scale
SMX
Next
Checking for parity issues
Human - Bot wars
Keep the following settings in mind when auditing a webpage
Bot Wars
1️⃣ 2️⃣
User agents:
- UA1: Googlebot for Smartphones
- UA2: Latest Chrome UA
JS settings:
Enable JS execution (limit to 5 seconds)
for both
User agents:
Googlebot for Smartphones for both
JS settings:
- UA 1: Enable JS execution (limit to 5
seconds)
- UA 2: Disable JS

19. @netanel
Dynamic rendering at scale
SMX
Next
Manually auditing for
parity issues
Your Chrome browser & SEO extensions can
be used to find rendering issues!
1. Change UA on browser using 'Network Conditions' or
an extension
2. Disable or leave JS as required (extension)
3. Open your favorite SEO extension and record output
4. Change settings and use SEO extension again
5. Compare

20. @netanel
Dynamic rendering at scale
SMX
Next
Tools you can use for free
1. Manual labor (prev. slide)
2. Mobile-Friendly Test, GSC and other
Google tools will return rendered HTML as
Googlebot
3. If you have the time - python

21. @netanel
Dynamic rendering at scale
SMX
Next
Features you want in your
paid auditing tool
1. Fully customizable UA
2. JS rendering setting / compare
3. Crawl comparisons
4. Render a visual preview of the page

22. SMX Next
*
Got questions?
Follow me on @netane
l