SSR React components on certain routes

Hello everyone,

We successfully upgraded to Meteor 3 recently at Orderlion - great job dear Meteor team with this, it worked really well!

We have certain pages/routes, where SEO and loading time really matter. For these few routes, we would love to use React SSR.

I made something like this work:

app.get('/my-ssr-route', (req, res) => {
  // const entryPoint = ['/client.js'];
  const { pipe, abort: _abort } = ReactDOMServer.renderToPipeableStream(
    <StaticRouter>
      <SSRAppRoot /> // this is just my test React component
    </StaticRouter>,
    {
      // bootstrapScripts: entryPoint,
      onShellReady() {
        res.statusCode = 200;
        res.setHeader('Content-type', 'text/html');
        pipe(res);
      },
      onShellError() {
        res.statusCode = 500;
        res.send('<!doctype html><p>Loading...</p>');
      }
    }
  );
});

The issue is this: I can not, in any way, hydrate the react components afterwards on the client. In other words: the page is completely static, no functionality whatsoever!

As I understand it, one needs to use the bootstrapScripts param to pass paths to basically bundled react client JS bundles to also have client functionality.

But how would I do this? Is there even a way to achieve this? Since there is no webpack in place or anything like that, which path would I put there? Any clever ideas anyone?! :slight_smile:

One more thing: we do NOT want to put the path to the one big meteor.js bundle there. This would defeat the whole purpose of having a quickly loading page, because the big bundle, obviously, contains our whole huge meteor app. This is not the point! We would like to somehow only bundle React and that one root component (and its children) to have React functionality on the client.

Thanks very much in advance everyone, best
Patrick

In an ideal scenario, the SSR pages should be served with code-splitting so the SSR routes have smaller bundles.

But since you are technically splitting your app into 2 (Meteor app and React app), it might be better to use Nextjs or Gatsby to serve your React SSR pages since you do not need Meteor functionalities for these pages.

I also want to use meteor v3 + react and have SSR but looks like the solution is to have another project just for that. I’ll keep using meteor for my dashboard and I’ll create another project with astro which will consume the same db as the meteor app.

SSR is possible with React 18 (canary version). The use function is available in upcoming React 19

Thanks everyone.

So, unfortunately, I need to create a separate app (.e.g with nextjs) and somehow manage the routing myself. I already feared that this would be the answer haha

Is there no other way in somehow maybe using webpack inside a meteor project to bundle React and the necessary components and then serve this bundle via bootstrapScripts?

You can use a prerendering service and remove this headache. With Ostrio (@dr.dimitru) 10.000 renders is cheaper than having your own Prerender server in AWS. I need my own prerender server because I need to prerender tens of thousands of pages (for social media previews and not for SEO).

https://ostr.io/info/pricing