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 1 month 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 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T09:05:05.000Z (over 1 year ago)
- Last Synced: 2025-01-17T04:29:22.840Z (10 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
- React 19
- Based on React Router 7
- 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.3.0
- [x] Upgrade to React-Router 7 and React 19
## 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