Skip to content

Commit 64ec131

Browse files
committed
Update readme
1 parent 3596310 commit 64ec131

File tree

1 file changed

+11
-13
lines changed

1 file changed

+11
-13
lines changed

README.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,10 @@
77
[![Build Status](https://travis-ci.org/styfle/react-server-example-tsx.svg?branch=master)](https://travis-ci.org/styfle/react-server-example-tsx)
88

99
A complex example of how to do server-side rendering with
10-
[React](http://facebook.github.io/react/) and [TypeScript](https://www.typescriptlang.org/) so that component code can be shared between server and browser (also known as isomorphic javascript). SSR leads to fast initial page loads, search-engine-friendly pages, and of course...its all type safe!
10+
[React](http://facebook.github.io/react/) and [TypeScript](https://www.typescriptlang.org/) so that component code can be shared between server and browser (also known as isomorphic javascript).
1111

12-
## Prior art
13-
14-
Based on prior work found at [mhart/react-server-example](https://github.com/mhart/react-server-example). It's very good so you should check it out :)
12+
Server-Side Rendering (SSR) leads to fast initial page loads, search-engine-friendly pages, and of course...its all type safe!
1513

16-
Additionally, I use a combination between [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html#create-a-webpack-configuration-file) and [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader#configuration) when I switched from browserify14 to webpack2.
1714

1815
## Getting Started
1916

@@ -30,16 +27,17 @@ Then navigate to http://localhost:3007 and click on the buttons to see some reac
3027

3128
## Preventing XSS
3229

33-
In the example data, there is a xss attack that would normally break when attempting to generate html on the server. The original code from `mhart` attempts to sanitize the input with the following:
30+
The original code from `mhart` attempts to [sanitize the props](https://github.com/mhart/react-server-example/blob/feada6183fe2fbb1a746492e157febe49eeafdcd/server.js#L106) by escaping and then inserting into a `<script>` tag.
3431

35-
```js
36-
function safeStringify(obj) {
37-
return JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\!--')
38-
}
39-
```
40-
41-
Instead of writing the data in a script tag, I opted for doing *1 extra http request* to fetch the data props as json before initializing react in the browser. Note that this means click handlers will not be initialized until the data is returned and React can pick up where it left off after the server-server render and attach the click even handlers.
32+
I avoided this by performing *1 extra http request* to fetch the props as json before initializing React in the browser. This means that click handlers will not be initialized until the data is returned and React can pick up where it left off after the server-side render and attach the click even handlers. This is the purpose of `ReactDOM.hydrate`.
4233

4334
See [browser.tsx](https://github.com/styfle/react-server-example-tsx/blob/master/src/browser.tsx) for the client-side code.
4435

4536
See [server.tsx](https://github.com/styfle/react-server-example-tsx/blob/master/src/server.tsx) for the server-side code.
37+
38+
39+
## Prior art
40+
41+
Based on prior work found at [mhart/react-server-example](https://github.com/mhart/react-server-example). It's very good so you should check it out :)
42+
43+
Additionally, I use a combination between [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html#create-a-webpack-configuration-file) and [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader#configuration) when I switched from browserify v1.4.x to webpack v2.0.x (now webpack v3.x).

0 commit comments

Comments
 (0)