Server Side Rendering with React and Redux · Single Page Application User navigates to spa.com...

<title>Server Side Rendering with React and Redux</title>

<p>Presented by Fiax</p>

Introduction

<h3>Introduction</h3>

<li>Traditional Single Page Application (SPA) flow in React</li>

<li>Server Side Rendering (SSR) challenges</li>

<li>SSR concepts graphics and diagrams</li>

<li>Analize snapshot codes</li>

Technologies

<p>Technologies</p>

Technologies

<p>Technologies</p>

Technologies

<p>Technologies</p>

<h2>Why Server Side Rendering (SSR) is needed?</h2>

Why SSR?

<h1>Javascript </h1>

Single Page Application

<pre>Browsers are more powerful. We started to create entire

websites and web apps with client-side JavaScript. We started to call

this "Single Page Application" (SPA).</pre>

Browser Server

User navigates to spa.com Receives request

Sends back index.htmlIndex.html

Sends back index.html<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Browser Server

<html>

<head>

</head>

<body>

</body>

</html>

Browser Server

No content

<html>

<head>

</head>

<body>

</body>

</html>

Browser Server

<html>

<head>

</head>

<body>

</body>

</html>

Browser Server

Requests bundle.js Receives request

Browser Server

Sends back bundle.jsReact app

Browser Server

Sends back bundle.js

Receives request

React app

Requests for data

Browser Server

Receives request

Sends back JSON data

React app

Requests for data

App renders

Browser Server

Receives request

React app

Requests for data

App renders

Browser Server

Receives request

React app

Requests for data

App renders

Browser Server

Requests page

Requests JS file

Content visible

Browser Time

<h2>Why SSR is needed?</h2>

Why SSR?

Server Side Rendering

Receives request

React app

Requests for data

App renders

Browser Server

Receives request

React app

Requests for data

App renders

Browser Server

Fetches any required data

Renders

Generates HTML

Loads up in memory

Sends back index.html

Browser Server

Fetches any required data

Renders

Generates HTML

Loads up in memory<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>I came from the server

</script>

</body>

</html>

Requests page

Content visible

Browser Time

SSR + SPA

SSR + SPA =

SSR + SPA = Universal App

<h3>Benefits from SSR</h3>

<li>Faster times for the initial page render</li>

<li>Fully indexable HTML pages</li>

<h3>Challenges on SSR</h3>

SSR with React and Redux

<li>JSX on the server</li>

<li>Need to turn components into HTML</li>

<li>Need state rehydration on the browser</li>

<li>Redux needs different configuration on browser vs server</li>

<li>Routing on the server</li>

<li>Need to detect when all initial data load are completed on server</li>

// All imports required in server.js file

const app = express()

app.get('*', (request, response) => {const content = renderToString(<App />)

res.send(content)})

app.listen(port, () => {console.log(`Server listening to port ${port} on ${host}`)

<h3>JSX on the server</h3>

res.send(content)})

$ node server.js

res.send(content)})

$ node server.jsSyntax Error: Unexpected token

res.send(content)})

// All imports required in server.js fileimport { renderToString } from 'react-dom/server'

app.get('*', (request, response) => {const content = renderToString(<App />)const html = `<html>

<div id="root">${content}</div><script src="bundle.js"></script>

</body></html>`

res.send(html )})

<i>Challenge: Need to turn components into HTML</i>

res.send(content)})

// webpack.base.js file

module.exports = {

module: {rules: [{

test: /\.js?$/,loader: 'babel-loader',exclude: /node_modules/,options: {

presets: ['react','stage-0',['env', { targets: { browsers: ['last 2 versions'] } }]

// webpack.client.js file

const path = require('path')const merge = require('webpack-merge')const baseConfig = require('./webpack.base.js')

const config = {

entry: './src/client/client.js',

output: {filename: 'bundle.js',path: path.resolve(__dirname, 'public')

module.exports = merge(baseConfig, config)

// webpack.server.js file

const path = require('path')const merge = require('webpack-merge')const baseConfig = require('./webpack.base.js')

const config = {target: 'node',entry: './src/client/client.js', entry: './src/server.js',

output: {filename: 'bundle.js',path: path.resolve(__dirname, 'public') path: path.resolve(__dirname, 'build')

module.exports = merge(baseConfig, config)

res.send(content)})

$ node bundle.js

res.send(content)})

<h3>Routing</h3>

$ node bundle.js

<h3>Router</h3>

Request to /

Request to /path

Browser request

Express Route Handler

React Router

<h3>Router</h3>

BrowserRouter

Client Server

StaticRouter

<h3>Router</h3>

import { renderRoutes } from 'react-router-config'import { BrowserRouter} from 'react-router-dom'

ReactDOM.hydrate(<Provider store={store}>

<BrowserRouter>{renderRoutes(Routes)}

</BrowserRouter></Provider>,document.querySelector('#root')

import { renderRoutes } from 'react-router-config'import { StaticRouter } from 'react-router-dom'

export default (request, store) => {const content = renderToString(<Provider store={store}>

<StaticRouter location={request.url}>{renderRoutes(Routes)}

</StaticRouter></Provider>

Client Server

<h3>Router</h3>

Client Server

<h3>Router</h3>

Client Server

<h3>Routes</h3>

// Routes.js

export default [{component: App,loadData: ({ dispatch }) => dispatch(fetchData()),routes: [

{component: Home,path: '/',exact: true

component: _Component,path: '/path'

<h3>Routes</h3>

// Routes.js

<h3>Routes</h3>

// Routes.js

Figure out what components would have rendered (based on URL)

Server Time

Call 'loadData' function attached to

each of those components

Detect all requests are completed

Render the app with the collected data

Send result to browser

/* … */

const promises = matchRoutes(Routes, request.url).map(({ route }) => {

return route.loadData ? route.loadData(store) : null}).map(promise => {

if (promise) {return new Promise((resolve, reject) => {promise.then(resolve).catch(resolve)})

Promise.all(promises).then(() => {const reduxState = store.getState( )const html= htmlTemplate(request, reduxState )

res.send(html)})

/* … */

res.send(html)})

// Routes.js

/* … */

res.send(html)})

// Routes.js

/* … */

res.send(html)})

Promise.all

promise promise promise

/* … */

res.send(html)})

Promise.all

/* … */

res.send(html)})

Promise.all

unresolved rejected resolved

Call .catch function

/* … */

res.send(html)})

Promise.all

Call .then function

/* … */

res.send(html)})

Figure out what components would have rendered (based on URL)

Server

Call 'loadData' function attached to

each of those components

Detect all requests are completed

Render the app with the collected data

Send result to browser

/* … */

res.send(html)})

