React Code Split SSR
React code splitting with server side rendering
How it works
- Based on React Router 4
- Server side: Load all components synchronously, then render to string.
- Client side: Load the initial component before rendering, render the entire screen synchronously, then load the rest of routes asynchronously.
Note: This packages is only tested in Meteor project, but technically it can be used in any Nodejs projects.
Usage
$ npm i react-code-split-ssr --save
Client/server shared:
const Home = <Bundle mod=import'/imports/modules/home' />const Posts = <Bundle mod=import'/imports/modules/posts' /> const routes = exact: true path: '/' component: Home exact: true path: '/posts' component: Posts const redirects = from: '/test' to: '/posts'
Client:
// import some components... /* In an async function */const Routes = await
Server:
// import some components... /* In an async server router */const Routes = await const ServerRoutes = <StaticRouter location=urlpathname context=context > <Layout> <Routes /> </Layout> </StaticRouter>const bodyHtmlString = // Use bodyHtmlString to where you need
API
Bundle - React Component <Bundle>
Props
- mod {Promise} Required - A
Promise
object which can be resolved to React Component - loading {Component} - A React Component
generateRoutes - Func (object: Options)
A function that returns a Promise
object which can be resolved to React Router routes wrapped in <Switch>
Options
- pathname {string} Required - Pathname for initial loading
- routes {objects}[] Required - An array of
<Route>
props objectcomponent
field only accepts() => <Bundle/>
location
,render
fields are currently not supported
- redirects {objects}[] - An array of
<Redirect>
props object - notFoundComp {Component} - A React component for 404 Not Found, only accepts
() => <Bundle/>
v1.0.0 TODO
- SSR correctly for redirected routes
- Change
notFoundComp
to() => <Bundle />
- Add more argument validations