Everyone's Happy: React, Server-side Rendering & SEO

EVERYONE’S HAPPY React, Server-side Rendering & SEO

BROWSER

SERVER

A TRADITIONAL WEBSITE

hzdg.com

<html> <head> <title>Welcome | HZDG</title> <meta name=“description” content <meta name=“keywords”
content=“a </head> <body> <div class=“container”> <div> hzdg.com

content=“a </head> <body> <div class=“container”> <div> hzdg.com hzdg.com/contact

content=“a </head> <body> <div class=“container”> <div> hzdg.com hzdg.com/contact <html> <head> <title>Contact | HZDG</title> <meta name=“description” content <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div>

content=“a </head> <body> <div class=“container”> <div> hzdg.com hzdg.com/contact <html> <head> <title>Contact | HZDG</title> <meta name=“description” content <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div> g

:| ! • Each navigation needs to load and render
an entire page • Redundant data is downloaded • No cool transitions • Feels slower • Google won’t see any HTML that JS builds*

A JAVASCRIPT APP (SPA)

hzdg.com

hzdg.com JS

hzdg.com JS showHome()

hzdg.com JS hzdg.com/contact showContact() showHome()

hzdg.com g

hzdg.com JS g

hzdg.com JS g ?

:| !! • Can Google run your JS? • To
be safe, server needs to generate HTML for Google • Apps update the body, but metadata (title, description) needs to be in the original response • So you need to duplicate everything from your JS app for the server • Users need to wait for JS to download before seeing anything • What if JS isn’t supported?

SERVER-SIDE RENDERING WITH REACT

hzdg.com JS

hzdg.com JS <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content
<meta name=“keywords” content=“a </head> <body> <div class=“container”> <div>

hzdg.com JS JS <html> <head> <title>Welcome | HZDG</title> <meta name=“description”
content <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div>

hzdg.com JS hzdg.com/contact <html> <head> <title>Contact | HZDG <meta name=“description”
<meta name=“keywords” </head> <body> JS <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div>

content=“a </head> <body> <div class=“container”> <div> hzdg.com g JS

content=“a </head> <body> <div class=“container”> <div> hzdg.com hzdg.com/contact <html> <head> <title>Contact | HZDG</title> <meta name=“description” content <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div> g JS

:) • To Google, site behaves like traditional site •
To humans, it behaves like a SPA (after the ﬁrst page) • Users see page immediately—before JS loads • The browser doesn’t have to talk to the server for subsequent pages • One code base—no duplication • Finer-grain control over behavior/transitions • Falls back to traditional behavior for non-JS browsers

EVERYONE’S HAPPY

REACT @MATTHEWWITHANM HZDG.COM

Everyone's Happy: React, Server-side Rendering & SEO

Everyone's Happy: React, Server-side Rendering & SEO

More Decks by Matthew Dapena-Tretter

Other Decks in Programming

Featured

Transcript