React-ssr

1、什么是服务端渲染

1.1 服务端渲染

页面上的内容是有服务器生产的

  1. cnpm i express -S
  1. let express = require('express')
  2. let app = express();
  3. app.get('/',(req,res)=>{
  4.   res.send(`
  5.     <html>
  6.       <body>
  7.         <div id="root">hello</div>
  8.       </body>
  9.     </html>
  10.   `)
  11. })
  13. app.listen(3000,function(){
  14.     console.log(`server started at port 3000`);
  15. })

1.2 客户端渲染

页面内容由浏览器加载脚本代码

  1. let express = require('express');
  2. let app = express();
  3. app.get('/',(req,res)=>{
  4.   res.send(`
  5.     <html>
  6.       <body>
  7.         <div id="root"></div>
  8.         <script>
  9.            document.getElementById('root').innerHTML = 'hello1'
  10.         </script>
  11.       </body>
  12.     </html>
  13.   `)
  14. })
  16. app.listen(3000,function(){
  17.     console.log(`server started at port 3000`);
  18. })

2、配置路由

router.js

  1. import React,{ Component, Fragment } from 'react'
  2. import { Route } from 'react-router-dom'
  4. import Home from './containers/Home'
  5. import Counter from './containers/Counter'
  7. export default (
  8.     <Fragment>
  9.         <Route path="/" exact component={Home}/>
  10.         <Route path="/counter" exact component={Counter}/>
  11.     </Fragment>
  12. )

Client/index.js

  1. import React, { Component, Fragment } from "react";
  2. import ReactDOM from "react-dom";
  3. import routes from "../router";
  4. import { BrowserRouter } from "react-router-dom";
  5. import Header from "../components/Header";
  6. import { Provider } from "react-redux";
  7. import { getClientStore } from "../store";
  8. ReactDOM.hydrate(
  9.   <Provider store={getClientStore()}>
  10.     <BrowserRouter>
  11.       <Fragment>
  12.         <Header />
  13.         <div className="container" style={{ marginTop: 70 }}>
  14.           {routes}
  15.         </div>
  16.       </Fragment>
  17.     </BrowserRouter>
  18.   </Provider>,
  19.   document.getElementById("root")
  20. );

Server/render.js

  1. import React, { Component, Fragment } from "react";
  2. // import Home from "../containers/Home";
  3. // import Counter from "../containers/Counter";
  4. import { StaticRouter } from "react-router-dom";
  5. import { renderToString } from "react-dom/server";
  6. import routes from "../router";
  7. import Header from "../components/Header";
  8. import { Provider } from "react-redux";
  9. import { getServerStore } from "../store";
  11. export default function (req, res) {
  12.   // var html = renderToString(<Counter/>)
  13.   var html = renderToString(
  14.     <Provider store={getServerStore(req)}>
  15.       <StaticRouter context={{}} location={req.path}>
  16.         <Fragment>
  17.           <Header />
  18.           <div className="container" style={{ marginTop: 70 }}>
  19.             {routes}
  20.           </div>
  21.         </Fragment>
  22.       </StaticRouter>
  23.     </Provider>
  24.   );
  25.   console.log(html);
  26.   res.send(`
  27.     <html>
  28.         <head>
  29.         <title>React-SSR</title>
  30.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  31.         </head>
  32.         <body>
  33.         <div id="root">${html}</div>
  34.         <script></script>
  35.         <script src="/client.js"></script>
  36.         </body>
  37.     </html>`);
  38. }

3、配置redux

Store/index.js

  1. import {createStore, applyMiddleware , combineReducers} from 'redux';
  2. import thunk from 'redux-thunk';
  3. import logger from 'redux-logger';
  4. import reducers from './reducers';
  6. export function getClientStore(){
  7.     return createStore(reducers,applyMiddleware(thunk,logger))
  8. }
  10. export function getServerStore(){
  11.     return createStore(reducers,applyMiddleware(thunk,logger))
  12. }

4、请求接口

api/server.js

  1. let express = require('express');
  2. let bodyParser = require('body-parser');
  3. let session = require('express-session');
  4. let app = express();
  6. // 如果浏览器不直接访问 API 接口服务器，那么就不存在跨域的问题，node 服务器访问 API 接口服务器不存在跨域问题
  8. app.use(bodyParser.urlencoded({extended: true}));
  9. app.use(bodyParser.json());
  10. app.use(session({
  11.     saveUninitialized: true,
  12.     resave: true,
  13.     secret: 'react-test'
  14. }));
  16. let users = [{id: 1, name: 'user1'}, {id: 2, name: 'user2'}];
  17. app.get('/api/users', function (req, res) {
  18.     res.json(users);
  19. });
  21. app.post('/api/login', function (req, res) {
  22.     let user = req.body;
  23.     req.session.user = user;
  24.     res.json({
  25.         code: 0,
  26.         data: {
  27.             user,
  28.             success: '登录成功!'
  29.         }
  30.     });
  31. });
  33. app.get('/api/logout', function (req, res) {
  34.     req.session.user = null;
  35.     res.json({
  36.         code: 0,
  37.         data: {
  38.             success: '退出成功!'
  39.         }
  40.     });
  41. });
  43. app.get('/api/user', function (req, res) {
  44.     let user = req.session.user;
  45.     if (user) {
  46.         res.json({
  47.             code: 0,
  48.             data: {
  49.                 success: '获取用户信息成功!',
  50.                 user
  51.             }
  52.         });
  53.     } else {
  54.         res.json({
  55.             code: 1,
  56.             data: {
  57.                 error: '用户未登录!'
  58.             }
  59.         });
  60.     }
  61. });
  63. app.listen(4000);

