CODEWITHSUNDEEP
javascriptexpressreactjsserverside-javascriptreact-router
svnm
svnm

Reputation: 24388

Using Express for routing React Server side

Is it okay for a site to use Express for handling the routing when using Server side rendered React templates rather than React Router?

I am looking to use Fluxxor similar to this example for my components and stores/actions. Then I was planning to use Express router to handle the page routing server side, and on each route render the desired component to string. In this basic example below my app.js is a simple todo example using Flux but in production it would likely be a top level component appropriate for the routed page. e.g. /products would be a product component, with its subcomponents.

Here is my basic server.js file

var express = require('express');
var React = require('react');
var App = require('./app');

var app = express();
var port = 4580;

// include my browserify bundle.js
app.use('/public', express.static(__dirname + '/public'));

app.get('/', function(req, res) {
  /* each route will render the particular component to string. */
  var markup = React.renderToString(App());
  res.send(markup);
});

// I will seperate my views out like this
// app.get('/products', product.list);        
// app.get('/users', user.list);        
// app.get('/products:id', product.list);

My basic server side render approach is here if that helps.

So as I was saying, Is it okay to use Express for the routing, as I am finding React Rouuter to be quite complex, and it just seems easier to have routes on the server, and to render each page with its components server-side.

Am I losing anything else here other than the complexity of handling the routing in Express rather than React Router? As I think I can handle that, but want to make sure I haven't messed up the point of server side rendering with React by just using Express to render to string based on different routes.

Just to be clear, I'm okay with the issues which React Router aims to solve, and understand that I will be doing something similar to what was suggested in the React Router overview as being problematic in the long run.

// Not React Router API
otherRouter.route('/', function () {
  React.render(<DashboardRoute/>, document.body);
});

otherRouter.route('/inbox', function () {
  React.render(<InboxRoute/>, document.body);
});

otherRouter.route('/calendar', function () {
  React.render(<CalendarRoute/>, document.body);
});

While one level of shared UI like this is pretty easy to handle, getting deeper and deeper adds more complexity.

I am basically assuming that I can handle this complexity okay, whether that is true or not, I guess I will find out in time.

Upvotes: 4

Views: 1811

Answers (1)

Ben
Ben

Reputation: 1568

Sounds like you are trying to make your website isomorphic—rendering static markup on the server, attaching event listeners on the client.

The approach I use for my projects is embedding client-side javascript in the server-rendered string, so that the same props are passed down and re-rendering is not required on the client.

It seems to be very complicated to explain with only a few snippets of code, so check out this template I created for this purpose. There's also a tutorial about this topic here.

Upvotes: 3

Related Questions