Finding and utilizing a technology stack for react isomorphic/universal projects has been a difficult process. I have spent a lot of time investigating the many boilerplate projects on github. These mostly non-opinionated projects receive a flurry of interest for a period of time then activity seems to wane. Clearly the idea is that the User will maintain and enhance the stack, but this can become a time consuming issue.

For my latest project that began in the spring of 2016 I utilized the CrocoDillon universal react redux boilerplate. I selected it because it was current, utilized react/redux/react-router and was easy to understand. It had a simple solution to preloading data: utilizing the react-router onEnter functionality. Unfortunately I don’t see further updates or activity on the project at this point. Such appears to be the world of github boilerplate/framework projects, things may look exciting initially and then interest is lost or perhaps the author becomes too busy.

On the other hand there are more extensive frameworks that receive continuous activity. After almost a year of working with a “boilerplate” I am ready to migrate to a more opinionated framework as I don’t wish to be the sole maintainer of the technology stack, although I still like to pick my poison. At this point I have found two react isomorphic/universal frameworks that are clearly supported and continually updated.

Redfin’s react-server which is the server behind some portions of the Redfin real estate site. A real estate website is a perfect example of the need for an isomorphic/universal approach as thousands of cities/neighborhoods/markets need to be indexed to appear on google. react-server not a boilerplate but instead a complete framework that is heavily supported and well documented. Yet core support is lacking: The listen directive has precious little documentation yet is a fundamental component. Nonetheless, the github react-server project has enormous activity and support through many authors. A drawback is that it utilizes Yahoo routr and it’s RootContainer/RootElement approach is certainly different and poorly documented.

The github author Nikolay who appears to be out of Moscow, Russia has a different approach. This is the author of webpack-isomorphic-tools which is used in many react-isomorphic projects. That project has been improved with universal-webpack that is employed along with react-isomorphic-render as framework components that are used together as with this sample project. Investigating the activity of the project shows it is well maintained and actively supported by the author. Documentation is extensive as is github activity. Certainly a smaller framework then Redfin’s react-server, it offers a “settings” approach with it’s integrated server, a packaged approach to redux action creators and reducers and other “integrated” features. One important feature is the Page preloading that will load data before the page is rendered – a prime requirement.

So which to use? Both are actively supported and employ the latest development features. If your goal is a solid framework foundation backed by a large company then Redfin’s react-server is the easy choice. If you like react-router and a more standard approach to react/redux then universal webpack and react isomorphic render might be choices worth considering. At any rate I will be posting an update with more insight as I port the Databreeze project to one of these platforms.