Store/action/home.js 客户端axios请求

  1. import * as types from "../action-types";
  2. import axios from "axios";
  4. export default {
  5.     getHomeList() {
  6.       // 这里使用 redux-thunk 中间件
  7.       return function (dispatch, getState, request) {
  8.         return axios.get("http://localhost:4000/api/users").then(function (result) {
  9.           let list = result.data;
  10.           dispatch({
  11.             type: types.SET_HOME_LIST,
  12.             payload: list,
  13.           });
  14.         });
  15.       };
  16.     },
  17.   };

服务端接口数据的获取

5、启动

  1. npm run dev

6、问题

  • 解决跨域
    1、不是更好的方式 直接访问api不合理 后端改了要改地址 不好做权限设置，更好的方式是node做接口转发 

    1. let cors = require('cors');
    2. app.use(cors({
    3.  origin:'http://localhost:3000'
    4. }));
    1. 2、node代理添加node中间层
    3. server.js
  1. // 如果是服务器端请求数据，则直接访问 API 服务器的 4000 端口
  2. // 如果是客户端请求数据，则要访问 node 服务器（中间层）的 3000 端口
  3. // 让 node 服务器帮我们访问 API 服务器的 4000 端口请求数据
  4. // 总结：客户端向 node 服务器请求数据，node 服务器转发给 API 服务器
  5. // 如果浏览器不直接访问 API 接口服务器，那么就不存在跨域的问题，node 服务器访问 API 接口服务器不存在跨域问题
  6. // 如果访问的路径是以 /api 开头的，会交给代理服务器处理
  7. / /api/users => http://127.0.0.1:4000/api/users
  8. app.use('/api', proxy('http://127.0.0.1:4000', {
  9.   proxyReqPathResolver(req) {
  10.     return `/api${req.url}`;
  11.   }
  12. }));

Store/index.js

在readux-thunk中传入不同的客户端和服务端的request

  1. export function getClientStore(){
  2.     let initState = window.context.state;
  3.     return  createStore(reducers,initState,applyMiddleware(thunk.withExtraArgument(ClientRequest),logger))
  4. }
  1. import axios from 'axios';
  3. // 如果是服务器端请求数据，则直接访问 API 服务器的 4000 端口
  4. // 如果是客户端请求数据，则要访问 node 服务器（中间层）的 3000 端口
  5. // 让 node 服务器帮我们访问 API 服务器的 4000 端口请求数据
  7. // 创建一个 axios 的实例, 配置 baseURL 的基准路径
  8. export default axios.create({
  9.     baseURL: '/'
  10. });
  • 难点怎么匹配路由获取对应的接口数据
    将路由改成配置项的方式
    ```javascript // 集中式路由 export default [ [
    1.  {
    2.      path: '/',
    3.      component: Home,
    4.      exact: true,
    5.      key: '/',
    6.      // 加载数据，如果此配置项有了这个属性，那么意味着需要加载异步数据
    7.      loadData: Home.loadData
    8.  },
    9.  {
    10.      path: '/counter',
    11.      component: Counter,
    12.      key: '/counter'
    13.  }
    ] ]

// export default ( // // // // // )

  2.        服务端获取数据， 通过路由中的loadData加载一个方法，执行调用页面接口，将数据放到window.context上面，在客户端的store中将页面初始值放到这里
  4. ```javascript
  5. export function getClientStore(){
  6.     let initState = window.context.state;
  7.     return createStore(reducers,initState,applyMiddleware(thunk,logger))
  8. }

客户端页面调用的时候，如果有初始值就不要在调用接口

  1. // 注意：这里访问的是客户端的仓库
  2. if(this.props.list.length == 0){
  3.   this.props.getHomeList();
  4. }
  • 客户端服务端统一样式
    react-reater-config 模块 匹配多级路由 
  1. npm i   react-reater-config

import { renderRoutes , matchRoutes } from ‘react-reater-config’

  1. import { renderRoutes , matchRoutes } from 'react-reater-config'
  3. {/*
  4.   {routes.map((route, index) => (
  5.         <Route {...route} key={index} />
  6.   ))} 
  7. */}
  9. {renderRoutes(routes)}

