React-carvel NPM

react-carvel

A painless react server side rendering middleware

Features

Stream & string mode rendering
Gzip compression on stream & string rendering
Rendering cache
Styled-component & sass & less
Cookie & token base credential
Only few change when apply to exists or new react project
use exists client routing
Base on koa

Usage

Base on project create by create-react-app & react-router-dom

Install packages

yarn add react-carvel react react-dom react-router-dom \
koa koa-router koa-static

Update index.js

Use App.js and render elements with hydrate or render accordingly

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './root-client';
import * as serviceWorker from './serviceWorker';

const rootElement = document.getElementById('root');
const renderOrHydrate = rootElement.children.length ? 'hydrate' : 'render';
ReactDOM[renderOrHydrate]((
    <Root />
), rootElement);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();