https://github.com/jgliner/react-router-v4-redux-ssr
Walkthrough for SSR with rr@v4 and rrr@v5
https://github.com/jgliner/react-router-v4-redux-ssr
react react-router-config react-router-redux react-router-v4 redux server-side-rendering webpack3
Last synced: 3 months ago
JSON representation
Walkthrough for SSR with rr@v4 and rrr@v5
- Host: GitHub
- URL: https://github.com/jgliner/react-router-v4-redux-ssr
- Owner: jgliner
- License: mit
- Created: 2017-07-25T07:49:05.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-25T01:43:16.000Z (about 7 years ago)
- Last Synced: 2025-02-01T08:05:46.424Z (4 months ago)
- Topics: react, react-router-config, react-router-redux, react-router-v4, redux, server-side-rendering, webpack3
- Language: JavaScript
- Homepage:
- Size: 184 KB
- Stars: 57
- Watchers: 6
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Server-Side Rendering Walkthrough
### For:
[React Router v4](https://github.com/ReactTraining/react-router),
[react-router-redux v5](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-redux),
[React Router Config v1](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config)
A fully annotated Demo for SSR with rr@v4 and rrr@v5
Currently WIP
@TODO: Docs, unit tests
-----
### Installation
1) `git clone https://github.com/jgliner/react-router-v4-redux-ssr`
2) `cd react-router-v4-redux-ssr`
3) Install (`yarn` is recommended, but `npm install` works just as well)
------
### Development
`npm run dev` will start a `webpack-dev-server` on `localhost:3005`
- HMR is enabled
------
### Production
`npm run start` will:
1) Clear the `/dist` folder
2) Build, concat, and optimize the `webpack` bundle for production
3) Start production server on `localhost:3005`
------
### Things to Try
After you're up and running, a good way to see the benefits of SSR is to `curl -v localhost:3005/plusDataDeps` or any other route (with the exception of `/` or `/static`). You should see something very similar to the following:
```html
* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 3005 (#0)
> GET /plusDataDeps HTTP/1.1
> Host: localhost:3005
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: text/html; charset=utf-8
< Content-Length: 2208
< Connection: keep-alive
<
RR+RRR v4 Server-Side
Base
Static Page + External Data
foo -- bar
baz -- qux
quux -- corge
uier -- grault
garply -- waldo
< Back Home
window.INITIAL_STATE = {"apiData":{"foo":"bar","baz":"qux","quux":"corge","uier":"grault","garply":"waldo"},"apiDataWithParams":{},"currentPage":1,"dynamicApiData":{},"router":{"location":{"pathname":"\u002FplusDataDeps","search":"","hash":"","key":"8zz65g"}}};
* Connection #0 to host localhost left intact
```