App.js

  1. import React, { Component, Fragment } from "react";
  2. import { renderRoutes, matchRoutes } from "react-router-config";
  3. import Header from "../components/Header";
  4. class App extends Component {
  5.   render() {
  6.     //   console.log(this.props)
  7.     return (
  8.       <Fragment>
  9.         <Header />
  10.         <div className="container" style={{ marginTop: 70 }}>
  11.           {renderRoutes(this.props.route.routes)}
  12.         </div>
  13.       </Fragment>
  14.     );
  15.   }
  16. }
  18. export default App;

7、权限

注册登陆

登陆通过设置cookie的携带进行，设置axios的cookie值

server/request.js

  1. export default (req) => axios.create({
  2.     baseURL: 'http://localhost:4000',
  3.     headers: {
  4.         cookie: req.get('cookie') || ''
  5.     }
  6. });

Api/server.js 接口设置session

  1. let session = require('express-session');
  2. let app = express();
  3. // let cors = require('cors');
  4. // 如果浏览器不直接访问 API 接口服务器，那么就不存在跨域的问题，node 服务器访问 API 接口服务器不存在跨域问题
  5. app.use(bodyParser.urlencoded({extended: true}));
  6. app.use(bodyParser.json());
  7. app.use(session({
  8.     saveUninitialized: true,
  9.     resave: true,
  10.     secret: 'react-test'
  11. }));

server/index.js 设置正向代理

  1. // 如果是服务器端请求数据，则直接访问 API 服务器的 4000 端口
  2. // 如果是客户端请求数据，则要访问 node 服务器（中间层）的 3000 端口
  3. // 让 node 服务器帮我们访问 API 服务器的 4000 端口请求数据
  4. // 总结：客户端向 node 服务器请求数据，node 服务器转发给 API 服务器
  5. // 如果浏览器不直接访问 API 接口服务器，那么就不存在跨域的问题，node 服务器访问 API 接口服务器不存在跨域问题
  6. // 如果访问的路径是以 /api 开头的，会交给代理服务器处理
  7. // /api/users => http://127.0.0.1:4000/api/users
  8. app.use('/api', proxy('http://127.0.0.1:4000', {
  9.     proxyReqPathResolver(req) {
  10.         return `/api${req.url}`;
  11.     }
  12. }));

App.js 服务端通过App.loadData这个属性获取getUser这个方法，来判断是否登陆了

  1. App.loadData = function (store) {
  2.   return store.dispatch(actions.getUser());
  3. };
  5. // 设置重定向到首页
  6.  return this.props.user ? (
  7.    <div className="row">
  8.    <div className="col-md-6 col-md-offset-6">个人中心</div>
  9.    </div>
  10.  ) : (
  11.    <Redirect to="/login"/>
  12.  );

8、设置css样式

webapck.config.js

  1. // 服务端
  2. module:{
  3.   rules:[
  4.     {
  5.       test:/\.css$/,
  6.       use:[
  7.         'isomorphic-style-loader',
  8.         {
  9.           loader:'css-loader',
  10.           options:{
  11.             modules:true
  12.           }
  13.         }
  14.       ]
  15.     }
  16.   ]
  17. }
  18. // 客户端
  19. module:{
  20.   rules:[
  21.     {
  22.       test:/\.css$/,
  23.       use:[
  24.         'style-loader',
  25.         {
  26.           loader:'css-loader',
  27.           options:{
  28.             modules:true
  29.           }
  30.         }
  31.       ]
  32.     }
  33.   ]
  34. }

server/render.js 通过context收集css

  1. import React, { Component, Fragment } from "react";
  2. // import Home from "../containers/Home";
  3. // import Counter from "../containers/Counter";
  5. export default function (req, res) {
  6.   // css 代码进行收集
  7.    let context = { csses:[] };
  8.    // ...
  9.     let cssStr = context.csses.join("\n")
  10.     // ...
  11.     res.send(`
  12.             <html>
  13.                 <head>
  14.                     <title>React-SSR</title>
  15.                     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  16.                     <style type="text/css">${cssStr}</style>
  17.                 </head>
  18.                 <body>
  19.                 <div id="root">${html}</div>
  20.                 <script>
  21.                     window.context={
  22.                         state:${JSON.stringify(store.getState())}
  23.                     }
  24.                 </script>
  25.                 <script src="/client.js"></script>
  26.                 </body>
  27.             </html>`);
  28.   });
  29. }

withStyles.js. 设置高阶组件 通过 this.props.staticContext 让服务端拿到样式， 使样式和客户端渲染一致，解决刷新页面闪动的问题

  1. import React,{Component} from 'react';
  3. export default function withStyles(OriginalComponent,styles){
  4.     class ProxyComponent extends Component{
  5.         componentWillMount(){
  6.             if(this.props.staticContext){
  7.               // _getCss方法可以得到处理后的 css 源代码
  8.               this.props.staticContext.csses.push(styles._getCss());
  9.             }
  10.         }
  11.         render(){
  12.             return <OriginalComponent {...this.props}/>
  13.         }
  14.     }
  15.     return ProxyComponent;
  16. }

未完任务

  • 登陆和退出的相关跳转