Server side rendering in React can improve SEO and performance by allowing search engines to crawl pre-rendered content. It works by rendering the React components to HTML on the server prior to sending to the client, so search engines see the fully rendered page. This improves indexing and the user experience compared to client-side rendering, where search engines may only see an empty HTML skeleton. The document provides steps for implementing server-side rendering in a React app to gain these SEO and performance benefits.

1. IMPROVING SEARCH ENGINE
OPTIMIZATION AND PERFORMANCE
USING SERVER SIDE RENDERING IN
REACT
SEO SSR
Performanc
e

2. Why No Customer

3. SEARCH
ENGINE Crawling Rendering Indexing

4. Crawling – Collects details about each page: titles,
images, keywords, other linked pages
Crawling
Rendering & Indexing - Store and organize the
content found during the crawling process. After
crawling process search engine renders data collected
from crawling, this process is called Indexing.
Rendering
&
Indexing

5. ARCHITECTURE

6. SEARCH
CRITERIA'
S
• HOW MANY TIMES THIS PAGE CONTAINS THE
KEYWORD?
• DO THE WORDS APPEAR IN TITLE? URL?
• DOES THE PAGE INCLUDES SYNANONS FOR THAT
WORD
• IS THIS PAGE FROM A QUALITY WEBSITE OR
SPAMMING?
• ETC…

8. HOW TO
IMPROVE SEO
SCORE ?

9. CLIENT SIDE RENDERING IN REACT
• ROOT ELEMENT IN INDEX.HTML
<DIV ID="ROOT"></DIV>
• REACT COMPONENTS BUNDLED IN
JAVASCRIPT
<SCRIPT
SRC="/STATIC/JS/BUNDLE.JS">

10. CLIENT SIDE RENDERING

11. SERVER SIDE RENDERING
• ROOT ELEMENT IN INDEX.HTML
<DIV ID="ROOT"></DIV>
• ALL THE CONTENT IS RENDERED
PRIOR
<H1>HELLO WORLD FROM
REACT</H1>
<SCRIPT
SRC="BUNDLE.JS"></SCRIPT>

12. SERVER SIDE RENDERING

13. HOW TO IMPLEMENT SSR
• TRANSPILE THE SERVER CODE
• BABEL ONLY – USING BABEL-CLI
• BABEL WITH WEBPACK
• RENDER TO STRING
• CONST REACTHTML = REACTDOMSERVER.RENDERTOSTRING(<APP />);
• INJECT THE GENERATED HTML ON YOUR SERVER-SIDE RENDERED PAGE
• <DIV ID="APP">${REACTHTML}</DIV>
• MAKE SURE YOU DON’T REFERENCE WINDOW OR DOCUMENT

14. SERVER SIDE RENDERING VS CLIENT SIDE
RENDERING

15.  USE SERVER SIDE RENDERING
 USE ACTUAL AND USEFUL LINKS
 USE HISTORY API
 ROBOTS.TXT
 ROBOTS.TXT FILES ARE LOCATED IN THE ROOT DIRECTORY OF WEBSITES (EX.
YOURDOMAIN.COM/ROBOTS.TXT) AND SUGGEST WHICH PARTS OF YOUR SITE SEARCH ENGINES SHOULD
AND SHOULDN'T CRAWL, AS WELL AS THE SPEED AT WHICH THEY CRAWL YOUR SITE
 REACT ROUTER
 ADD META TAGS, TITLE AND DESCRIPTIONS IN THE APPLICATION
 GOOGLE SEARCH CONSOLE
 MOBILE FRIENDLY TEST
 VIDEO AND IMAGE WITH CAPTION
PERFORMANCE

16. REACT HELMET

18. Q & A AND CONNECT
MANASA RAMANARAYAN
SENIOR SOFTWARE ENGINEER AT IBM
• SLIDES :
HTTPS://WWW.SLIDESHARE.NET/MANASARAMANARAYAN
• GITHUB : HTTPS://GITHUB.COM/MANSAMS500
• LINKEDIN: HTTPS://WWW.LINKEDIN.COM/IN/MANASA-
RAMANARAYAN-7A58825A/
• TWITTER : HTTPS://TWITTER.COM/MANASARAM10