Server Side Rendering with React

Agenda

  • Overview - React Client Side Rendering
  • Overview - React Server Side Rendering
  • Discussion
  • Live Demo

Server Side

  • The HTML is rendered on server
  • Ex: Nunjucks, PHP

Client Side

  • HTML is rendered by the browser
  • Ex: Angular.js, React

Rendering

React can do both!

Example Page

Pup vs. Pup - GET #1

GET - /

SERVER

<!DOCTYPE html>
<html>
  <head>
    <title>Pup vs Pup</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="public/bundle.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

index.html

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Pup vs. Pup - View #1

User View

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Pup vs. Pup - GET #2

GET - /public/bundle.js

SERVER

bundle.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;
/******/
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},

....

21,547 MORE LINES OF CODE

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Pup vs. Pup - View #2

  • 21,500 lines of javascript parsed
  • Script execution begins, React.DOM renders!

But where are the pups???

PuppyDB

Pup vs. Pup - GET #3

GET - /api/puppies

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Client Side React - Overview

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

GET - /

1

SERVER

GET - /bundle.js

2

React.DOM Render

3

React.DOM Render

5

GET - api/puppies

4

"First Meaningful Paint"

GET - /style.css

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

The Web without Javascript?

class="no-js edition-domestic app-homepage"

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Server Side React - Overview

GET - /

1

SERVER

React.DOM Render

2

  • Server gets request
  • Server GETs data from DB**
  • Server renders HTML
  • React DOM renders again on client side

 

  • Verifies state, adds click handlers

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Server Side

  • Faster initial page load**
  • More reliable SEO, Metadata, & Linking

Client Side

  • Easier to manage
  • Additional page loads equally as fast

Additional Considerations

Live Demo!

CLIENT SIDE

SERVER SIDE

DISCUSSION

DEMO

Helpful Resources

Server side versus client side rendering

By Shane Jarman

Server side versus client side rendering

  • 762