React-Router-SSR v6 with Mantine SSR
Simple isomorphic React SSR for Meteor with subscribed data re-hydration
Install
-
First install NPM dependencies
npm install --save react react-dom react-router-dom react-helmet
-
Install
hschmaiske:react-router-ssr
meteor add hschmaiske: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
1import { renderWithSSR } from "meteor/hschmaiske:react-router-ssr"; 2 3renderWithSSR(<App />, { 4 renderTarget: "react-app", 5});
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/hschmaiske: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 />);
Mantine
If the mantine package is installed in your project, this package will detect it's presence, collect all styles, and use them to render your app.
You need to make sure that you have all mantine packages installed:
@mantine/core @mantine/ssr @emotion/react @emotion/server