Server Side Rendering for Meteor with FlowRouter and React

Today, I started to playing with React and I could be able to implement initial SSR support for React with Flow Router.

This version does server side route isolation and user does not need to worry about managing data state for SSR. Basically, you just write your app as usually and we’ll do the hard work for you.

Here’s a demo: http://flow-react-ssr.meteor.com/
Read this for detail info: Meteor Server Side Rendering Support with FlowRouter and React

5 Likes

Looks great, Arunoda!

1 Like

brilliant work! Are there significant loading improvements with this architecture?

For the loading side, it’s just like Fast Render, but it will work much better way.
But this is very good for SEO support.

If the build system allows us, we can send the component only needs for the client.
I hope Meteor is working on something like that.

This is exciting!
One question, would the page title, meta description, meta keywords be SSR too?
If so, how could I do it?

Use DocHead inside a react component or inside FlowRouter’s action. Then it’s automatic.

For that you need to use FlowRouter SSR.

I think I got it working!
I am using the package meteor-dochead and call DocHead inside getMeteorData() method
Thank you so much!

Edit: Another benefit I could gain, is the page still shows up even when JavaScript is disabled. That’s a big plus to Meteor.js

1 Like

@arunoda Is there an example on how to best use the DocHead package along with React SSR?

@arunoda How would SSR work with TrackerReact: https://github.com/ultimatejs/tracker-react where you can use client-side only Session variables in your render method?

There is no public documentation. But we will have soon.

You can simply use docHead anywhere in your react component which rendered on the server.

1 Like

You need to use something like ReactiveDict instead of Session.

That’s the easiest way to fix it.

1 Like

Nice, thanks for the quick response, will give it a shot :+1:

Hi Arunoda, my application uses quite a lot of jQuery on the client side. As such, when I try to install and run FlowRouter SSR it throws a number of errors, including ‘$ not defined’ and ‘cannot map undefined.’ My understanding is that these errors are because jQuery is not loaded/available on the server side.

I’ve tried two solutions for getting jQuery running on server side, both discussed here: http://stackoverflow.com/questions/26708437/require-jquery-in-meteor-server-side. I haven’t had luck with either.

Am I barking up the wrong tree? Is this possible with current version of FlowRouter SSR?

Hey, you need to write in a way it can be used both in server and client. Try to use the use of jQuery with react. If needed do it in the client. componentDidMount is a good place for that.

Thanks, that did the trick!

Also another issue popping up: infrequent 502 gateways from nginx. Not sure if anyone else has reported this. Wondering if it has to do with this error:

W20151210-14:47:02.505(2)? (STDERR) Error: Cannot cache a existing cahced page: /
W20151210-14:47:02.505(2)? (STDERR) at _class._cachePage (server/route.js:164:13)
W20151210-14:47:02.505(2)? (STDERR) at ServerResponse._injectHtml.res.write (server/route.js:86:16)
W20151210-14:47:02.506(2)? (STDERR) at Object.handle (packages/webapp/webapp_server.js:717:1)
W20151210-14:47:02.506(2)? (STDERR) at next (/root/.meteor/packages/webapp/.1.2.3.1r2qb00++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:190:15)
W20151210-14:47:02.506(2)? (STDERR) at next (/root/.meteor/packages/webapp/.1.2.3.1r2qb00++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:192:9)
W20151210-14:47:02.506(2)? (STDERR) at next (/root/.meteor/packages/webapp/.1.2.3.1r2qb00++os+web.browser+web.cordova/npm/node_modules/connect/lib/proto.js:127:23)
W20151210-14:47:02.507(2)? (STDERR) at middleware (packages/oauth/oauth_server.js:157:1)
W20151210-14:47:02.507(2)? (STDERR) at packages/oauth/oauth_server.js:146:1

Okay. That’s a bug.
Could you fire this on the GitHub. I’d like to work on it.