SSR

Server-side rendering (SSR) is when content on your webpage is rendered on the server and not on your browser using JavaScript.

Benefits

  • Performance
  • SEO
  • Social sharing

How to get started with SSR

  • ReactDOMServer

  • Next.js

  • Razzle

  • Gatsby

SSR

  1. A React component - even just a basic one that renders “Hello World” for now.
  2. A server which spits back our basic React component after it’s wrapped it in some HTML structure.
  3. A React app which is going to pick up from where the server rendered HTML left off and add in any event listeners to the existing markup where needed.

It’s important to note here that, for React’s sake, what you render on the server (#2 above) needs to be identical to what is rendered on the client (#3). If not, React will throw a warning.

.render

.hydrate

Pass props to components

Render App with fetched data

Add routing

Add redux

Questions

Made with Slides.com