/react-loadable-component-with-continuous-deployment

React @loadable/component with Continuous Deployment

Primary LanguageJavaScriptMIT LicenseMIT

react-loadable-component-with-continuous-deployment

Netlify Status

React @loadable/component with Continuous Deployment.

See the explanation post for more info at https://dev.to/aleixmorgadas/react-loadable-component-with-continuous-deployment-5ep3

dev.to

Project Docs

Decisions

  • It's a Single-Page Application
  • We need @loadable/component library to reduce the application first loading size
  • We don't want to store the previous artifacts (js & css) between deployments to keep old versions working
  • We want Continuous Deployment

Problem

Let's try do build the project twice changing a little a file:

Build 1

build01

Build 2

build02

As you see, some file names changed as they contain the checksum in the name to verify that the content has changed.

See example video of the behavior

Video with error

Solution

Wrap the Router file with a ErrorBoundary component that caches the 'ChunkLoadError' thrown by @loadable/component and asks the user to reload the page.

You add this ErrorBoundary file to your project, and then you wrap the <Router>...</Router> Component with it. See example here

See example of the correct behavior

Video without error

License

Copyright (c) 2021 Aleix Morgadas Licensed under the MIT License