react-broker
A lightweight library for lazy components using React 16.8+. It's perfect for code splitting and has the simplest SSR story you've ever seen out-of-the-box.
Critically, this package is only intended to work with Webpack, specifically
Webpack 4 and future versions. There are no plans to implement a design
accommodating Parcel or other bundlers. There is also a hard requirement
for babel-plugin-macros
(which is shipped with CRA) if you opt to use the macro.
// Automatically generates dynamic imports for webpack with babel-plugin-macros. // Just give it the path.const LazyPage = ////////////////////////////////////////////////////////////////////////////////// ⬇ BECOMES ⬇ ///////////////////////////////////////////////////////////////////////////////// const LazyPage = { // Look at me! I'm used like a normal component. return <BrokerProvider> <LazyPage id='1'/> </BrokerProvider/> }
Requirements
- Webpack 4+ (because
chunks
) - React 16.8+ (because
hooks
) - Babel (because
babel-plugin-macros
)
Installation
yarn add react-broker
or npm i react-broker
Examples
Hello world
Hello world w/ Router
Documentation
react-broker/macro
The function that transforms your imports and delegates your async components.
lazy(component <String>, options <Object>)
component {String}
A path to a React component you want to lazy load. The component must be in the default
export of the file.
Paths cannot be passed via an identifier, it has to be a plain string. It is used just like a regular component.
You may also lazy load external library components, but just know that the component in question must be the
default
export.
// Used like a regular componentconst LazyPage = <LazyPage id=1> // ...</LazyPage>
options {Object}
loading (props, context{retry, error})
- props props passed the component
- context
retry
is a function which will force a reload of the componenterror
is any error returned byPromise.reject
, this is only relevant if anerror
component isn't also defined in options
error (props, context{retry, error})
- See
loading
- See
Broker.Provider
Manages code-splitting and the resolution of your async components by
keeping track of which chunk names have been loaded and also determining
which <scripts>
need to be included from the server-side. Broker.Provider
must be defined at the top-level of your lazy loaded components.
Props
{Broker.createChunkCache}
chunkCache You only provide a chunkCache
on the server side. In the client it is not
allowed. The chunk cache is used for tracking which chunks were loaded during
the latest render phase of the app.
Broker.createChunkCache
const chunkCache = Broker { return <BrokerProvider chunkCache=chunkCache> <LazyPage id=propsid/> </BrokerProvider> }
Broker.createChunkCache
Creates a context for Broker.Provider
to track chunks in and provides
helper methods to provide access to those chunks.
createChunkCache.getChunkNames()
Returns an array
of all the Webpack chunk names loaded into the current app.
createChunkCache.getChunks(webpackStats)
Returns a Set
of all the Webpack chunks loaded into the current app.
webpackStats
<Object>
- The stats object created by Webpack.
createChunkCache.getChunkScripts(webpackStats, options)
Returns a string
representation of all the <script>
tags to include in the
output of your app when using with SSR.
webpackStats
{Object}
- The stats object created by Webpack.
options
{Object}
preload
{Bool|Object}
- If
true
, this will generate<link rel='preload'>
tags with your scripts. - If an
object
, the key/value pairs will be added to the<link rel='preload'>
tags as attributes. e.g.{preload: {crossorigin: 'anonymous'}}
generates<link rel='preload' as='script' crossorigin='anonymous' href='...'>
- If
async
{Bool}
- If
true
, anasync
flag will be added to your<script>
tags - default
true
- If
defer
{Bool}
- If
true
, adefer
flag will be added to your<script>
tags andasync
will be omitted - default
false
- If
SSR section for an example
See theBroker.lazy
This is the function created by react-broker/macro
.
To skip the macro you could do something like this with the Webpack code-splitting API:
const Component =
Lazy.load()
Preloads the component.
const LazyPage = // ...<Link onMouseEnter=LazyPageload> Home</Link>
Broker.load(...components <String>)
Preloads one or several Lazy
components.
const LazyA = const LazyB = Broker
Broker.loadAll(
App: React.Element,
renderer: ReactDOM.renderToStaticMarkup|renderToString
)
Tracks all of the chunks used in your app during the server side render and optionally renders your app to a string
App
{React.Element}
- Your React application
renderer
{ReactDOM.renderToStaticMarkup|ReactDOM.renderToString}
- default
ReactDOM.renderToStaticMarkup
- The renderer used for determining the chunks used in your app. To avoid, extra renders, you could change this to `ReactDOM.renderToString.
- default
SSR section for an example
See theBroker.loadInitial(chunkCache: Broker.createChunkCache)
Populates your chunk cache with the async components present in your application.
This requires that Broker.getChunkScripts
was used on the server side. The primary
use case for this function is elimination loading components and flashes when
initially rendering your app in the browser.
SSR section for an example
See theServer-side Rendering
client/render.js
const app = <BrokerProvider> <App/> </BrokerProvider> Broker
server/render.js
{ app = app return app}