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.

Upgrading from v3 to v4

Update to react-router-dom to v6

Upgrading from v4 to v5

This package now requires React 18 and uses Data Routers from React Router v5. Because of this there are several modifications that you will need to make to your app to upgrade. Also support for Redux and Styled Components has been removed from this package. You will need to find a new way to support them in your app.

The following steps are things you may need to do to upgrade your app from using v4 to v5 of this package:

Update react to v18
Update react-router-dom to v6 if you haven't already
Install abort-controller with npm install abort-controller
Rewrite your root component to either be a JSX fragment containing <Route> components, or an array of Route object.
If you are using Redux or Styled Components, this package no longer has built in support for them. You will need to explore how to architect your app to support them.

Install

First install NPM dependencies

npm install --save react@18 react-dom@18 react-router-dom@6 react-helmet@6 abort-controller@3

Install communitypackages:react-router-ssr

meteor add communitypackages:react-router-ssr

Package Exports 📦

renderWithSSR(routes, [options]) - Isomorphic app rendering.

routes - A JSX element or array of JSX elements that represent the routes of your app.

options - An object of rendering options.

renderTarget - A string specifying the id of the element to render your app into. Default is react-target

1import { renderWithSSR } from "meteor/communitypackages:react-router-ssr";
2
3const AppRoutes = [
4  { path: "/", element: <Home /> },
5  { path: "/about", element: <About /> },
6]
7
8renderWithSSR(AppRoutes, {
9  renderTarget: 'react-app',
10});

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";
2
3import React from "react";
4import DashboardPage from "./imports/ui/pages/dashbaord";
5import ProfilePage from "./imports/ui/pages/profile";
6import LoginPage from "./imports/ui/pages/login";
7
8const AppRoutes = [
9  { path: "/", element: <DashboardPage /> },
10  { path: "/profile/:username", element: <ProfilePage /> },
11  { path: "/login", element: <LoginPage /> },
12];
13
14// Alternatively you can use a JSX fragment
15// const AppRoutes = (
16//   <>
17//     <Route path="/" element={<DashboardPage />} />
18//     <Route path="/profile/:username" element={<ProfilePage />} />
19//     <Route path="/login" element={<LoginPage />} />
20//   </>
21// );
22
23renderWithSSR(AppRoutes);