Skip to content

With Async/API Data - React + Redux + SSR/Prefetch/Cache + Routing + Helmet + PWA playground / demo / Boilerplate / examples

Notifications You must be signed in to change notification settings

dieMAYREI/ssr-pwa-react-app

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Router Redux SSR Prefetch Helmet Boilerplate

Capabilities

  • React + Redux + ReactRouter4
  • SSR
  • Prefetch data
  • Shared Initial State
  • React helmet & server side rendering
  • 404 status code ^.^

Install

npm install
npm run build
npm run start:server

Persistent Store

It can be useful to persist the store-data (including the API responses), to speed things up and prevent running into API rate-limits (especially server-side).

You should however add some invalidation logic, to get fresh data from time to time.

Client

redux-persist is a nice library for this. It can be helpful to delay rendering until rehydration is complete. v5 includes a PersistGate component, for v4 we used this wrapper: HydratedAppProvider

Server

One way to solve this is to store the store-data outside of the request. Example:

  • PersistentStoreData
  • Call saveStoreData(storeObject) after rendering the response
  • Use getStoreData() as initial state in configureStore(initialState)

About

With Async/API Data - React + Redux + SSR/Prefetch/Cache + Routing + Helmet + PWA playground / demo / Boilerplate / examples

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.6%
  • HTML 5.6%
  • CSS 0.8%