How to export Component for server side rendering in React

Question

All:

I am pretty new to React, right now I am trying how to do server side rendering, I use Express.js as my server, so the code is like:

//server.js
var express = require("express");

var ReactDOMServer = require("react-dom/server");
var MyCom = require("./components"); 
var domstring = ReactDOMServer.renderToString(MyCom);

var app = express();
app.get("/", function(req, res){
    res.json({
        name: "new com",
        dom: domstring
    });
});

And

// components.js
var React = require("react");

var MyCom = React.createClass({
    render: function(){
        return (<h1>Hello, server side react</h1>);
    }
});

module.exports = MyCom;

I use babel to transpile the JSX, but when I start server, I do not know why I keep getting error like:

Invariant Violation: renderToString(): You must pass a valid ReactElement.

Could anyone give some clue why this not work?

Thanks

Jim O'Brien · Accepted Answer · 2016-01-12 19:00:00Z

8

Your module exports a ReactComponent, and renderToString accepts a ReactElement (i.e. an instantiated ReactComponent).

In order to render it, you want to instantiate it like so:

ReactDOMServer.renderToString(<MyCom />);

answered Jan 12, 2016 at 19:00

Jim O'Brien

2,53718 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kuan Over a year ago

thanks for reply. When I back to FB API, I realize it need to be a JSX style element too.

danielrvt Over a year ago

You can also do something like: reactDOM.renderToString(react.createFactory(componentFile)(), {}); And it should work when your component lives in a separate jsx file

danielrvt · Accepted Answer · 2016-03-30 15:15:06Z

2

Using a factory allows you to have all your components in separate files and instantiate them without using jsx syntax in your server. Very useful for the main wrapper component.

require('babel-core/register')({
  presets: ['react']
});

var express = require('express');
var reactDOM = require('react-dom/server');
var react = require('react');
var app = express();

app.get('/', function (req, res) {
  var mainFile = require('./app.jsx');
  var output = reactDOM.renderToString(react.createFactory(mainFile)({
    data: yourInitialData
  }));
  res.send(output);
});

edited Mar 30, 2016 at 15:15

answered Mar 30, 2016 at 14:20

danielrvt

11k21 gold badges86 silver badges129 bronze badges

Collectives™ on Stack Overflow

How to export Component for server side rendering in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related