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.

Install

First install NPM dependencies

npm install --save react@18 react-dom@18 react-router-dom@6 react-helmet@6

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});

useSubscribeSuspense(name, ...args) - A server enabled version of react-meteor-data's suspendable useSubscribe hook. Arguments are same as Meteor.subscribe.

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);