Skip to content

Instantly share code, notes, and snippets.

@jevakallio
Last active July 18, 2022 11:02
Show Gist options
  • Save jevakallio/0dac2fba37e0b7ce6a21074f2db6eb88 to your computer and use it in GitHub Desktop.
Save jevakallio/0dac2fba37e0b7ce6a21074f2db6eb88 to your computer and use it in GitHub Desktop.
React SSR, SSG, SPA - History & Colour

SSR History & Colour

  • Three React approaches
    • SPA Single Page Applications
    • SSR Server Side Rendering
    • SSG Static Site Generation

    • SPA - Single Page Applications :: fat client, API
      • Send plain javascript that does on everything on client
      • SEO nightmare
        • Google Crawler is starting to execute JavaScript
        • Page performance still matters
      • Slow first load, but also sometimes, slow every time
      • A lot of JavaScript
        • Network cost
        • Parsing cost (mobile)
          • iPhones: Fast CPUs, unoptimised JavaScriptCore engine
            • Same engine as in React Native. Hermes solves this
          • Android: Slow CPUs, optimised JS engines
      • Logged-in/non-indexable desktop web apps
      • create-react-app

    • SSG - Static Site Generation :: html files on disk
      • JAMStack - JavaScript, APIs, Markup
      • Gatsby, react-static, (eleventy, many non-react projects)
      • Websites like we used to love them
        • Incredible scaling, serve from S3 or cache @ edge
      • Have to rebuild website when data change

    • SSR - Server Side Rendering :: ruby on rails
      • Ok for websites
      • Good for indexable, dynamic web applications
        • Or a performance optimisation over SPA
      • SSR historically
        • HTML + Progressive enhancement
        • Some kind of templating engine (Handlebars, Jinja, Liquid…)
        • Developer experience pretty slow for dynamic apps
      • SSR in React
        • Isomorphic Universal
      • Best/worst of both worlds
        • Good performance, accessibility
        • Need to scale servers
          • Need caching layer in front
          • Serverless helps with DevOps
          • Lambda@Edge/CloudFlare workers a possible future strategy

  • SSR performance characteristics
  • SSR approaches
  • FB <> SSR
    • Historically FB didn’t do SSR
    • The new Facebook.com/Comet/FB5 will be using JavaScript SSR (Node-like, but not node)
    • React SSR
    • React Suspense is blocked by this
    • Future is bright but uncertain
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment