React-Router-SSR
Simple isomorphic React SSR for Meteor with subscribed data re-hydration
Supporting the project ❤️
This project, like all of the projects maintained by the Meteor Community Packages org, takes time and hard work to keep updated. If you find this or any of our other packages useful, consider visiting the sponsor section of a repo and sending some love to the dedicated developers that keep your favorite packages up to date.
Upgrades
Upgrading from v2 to v3
To better align with the default app that is created by the meteor create
command. This package by default now renders into an element with an id of react-target
where it used to render to and id of react-app
, but is also now configurable. If your are upgrading from v2, you will need to either change the id in your html file, or use the renderTarget
configuration option to set the renderTarget id to react-app
.
1 renderWithSSR(<App />, { 2 renderTarget: 'react-app', 3 });
Upgrading from v3 to v4
Update to react-router-dom
to v6
Install
-
First install NPM dependencies
npm install --save react react-dom react-router-dom react-helmet
-
Install
communitypackages:react-router-ssr
meteor add communitypackages:react-router-ssr
For
react-router-dom
v5 use v3communitypackages:react-router-ssr
.For
react-router-dom
v6 use v4communitypackages: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.-
renderTarget
- A string specifying theid
of the element to render your app into. Default isreact-target
-
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 renderTarget: 'react-app', 12 storeOptions: { 13 rootReducer, 14 initialState: { counter: 100 }, 15 middlewares: [thunk, logger] 16 } 17});
-
Usage ⚙️
By default this package renders your app into an HTML element with an id of react-target
, so add one to your main HTML file for your project like so, or specify a different id using the renderTarget
option
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-target"></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 { useTracker } from "meteor/react-meteor-data"; 3 4import React from "react"; 5import { Route, Routes } from "react-router-dom"; 6import DashboardPage from "./imports/ui/pages/dashbaord"; 7import ProfilePage from "./imports/ui/pages/profile"; 8import LoginPage from "./imports/ui/pages/login"; 9 10const App = () => { 11 const { user } = useTracker(() => ({ 12 user: Meteor.user() 13 })); 14 if (user) { 15 return ( 16 <Routes> 17 <Route exact path="/" element={DashboardPage} /> 18 <Route path="/profile/:username" element={ProfilePage} /> 19 </Routes> 20 ); 21 } 22 23 return <LoginPage />; 24}; 25 26renderWithSSR(<App />);
Styled Components 💅
If the styled-components package is installed in your project, this package will detect it is present, create a new ServerStyleSheet
, collect all styles, and use them to render your app.