Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lhz516/react-code-split-ssr
React code splitting with server side rendering
https://github.com/lhz516/react-code-split-ssr
code-splitting react react-router server-side-rendering ssr
Last synced: 2 months ago
JSON representation
React code splitting with server side rendering
- Host: GitHub
- URL: https://github.com/lhz516/react-code-split-ssr
- Owner: lhz516
- License: mit
- Created: 2017-09-10T01:49:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-11T05:11:34.000Z (over 7 years ago)
- Last Synced: 2024-09-29T00:21:24.331Z (3 months ago)
- Topics: code-splitting, react, react-router, server-side-rendering, ssr
- Language: TypeScript
- Size: 8.79 KB
- Stars: 11
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 projects, but technically it can be used in any Nodejs projects. Here is an [example](https://github.com/lhz516/react-code-split-ssr-example) with Meteor
## Usage
```
$ npm i react-code-split-ssr --save
```
Client/server shared:
```js
import { Bundle } from 'react-code-split-ssr'
import React from 'react'
const Home = () =>
const Posts = () =>
export const routes = [
{ exact: true, path: '/', component: Home },
{ exact: true, path: '/posts', component: Posts },
]
export const redirects = [
{ from: '/test', to: '/posts' }
]
```
Client:
```js
import React from 'react'
import { render } from 'react-dom'
import { matchPath } from 'react-router'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { generateRoutes } from 'react-code-split-ssr'
import { routes, redirects } from '/imports/routes'
// import some components...
/* In an async function */
const Routes = await generateRoutes({
routes,
redirects,
notFoundComp: NotFound,
pathname: window.location.pathname,
})
render(
,
document.getElementById('app'),
)
```
Server:
```js
import { Route, StaticRouter, Switch } from 'react-router'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { generateRoutes } from 'react-code-split-ssr'
import { routes, redirects } from '/imports/routes'
// import some components...
/* In an async server router */
const Routes = await generateRoutes({
routes,
redirects,
notFoundComp: NotFound,
pathname: req.url
})
const ServerRoutes = ({url, context = {}}) => (
)
const bodyHtmlString = renderToString()
// Use bodyHtmlString to where you need
```
## API
### Bundle - React Component \
#### 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 ``
#### Options
- pathname {string} ***Required*** - Pathname for initial loading
- routes {objects}[] ***Required*** - An array of `` props object
- `component` field only accepts `() => `
- `location`, `render` fields are currently not supported
- redirects {objects}[] - An array of `` props object
- notFoundComp {Component} - A React component for 404 Not Found, only accepts `() => `
## v1.0.0 TODO
- [ ] SSR correctly for redirected routes
- [X] Change `notFoundComp` to `() => `
- [ ] Add more argument validations