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