React-Router-SSR
Simple isomorphic React SSR for Meteor with subscribed data re-hydration
Supporting the project
This project is published under the communitypackages
namespace in hopes that it can become maintained through community effort. For now though it is maintained solely by me (@copleykj) and any support you give helps to fund the development and maintenance of almost 2 dozen Packages for Meteor or for use alongside Meteor.
Install
First install NPM dependencies
$ npm install --save react react-dom react-router react-router-dom react-helmet history
Then install communitypackages:react-router-ssr
$ meteor add communitypackages:react-router-ssr
Package Exports
renderWithSSR(rootComponent, [options])
- Isomorphic app rendering.
-
rootComponent
- The component that encompasses your application. Can be any React element. Routers and Switches are handled by the package so those aren't necessary inside your app. -
options
- An object of rendering options. Currently there is only a single options, but there may be more options in the future.-
storeOptions
- An object that contains the options for a redux store.rootReducer
- Your apps root reducer.initialState
- The initial state.middlewares
- An array of middlewares to apply.
-
1import { renderWithSSR } from 'meteor/communitypackages:react-router-ssr'; 2 3import thunk from 'redux-thunk'; 4import { createLogger } from 'redux-logger'; 5 6import rootReducer from './reducers/root'; 7 8const logger = createLogger({ diff: true }); 9 10renderWithSSR(<App />, { 11 storeOptions: { 12 rootReducer, 13 initialState: { counter: 100 }, 14 middlewares: [ thunk, logger ] 15 } 16})
browserHistory
- This is the history object in the router on the client. The team behind React Router, in all their infinite wisdom, decided to remove access to this in v4 and require you to pass history through props like a f#@%ing hot potato. This allows you to import the history object in a sane manor and use it in the way you have come to know and love :heart:. Enjoy!
1import { browserHistory } from 'meteor/communitypackages:react-router-ssr'; 2 3browserHistory.replace('/login');
Usage
This package renders your app into an HTML element with an id of react-app
, so add one to your main HTML file for your project like so.
1<head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5</head> 6<body> 7 <div id="react-app"></div> 8</body>
In shared code, such as in a /both/main.jsx
file, or in a file that is imported into your mainModule
for both the client and server..
1import { renderWithSSR } from 'meteor/communitypackages:react-router-ssr'; 2import { withTracker } from 'meteor/react-meteor-data'; 3 4 5import React from 'react'; 6import { Route } from 'react-router-dom'; 7 8import DashboardPage from './imports/ui/pages/dashbaord'; 9import ProfilePage from './imports/ui/pages/profile'; 10import LoginPage from './imports/ui/pages/login'; 11 12 13export default App = ({ user }) => { 14 if (user) { 15 return ( 16 <> 17 <Route exact path="/" component={DashboardPage} /> 18 <Route path="/profile/:username" component={ProfilePage} /> 19 </> 20 ); 21 } 22 23 return (<LoginPage />); 24}; 25 26const AppContainer = withTracker(() => ({ 27 user: Meteor.user(), 28}))(App); 29 30 31 32renderWithSSR(<AppContainer />);
Styled Components
If the styled-components package is installed in your project, this package will detect it's presence, create a new ServerStyleSheet
, collect all styles, and use them to render your app.
Component Caching
$ npm install --save react-component-caching
For improved rendering speed you can install the react-component-caching package into your project. This package will detect it's presence and use it to render the server side of your application.