Upload
grand-parade-poland
View
350
Download
4
Embed Size (px)
Citation preview
/GrandParadePolandwww.grandparade.co.uk
React-redux server side rendering enchanted with varnish-cache for the fastest web page delivering ever.
Artur Grzybowski, Senior Development Lead at Grand Parade
Agenda
React-redux application
Server side rendering
Varnish-cache
Summary
/GrandParadePolandwww.grandparade.co.uk
React-redux application
Quick review of React
Is just a view library
Is component based
Is based on state and props
Can return only single node
Components can be develop as a function or a class
/GrandParadePolandwww.grandparade.co.uk
React-redux application
Quick review of Redux
Single source of truth - store
/GrandParadePolandwww.grandparade.co.uk
React-redux application
Quick review of Redux
State is read-only
Changes are made by dispatching actions
/GrandParadePolandwww.grandparade.co.uk
Single source of truth - store
React-redux application
Quick review of Redux
Actions are handled by reducers
/GrandParadePolandwww.grandparade.co.uk
Single source of truth - store
State is read-only
Changes are made by dispatching actions
React-redux application
Quick review of Redux
Props are updated by connect function
/GrandParadePolandwww.grandparade.co.uk
Single source of truth - store
State is read-only
Changes are made by dispatching actions
Actions are handled by reducers
React-redux application
Redux and async (fetch)
Return promise in action creator
Use redux-saga
Use redux-thunk
/GrandParadePolandwww.grandparade.co.uk
Server side rendering
Why redux ? Isomorphic* app!
Single source of truth - store
/GrandParadePolandwww.grandparade.co.uk
Server side rendering
This doesn’t work!
componentDidMount vs componentWillMount
Once time rendering
We need wait for promises
/GrandParadePolandwww.grandparade.co.uk
Server side rendering
How to handle async then?
Expose fetchData function
Wait for all promises
/GrandParadePolandwww.grandparade.co.uk
Varnish-cache
What is varnish?
Caching proxy
Focused on high availability
Easy to configure
A lot of modules (VMODS)
/GrandParadePolandwww.grandparade.co.uk
Summary
Pros & cons
High availability services
High performance
Best user experience by getting page immediately
SEO support (and other crawlers)
/GrandParadePolandwww.grandparade.co.uk
Cache invalidation
Cache for logged user
There is still some additional code to do for isomorphic app
Summary
Links
https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree
https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
https://www.codementor.io/reactjs/tutorial/redux-server-rendering-react-router-universal-web-app
https://reactjsnews.com/isomorphic-react-in-real-life
https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html
https://blog.tableflip.io/server-side-rendering-with-react-and-redux/
/GrandParadePolandwww.grandparade.co.uk