Create-react-app: Simple server rendering

[brigand]

There have been some people asking for server rendering with node.js, but what if instead we did server rendering agnostic of the backend?

The idea is to create a UMD build which exports one function. The function takes some arguments and returns a renderToString result. The generated version of this entry point would be very simple, but it could be extended by the user to support react-router, redux, etc. They can add these things without ejecting, which is nice.

module.exports = (options) => ReactDOMServer.renderToString(<App data={options.data} />);

This bundle could be used in node.js with a simple require(), or loaded into phpv8 or similar and expose a global.

Building this bundle would be a separate build task with an optional watch mode. For node users, nodemon would pick up the bundle change and restart the server.

[viankakrisna]

this could be useful! I have already experimented with server rendering with create react app, but it's a little pain to setup. I end up wrapping each css imports with a helper function, and just included the generated css from the build script. (also need to be careful with browser globals). It would be handy if instead we have something like what @brigand said.

[gaearon]

I’d like to look at a proof of concept for this. PR?

[pugnascotia]

I would be interested in this too - my use case is performing SSR in Java using the Nashorn engine. However, since Nashorn doesn't have a module engine, I configure Webpack to export the bundle as a global. I export a render function from my entrypoint script, and call it from Nashorn.

• Exporting the render function
• Calling the render function on a global object

Here's an experiment for making this possible through CRA:

https://github.com/facebookincubator/create-react-app/compare/7408e3...pugnascotia:export-render-function?expand=1

Basically the user can opt-in to generating a library or module by adding config to their package.json, which is then picked up by the webpack production build. AFAICT there's no effect if the fields are undefined.

The diff shows a modified index.js as an example of switching between client and server rendering. I'm not sure about it though - we could leave the file as-is and add it to the requirements on the user if they want to use SSR.

Thoughts?

[gaearon]

Config is a bit of a no-go for me but if you inferred them from package.json project name and always set output to UMD I think we could do this.

[pugnascotia]

I've updated the branch to generate a library name and use UMD:

https://github.com/facebookincubator/create-react-app/compare/7408e3...pugnascotia:export-render-function?expand=1

The result is usable through require and through load in Nashorn (though it needs the patch in PR #1254), and the site still renders as before when running npm start.

[gaearon]

Send a PR?

[pugnascotia]

Will do, might be Monday though.

[andrezzoid]

Would love to see this in the next CRA version :+1:

[lokhmakov]

https://medium.com/@lokhmakov/full-isomorphic-create-react-app-ssr-npm-packed-shared-components-with-css-42809bed7317

[kireerik]

Hi all, I can highly recommend Razzle along with my Razzle Material UI Styled Example for those who need Server Side Rendering right now and the easy way.

[antonybudianto]

https://github.com/antonybudianto/cra-universal

No eject or code change needed! Also support code-splitting.

[pugnascotia]

These suggestions are interesting but they don't address the use-case of rendering outside of Node - in my case, using the Nashorn engine in Java. I can make it all work if I have a UMD build, which would be a very simple change.

[gaearon]

Going to close this.

If you want SSR, consider Next.js.

If you want static pre-rendering, consider Gatsby.

[koistya]

If you want CRA with SSR support, consider React App SDK, which uses CRA under the hood, just adds an ability to compile, run and test server-side code using regular CRA pipeline - npm start will compile and launch both client and server-side code bases.