$30 off During Our Annual Pro Sale. View Details »

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

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. EVERYONE’S HAPPY React, Server-side Rendering & SEO

  2. BROWSER

  3. SERVER

  4. A TRADITIONAL WEBSITE

  5. None
  6. hzdg.com

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

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

    content=“a </head> <body> <div class=“container”> <div> hzdg.com
  9. <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
  10. <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>
  11. <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>
  12. ≈ g

  13. <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
  14. :) ?

  15. :| ! • 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*
  16. A JAVASCRIPT APP (SPA)

  17. None
  18. hzdg.com

  19. hzdg.com JS

  20. hzdg.com JS showHome()

  21. hzdg.com JS showHome()

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

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

  24. hzdg.com g

  25. hzdg.com JS g

  26. hzdg.com JS g ?

  27. :| !! • 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?
  28. SERVER-SIDE RENDERING WITH REACT

  29. JS

  30. hzdg.com JS

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

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

    <meta name=“keywords” content=“a </head> <body> <div class=“container”> <div>
  33. 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>
  34. 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>
  35. 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>
  36. <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
  37. <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
  38. :) • 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
  39. EVERYONE’S HAPPY

  40. REACT @MATTHEWWITHANM HZDG.COM