Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Everyone's Happy: React, Server-side Rendering ...

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

A comparison of traditional web sites, SPAs, and React apps with server-side rendering.

Matthew Dapena-Tretter

November 14, 2014
Tweet

More Decks by Matthew Dapena-Tretter

Other Decks in Programming

Transcript

  1. <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content <meta name=“keywords”

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

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

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

    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>
  5. <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content <meta name=“keywords”

    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>
  6. <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content <meta name=“keywords”

    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
  7. :| ! • 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*
  8. :| !! • 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?
  9. JS

  10. hzdg.com JS <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content

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

    <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div>
  12. 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>
  13. 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>
  14. 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>
  15. <html> <head> <title>Welcome | HZDG</title> <meta name=“description” content <meta name=“keywords”

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

    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
  17. :) • To Google, site behaves like traditional site •

    To humans, it behaves like a SPA (after the first 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