Coming back to the ReactRouter conversation, I personally don’t like the idea of tying my view tree to my URL hierarchy or passing through URL data through mixins and invisible context, but to each their own!
I was using flowrouter, but I decided to put some effort into reactrouter when I learned flowrouter relied on browserify(at least for now).
while I’m still exploring react router, I’m discovering
- doesn’t depend on meteor packages
- large userbase and community, it has a much stronger momentum, and is more likely to have support for edge cases I may encounter later
- I haven’t tested it yet, but according to thereactivestack/webpack there is a package called https://github.com/nfl/react-helmet which should help react-router-ssr with automatic wiring for SSR, although I don’t know if it is just as much a resource hog as it is said flowrouter ssr is, which I also haven’t gotten around to applying yet
I still use both, for different branches as I test and stay on top of various concepts and approaches, but yes if you learn flow-router, you can use it with both blaze and react.
- however, the edge case anticipation argument for choosing react, if you are on react and redux still holds, as there are likely more momentum to make sure you have a road ahead tomorrow as well.
1 Like
Okay. Let me update a bit about FlowRouter.
ReactRouter is mostly a UI router. It’s hard to use from JS.
It works pretty well. I used it for couple of apps (not production).
On the other hand, FlowRouter is router on JS. Just like Blaze, it can render React.
Feature wise, both are the same. Both address the the same problem in different ways.
FlowRouter SSR, we are using a pretty different approach for SSR. It understand meteor subscriptions and fetch the data needs.
React SSR is very CPU heavy. So, you must cache. FlowRouter comes with a built in cache.
You might say ReactRouter has a much larger base. So do we. We use a very mature project called page.js under the scene. FlowRouter is a wrapper around it.
But, if you are trying to switch from Meteor later on, you must use ReactRouter. Otherwise, FlowRouter is a good choice, because we try to get the benifit from a good Meteor integration.
About, split file loading. You don’t wanna worry much about it. With FlowRouter SSR, you could render your app to the user in first 100KB even before loading any JS. Try https://kadira.io
4 Likes
I haven’t tried it on Meteor yet (just nginx) but was just planning on using the Meteor package.
@arunoda Is there any way we can use FlowRouter + ReactLayout with npm React instead of Meteor’s React?
And if not, would you suggest using FlowRouter with React without ReactLayout? After reading the documentation, im not entirely sure how to approach rendering React layouts in Flow Router without ReactLayout. This is all related to Meteor 1.3-beta.* in case that makes any difference.
Both projects are Meteor specific, that’s why they are not NPM modules. Anyway, you can use them like this: How to get FlowRouter params in getMeteorData?
Then you don’t need to use ReactLayout inside your components. I assume then it’s fine.
1 Like
Instead of using ReactLayout, you can instead do ReactDOM.render() if I am understanding the original question correctly.
1 Like
Besides rendering the <Router> component to the root in Meteor.startup(), where else would I use ReactDOM.render()? I just want to make sure I’m understanding React Router correctly.
Edit: Or do you mean using FlowRouter, and replacing the ReactLayout.render() method with ReactDOM.render()?
Also, last time I tried to use FlowRouter it was with 1.3-beta-2, but perhaps it will work with 1.3-beta-3?
@SkinnyGeek1010 Do you have any videos that shows how to use Meteor, React, WebPack, FlowRouter or ReactRouter? I’m struggling to get either FR or RR to work.
1 Like
You can check out Ryans Swapp’s screencast on using Meteor with Flowrouter and React: https://www.youtube.com/watch?v=kVbVBp35keQ
1 Like
Ah sorry, I should have stated that. You said you were struggling to get ReactRouter working with Meteor and React. So I thought this video was the best way to get you started.
ah my bad
1 Like
Does this example work with meteor 1.3?
Can you share an example of how you use both?
SSR is not only about SEO. Pre rendered html will show up much faster than a cleint side rendered app. Its great outlined here :
https://donejs.com (scroll to : Better Performance)
This is true. However, if your HTML/CSS shows up much faster than your JavaScript (say 1+ seconds) then you have a new problem. Now the user can click on buttons that won’t do anything but frustrate the user.
IMHO keeping the initial JS payload down (even code splitting in large apps) and not serverside rendering markup is the best tradeoff for small/solo dev teams. The amount of engineering and extra CPU cycles needed for good SSR is very expensive.
You’ve probably seen this but figured I’d share for others. According to Ryan Florence, SSR with React is actually pretty slow. Interesting tweet thread https://twitter.com/ryanflorence/status/708361005441507328
1 Like
SSR is an art. It cost CPU a lot and it adds data fetching latency as well. So, you should focus on getting the smallest possible data in the server.
You can simply use React No SSR to stop rendering some of your components in SSR.
3 Likes