Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appigram/react-code-split-ssr
React code splitting with server side rendering. Code is used on ryfma.com
https://github.com/appigram/react-code-split-ssr
Last synced: about 2 months ago
JSON representation
React code splitting with server side rendering. Code is used on ryfma.com
- Host: GitHub
- URL: https://github.com/appigram/react-code-split-ssr
- Owner: appigram
- License: mit
- Fork: true (lhz516/react-code-split-ssr)
- Created: 2019-08-19T09:36:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T09:05:05.000Z (7 months ago)
- Last Synced: 2024-09-25T20:01:17.091Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://ryfma.com
- Size: 126 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- 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 6
- 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 },
]
```
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.2.0
- [x] Remove redirects, Fix React-Router v6 specific rendering
## v1.1.0
- [x] Upgrade to React-Router v6
## v1.0.0
- [ ] SSR correctly for redirected routes
- [X] Change `notFoundComp` to `() => `
- [ ] Add more argument validations