diff --git a/examples/server-rendering/README.md b/examples/server-rendering/README.md new file mode 100644 index 0000000000..b80177a6bf --- /dev/null +++ b/examples/server-rendering/README.md @@ -0,0 +1,44 @@ +# React server rendering example + +This example demonstrates how React's server rendering works. Rather than demonstrate a pure-Node solution, this example shows how an app not written in JavaScript (in this case, PHP) can utilize React's server rendering capabilities. + +## Overview + +You generally start a React app by doing something like this: + +```javascript +React.renderComponent(MyComponent({someData: ...}), document.getElementById('someContainer')); +``` + +The problem is that `someContainer` will be an empty HTML element until the JavaScript downloads and executes. This is bad for page load performance (since the user can't see anything until the JS downloads and executes) and is bad for SEO (since the Googlebot can't see any content). React's server rendering solves this problem -- it lets you fill `someContainer` with *static HTML* on the server and "bring it to life" on the client *without* throwing out and re-creating the HTML. + +In order to do this, you need to do a few things. You need to be able to run JavaScript on the server, and you need to be able to bundle that JavaScript code and send it down to the browser. This example provides one architecture, but there are many ways to do it. + +## Architecture overview + +Let's augment an existing PHP app to support server rendering. This architecture runs an Express-based Node web service to run the JavaScript server side. PHP simply uses `file_get_contents()` to send an HTTP request to this service to get the static HTML string. + +Browserify is used to run the same code that Node.js is running inside of the browser (aka "isomorphic" JavaScript). + +``` ++-------------+ +------------------+ +----------------------+ +| | | | ---- HTTP request (module, props JSON) ---> | | +| The browser | <---> | Existing PHP App | | Node.js react server | +| | | | <--- HTTP response (static HTML string) --- | | ++------+------+ +------------------+ +----------------------+ + ^ ^ + | | + | +------------------+ +-----------+----------+ + | | | | | + +--------------+ Browserify | <--------------------------------------------+ App code (CommonJS) | + | | | | + +------------------+ +----------------------+ +``` + +## How to run the demo + + * `npm install` from `jsapp/` and `reactserver/`. + * Run `browserify` by doing `npm run build` inside `jsapp/`. This will generate a `webapp/static/bundle.js` file. + * Run the node server by doing `npm start` inside `reactserver/`. + * Finally, open `index.php` in your browser (on a webserver running PHP, of course). View-source to see the rendered markup. + * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work. \ No newline at end of file diff --git a/examples/server-rendering/jsapp/package.json b/examples/server-rendering/jsapp/package.json new file mode 100644 index 0000000000..126ba5c94a --- /dev/null +++ b/examples/server-rendering/jsapp/package.json @@ -0,0 +1,18 @@ +{ + "name": "example-js-app", + "version": "0.0.0", + "description": "", + "main": "index.js", + "scripts": { + "build": "browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Pete Hunt", + "license": "Apache 2", + "dependencies": { + "envify": "^1.2.1", + "react": "^0.10.0", + "browserify": "^3.38.0", + "reactify": "^0.10.0" + } +} diff --git a/examples/server-rendering/jsapp/src/App.js b/examples/server-rendering/jsapp/src/App.js new file mode 100644 index 0000000000..3df0ef7549 --- /dev/null +++ b/examples/server-rendering/jsapp/src/App.js @@ -0,0 +1,10 @@ +/** @jsx React.DOM */ +var React = require('react'); + +var App = React.createClass({ + render: function() { + return

Hello {this.props.name}!

; + } +}); + +module.exports = App; diff --git a/examples/server-rendering/reactserver/package.json b/examples/server-rendering/reactserver/package.json new file mode 100644 index 0000000000..0a28bf9828 --- /dev/null +++ b/examples/server-rendering/reactserver/package.json @@ -0,0 +1,18 @@ +{ + "name": "react-server", + "version": "0.0.0", + "description": "", + "main": "server.js", + "scripts": { + "start": "cd ../jsapp && node ../reactserver/server.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Pete Hunt", + "license": "Apache 2", + "dependencies": { + "envify": "^1.2.1", + "react": "^0.10.0", + "express": "^3.5.1", + "node-jsx": "^0.10.0" + } +} diff --git a/examples/server-rendering/reactserver/server.js b/examples/server-rendering/reactserver/server.js new file mode 100644 index 0000000000..f8766365fd --- /dev/null +++ b/examples/server-rendering/reactserver/server.js @@ -0,0 +1,21 @@ +var React = require('react'); +var express = require('express'); +var path = require('path'); + +// Transparently support JSX +require('node-jsx').install(); + +var app = express(); + +// All the render server does is take a CommonJS module ID and some JSON props +// in the querystring and return a static HTML representation of the component. +// Note that this is a backend service hit by your actual web app. Even so, +// you would probably put Varnish in front of this in production. +app.get('/', function(req, res){ + var component = require(path.resolve(req.query['module'])); + var props = JSON.parse(req.query['props'] || '{}'); + + res.send(React.renderComponentToString(component(props))); +}); + +app.listen(3000); diff --git a/examples/server-rendering/webapp/index.php b/examples/server-rendering/webapp/index.php new file mode 100644 index 0000000000..1b9769c9a3 --- /dev/null +++ b/examples/server-rendering/webapp/index.php @@ -0,0 +1,51 @@ +require(\'react\').renderComponent(require(' . + json_encode($module) . + ')(' . $props_json . '), ' . + 'document.getElementById(' . json_encode($container_id) . '))' . + ''; + + $container_markup = '
' . $server_markup . '
'; + + return $container_markup . $startup_code; +} +?> + + + + React server rendering example + + + + Welcome to the React server rendering example. Here is a server-rendered React component: + 'Pete')); ?> + + diff --git a/examples/server-rendering/webapp/static/NOTHING_HERE_YET b/examples/server-rendering/webapp/static/NOTHING_HERE_YET new file mode 100644 index 0000000000..c2f0daee25 --- /dev/null +++ b/examples/server-rendering/webapp/static/NOTHING_HERE_YET @@ -0,0 +1 @@ +Nothing to see here... yet! \ No newline at end of file