Intro to Server Side Rendering with React
Agenda
- What do I mean by rendering?
- Client Side React - Overview
- Server Side React - Overview
- Discussion & Live Demo
Server Side
Client Side
- HTML created in browser by JS
- Ex: Angular.js, React
Rendering
React can do both!
- HTML created on server, sent to client
-
Nunjucks / Express
- app.engine, res.render
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(<App />, document.getElementById('app'));
const React = require('react');
const { renderToString } = require('react-dom/server')
renderToString(<App />)
// result must be inserted into target divExample 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
Client Side React - Overview
CLIENT SIDE
SERVER SIDE
DISCUSSION
DEMO
GET - /
SERVER
GET - /bundle.js
React.DOM Render
React.DOM Render
GET - api/puppies
GET - /style.css
index.html
waiting...
waiting...
GET - /img
CLIENT SIDE
SERVER SIDE
DISCUSSION
DEMO
Server Side React - Overview
GET - /
SERVER
React.DOM Render
- Server gets request
- Server sets initial state
- Server renders HTML
GET - /bundle.js
GET - /style.css
GET - /img
waiting...
-
Add Event Listeners, checks state
CLIENT SIDE
SERVER SIDE
DISCUSSION
DEMO
Server Side
- Faster initial page load**
- More reliable SEO, metadata, & linking
Client Side
- Easier to manage
- Additional page views load equally as fast
Rendering Considerations
The Web without Javascript?
class="no-js edition-domestic app-homepage"
CLIENT SIDE
SERVER SIDE
DISCUSSION
DEMO
Live Demo!
CLIENT SIDE
SERVER SIDE
DISCUSSION
DEMO
Helpful Resources
Copy of Server side versus client side rendering
By Shane Jarman
Copy of Server side versus client side rendering
Actual
