You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/recipes/ServerRendering.md
+5-13Lines changed: 5 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -24,20 +24,15 @@ In the following recipe, we are going to look at how to set up server-side rende
24
24
25
25
### Install Packages
26
26
27
-
For this example, we’ll be using [Express](http://expressjs.com/) as a simple web server. We’ll include the [serve-static](https://www.npmjs.com/package/serve-static) middleware to handle static files, which we’ll see in just a bit.
28
-
29
-
We also need to install the React bindings for Redux, since they are not included in Redux by default.
27
+
For this example, we’ll be using [Express](http://expressjs.com/) as a simple web server. We also need to install the React bindings for Redux, since they are not included in Redux by default.
The following is the outline for what our server side is going to look like. We are going to set up an [Express middleware](http://expressjs.com/guide/using-middleware.html) using [app.use](http://expressjs.com/api.html#app.use) to handle all requests that come in to our server. We do the same with the `serve-static` middleware to be able to serve up our client javascript bundle. If you’re unfamiliar with Express or middleware, just know that our handleRender function will be called every time the server receives a request.
38
-
39
-
>##### Note on Production Usage
40
-
>In production, it’s better to serve static files using a server like nginx, and only use Node for handling application requests. However, this is out of scope of this tutorial.
35
+
The following is the outline for what our server side is going to look like. We are going to set up an [Express middleware](http://expressjs.com/guide/using-middleware.html) using [app.use](http://expressjs.com/api.html#app.use) to handle all requests that come in to our server. If you’re unfamiliar with Express or middleware, just know that our handleRender function will be called every time the server receives a request.
41
36
42
37
##### `server.js`
43
38
@@ -53,9 +48,6 @@ import App from './containers/App';
53
48
constapp=Express();
54
49
constport=3000;
55
50
56
-
// Use this middleware to serve up static files built into the dist directory
// This is fired every time the server side receives a request
60
52
app.use(handleRender);
61
53
@@ -102,7 +94,7 @@ The final step on the server side is to inject our initial component HTML and in
102
94
103
95
The `initialState` will then be available on the client side by accessing `window.__INITIAL_STATE__`.
104
96
105
-
We also include our bundle file for the client-side application via a script tag. The `serve-static` middleware included above will serve up this file. We’ll see what that file contains in just a bit.
97
+
We also include our bundle file for the client-side application via a script tag. This is whatever output your bundling tool provides for your client entry point. It may be a static file or a URL to a hot reloading development server.
106
98
107
99
```js
108
100
functionrenderFullPage(html, initialState) {
@@ -117,7 +109,7 @@ function renderFullPage(html, initialState) {
0 commit comments