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
- 971