<h3>Redux principles</h3>

<li>Single source of truth</li>

<li>State is read-only</li>

<li>Changes are made with pure functions</li>

/* … */

const content = renderToString(<Provider store={store}>

const html = `<html><head></head><body>

<div id="root">${content}</div><script>

window.INITIAL_STATE = ${JSON.stringify(store.getState())}</script><script src="bundle.js"></script>

</body></html>`

/* … */

</body></html>`

/* … */

</body></html>`

const initialState = window.INITIAL_STATE ? window.INITIAL_STATE : {}const store = createStore(reducers, initialState)

ReactDOM.hydrate(<Provider store={store}><BrowserRouter>

{renderRoutes(Routes)}</BrowserRouter>

</Provider>, document.querySelector('#root'))

Client

/* … */

</body></html>`

const initialState = window.INITIAL_STATE ? window.INITIAL_STATE : {}const store = createStore(reducers, initialState)

ReactDOM.hydrate(<Provider store={store}><BrowserRouter>

{renderRoutes(Routes)}</BrowserRouter>

</Provider>, document.querySelector('#root'))

Client

<i>Challenge: Need state rehydration on the browser</i>

<h3>Search Engine Optimization (SEO)</h3>

<li>Helps people to find your website using search engines</li>

<li>Brings more online business by improving search engine ranking</li>

/* … */

</body></html>`

import { Helmet } from 'react-helmet'

const helmet = Helmet.renderStatic()

const html = `<html><head>${helmet.title.toString()}${helmet.meta.toString()}</head><body>

</body></html>`

import { Helmet } from 'react-helmet'

</body></html>`

import serialize from 'serialize-javascript'

window.INITIAL_STATE = ${serialize(store.getState())}</script><script src="bundle.js"></script>

</body></html>`

<h3>More Challenges</h3>

<li>Authentication in SSR</li>

<li>Error Handling and Redirects</li>

<title>SSR with React and Redux</title>

<title>SSR with React and Redux</title>

Server Side Rendering with React and Redux · Single Page Application User navigates to spa.com...

Documents

Powers of 10 cienceopticsu/powersof10/index.html cienceopticsu/powersof10/index.html

Beyondships index.html · Beyondships index.html

Immigration un/esa/population/migration/index.html

Case ID: 160100404 · 32. Gegen is Uber’s Transportation Company in Philadelphia, Pennsylvania. 33. When Gegen receives the fare request from Uber, it forwards that request to a

Kelsey Shreve y/VolOpSlideshow/index.html

REGIONAL CARRIERS - ISCPO€¦ · REGIONAL CARRIERS ”AN INSIDE LOOK ... Sends scan file 1. Sends ASN 5. Receives OS&D 7. Receives scans 8. Review for non-delivery and request POD

index.html < Vs 'J —firs · index.html < Vs 'J —firs

Natural Gas /gas/index.html _glance/natural_gas.html

The supplier receives an automated request via e-mail:

udlibsearch.lib.udel/ highschools/index.html

Enzymes and Vitamins Chapter 19 on/index.html

1) 전자 초청 quest.arc.nasa/smore/index.html

Request for Proposal - ohsers.org · In the event that SERS receives a public records request to which, in SERS’s sole discretion, ... the Proposal will be deemed ineligible for

The Rock Magnetic Bestiary ( irm.umn/bestiary/index.html )

Primaria comunei Dolhesti - index.html

Space. The Universe: nceopticsu/powersof10/index.html nceopticsu/powersof10/index.html

Chapter 17 Evolution’s History Perspective. evolution/index.html

DEPARTMENT OF AGRARIAN REFORM...1 Fills in DARAB Request Form or prepares written request. Receives and reviews the accomplished form. 1 minute Officer of the Day Evaluates the authority

Introduction - Microsoft... · Web viewand sends a connection request. The host receives this request and derives the session key before responding. Finally, the client initiates

SCOTT SLED geocities/p_leriche/scott/index.html