React-redux server side rendering enchanted with varnish-cache for the fastest web page delivering ever - Artur Grzybowski

/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



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



Quick review of Redux

Single source of truth - store




State is read-only

Changes are made by dispatching actions





Actions are handled by reducers



State is read-only




Props are updated by connect function



State is read-only


Actions are handled by reducers


Redux and async (fetch)

Return promise in action creator

Use redux-saga

Use redux-thunk





Why redux ? Isomorphic* app!




This doesn’t work!



This doesn’t work!

componentDidMount vs componentWillMount

Once time rendering

We need wait for promises



How to handle async then?

Expose fetchData function

Wait for all promises





Initial state




Varnish-cache

What is varnish?

Caching proxy

Focused on high availability

Easy to configure

A lot of modules (VMODS)


Varnish-cache


Summary

Pros & cons

High availability services

High performance

Best user experience by getting page immediately

SEO support (and other crawlers)


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/


Thank yougithub.com/FanFataL


React-redux server side rendering enchanted with varnish-cache for the fastest web page delivering ever - Artur Grzybowski

Internet