Repository navigation
Simple server rendering #1100
Description
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.
Activity
viankakrisna commentedon Nov 27, 2016
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 commentedon Dec 7, 2016
I’d like to look at a proof of concept for this. PR?
pugnascotia commentedon Dec 16, 2016
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.
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.jsas 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 commentedon Dec 16, 2016
Config is a bit of a no-go for me but if you inferred them from
package.jsonproject name and always set output to UMD I think we could do this.pugnascotia commentedon Dec 16, 2016
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
requireand throughloadin Nashorn (though it needs the patch in PR #1254), and the site still renders as before when runningnpm start.gaearon commentedon Dec 16, 2016
Send a PR?
pugnascotia commentedon Dec 16, 2016
andrezzoid commentedon Dec 28, 2016
Would love to see this in the next CRA version 👍
lokhmakov commentedon Apr 12, 2017
https://medium.com/@lokhmakov/full-isomorphic-create-react-app-ssr-npm-packed-shared-components-with-css-42809bed7317
kireerik commentedon Jun 11, 2017
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 commentedon Aug 27, 2017
https://github.com/antonybudianto/cra-universal
No eject or code change needed! Also support code-splitting.
pugnascotia commentedon Aug 29, 2017
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 commentedon Jan 8, 2018
Going to close this.
If you want SSR, consider Next.js.
If you want static pre-rendering, consider Gatsby.
koistya commentedon Feb 18, 2018
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 startwill compile and launch both client and server-side code bases.