Communitypackages:react-router-ssr v6 beta release

copleykj · April 3, 2025, 3:13am

A fully working beta of communitypackages:react-router-ssr which is compatible with Meteor 3 has been published. This brings full server rendering in react to Meteor 3 with full data hydration and the ability to to server render components containing suspense boundaries.

A simple demo is available at https://github.com/copleykj/react-router-ssr-demo.

If you’re currently using this package, please upgrade and give it a test to help find any issues.

There’s still much to do such as React 19 compatibility. I’ll hold off on that till the next version though. If anyone wants to jump in and work on these kinds of updates, please do.

In the meantime if you appreciate this work and want to see it continue, you can sponsor it at https://github.com/sponsors/copleykj

minhna · April 3, 2025, 11:56am

Wow, that’s one awesome update.

copleykj · April 3, 2025, 12:25pm

Thanks @minhna. Hoping to have a stable release in the next week or so. I’ll be putting it through its paces by upgrading a client app that’s been waiting to upgrade to Meteor 3 and has been blocked by the compatibility of this package.

storyteller · April 16, 2025, 10:08am

Seriously need to get to try this out, but I’m on React 19, so I’ll have to see how that will be possible or not.

abyss · April 22, 2025, 8:43am

I just tested this and it works really good using react 18. However using the latest react-meteor-data@3.0.5-beta.0 it doesn’t load the data. Can you have a look what’s the problem?

nachocodoner · April 22, 2025, 9:11am

The community has made many improvements in react-meteor-data@3.0.5-beta.0, all backed by tests. Still, some scenarios might not behave as expected. Have you checked if it works with the previous stable version?

If it does, we should isolate your use case in the beta version so we can reproduce it in conjuntion with react-router-ssr in a test and include a fix with other updates in react-meteor-data. Could you provide more reproduction steps for them to fix? Or maybe the issue is on react-router-ssr side, we should verify.

A recent change was also merged and will be part of the next beta: perf(suspense): optimize handling of multiple suspense/useSubscribe by welkinwong · Pull Request #441 · meteor/react-packages · GitHub

abyss · April 22, 2025, 10:18am

It’s working with the current react-meteor-data stable version 3.0.3.
It can be replicated with copleykj’s react-router-ssr-demo. With the current stable react-meteor-data it loads all the links on the main page, with the new beta there are no links showing.

copleykj · April 23, 2025, 8:02pm

Are you using the useSubscribeSuspense hook provided by communitypackages:react-router-ssr?

abyss · April 26, 2025, 7:49am

Hi. Yes the useSubscribeSuspense is used here in the Info component:

github.com

copleykj/react-router-ssr-demo/blob/main/imports/ui/components/Info.jsx

import React from "react";
import { useFind } from "meteor/react-meteor-data/suspense";
import { useSubscribeSuspense } from "meteor/communitypackages:react-router-ssr";
import { LinksCollection } from "../../api/links";

function classNames (...classes) {
  return classes.filter(Boolean).join(" ");
}

export const Info = () => {
  const foreGroundColors = [
    "text-red-700",
    "text-orange-700",
    "text-rose-700",
    "text-yellow-700",
  ];
  const backgroundColors = [
    "bg-red-50",
    "bg-orange-50",
    "bg-rose-50",

This file has been truncated. show original

Try updating to the latest react-meteor-data with this command and you can replicate it as well:

meteor add react-meteor-data@4.0.0-beta.0

copleykj · April 30, 2025, 11:25am

This appears to be due to changes in the useFind suspense hook from the react-meteor-data package.

I’m working on understanding this issue and will hopefully resolve it soon.

copleykj · July 22, 2025, 3:56pm

Update

So after a lot of work and fighting with this I realized that there is just not a good way to get SSR working properly with React unless we fully embrace React’s rendering process. This requires bypassing Meteor’s default boilerplate and surrendering full HTML generation to React. To facilitate this we needed 2 things:

Access to the Express response object so we can pipe React’s rendered output to it.
Meteor not to generate its own boilerplate and pipe it to the response.

I’ve recently created this pull request on the meteor/meteor repository with changes to the webapp package which accomplish these 2 things and allow React to server render in the way that it’s API dictates.

Currently these changes are in review, but I’m hopeful that we might see them in a not so distant release. Once these changes are released I’ll release new major versions of fast-render and react-router-ssr and all will be right in the world of React SSR in Meteor once again (after probably several years). Notable things that this brings to the table

Why Is This Necessary

Previously the standard practice to server render React applications in Meteor was to use renderToString. For some time this was deprecated (not any longer it appears), and it does not support streaming, or awaiting data. This means our react-meteor-data integrations don’t work properly on the server, and we can’t use suspense boundaries on the server. Also since it doesn’t wait for data to return on rendering, fast-render never gathers the necessary data to send to the client resulting in incomplete population data in mini-mongo when the page loads.

What We Get Fully Embracing React’s Paradigm

isomorphic view rendering
Full use of Suspense and Error Boundaries
Use of React Router’s data routers, which enable things like scroll restore

Closing

Let me know what you guys think. This has been a long time coming, and I’m excited to possibly have proper support for SSR with React in Meteor again