react服务端渲染（九）proxy代理&&多级路由&&数据的脱水和注水

 项目地址：git@github.com:longlongdan/Reactssr.git

1. 服务端渲染以后，客户端会再次渲染，由于咱们的客户端建立的store为空。解决办法：在服务端渲染的时候将获取到的数据赋值一个全局变量（注水），客户端建立的store以这个变量的值做为初始值（脱水）。

   const Store = createStore(Rducer,window.info,applyMiddleware(thunk));

2. 中间层代理转发，咱们的浏览器端渲染以前是直接发送'http://47.95.113.63/ssr/api/news.json?secret=PP87ANTIPIRATE'远程服务器上取数据，如今咱们须要，让他请求咱们本地的node服务器，node服务器去代理这个请求带远程服务器上面，

   //浏览器端发送代码 至关于请求的是localhost:3000/api/news...
   return fetch('/api/news.json?secret=PP87ANTIPIRATE')
        .then((res)=>{
            return res.json();
        })

   //后端proxy代理
   const proxy = require('http-proxy-middleware');
   app.use('/api',proxy({
       target: 'http://47.95.113.63/ssr'
   }))

   使用代理以后服务端异常，由于咱们服务端请求至关因而 ：服务端根路径+/api/news.json?secret=PP87ANTIPIRATE；因此咱们须要对服务端和浏览器端采用不一样的请求路径
   
   
3. （了解axios中instanse的写法 interceptors 概念）咱们使用的fetch，能够本身对fetch方法进行封装

   //客户端
   const baseUrl = '';
   const  fetchClient = (url) => {
       return fetch(baseUrl+url);
   }
   export default fetchClient;

   //服务端
   import fetch from 'node-fetch'
   
   const baseUrl = 'http://47.95.113.63/ssr';
   const fetchServer = (url) => {
       return fetch(baseUrl+url);
   }
   export default  fetchServer;

4. thunk的withExtraArgument的用法，为咱们中间件调用的时候传入额外的参数。fetch方法封装好以后咱们须要判断代码执行在浏览器端仍是服务端，解决办法是经过thunk中间件在建立store的时候将封装的fetch方法传进来。

   //客户端
   const Store = createStore(Rducer,window.info,applyMiddleware(thunk.withExtraArgument(fetchClient))); 
   
   //服务端
   const Store = createStore(Reducer, applyMiddleware(thunk.withExtraArgument(fetchServer)));

   发送请求的代码，会接受第三个参数，就是咱们自定义的额外参数

   export const getHomeList = (dispatch, getState, fetch) => {
       return fetch('/api/news.json?secret=PP87ANTIPIRATE')
        .then((res)=>{
            return res.json();
        })
   }

5. rnderRoutes对多级路由的区别 renderRoutes方法会去帮咱们渲染一级路由，而后将下一层的routes（二级路由）带进一级路由所匹配到的组件之中，咱们须要在一级路由匹配的组件里面再次调用renderRoutes方法对props.route.routes进行渲染

   //router.js
   export default [
       {
           path: '/',
           component: Header, //共用的header头部
           routes: [
               {
                   path: '/',
                   exact: true,
                   getData: Home.getData,
                   component: Home,
               },
               {
                   path: '/Login',
                   getData: ()=>{console.log('getData login')},
                   component: Login
               }
           ]
       }
   ]

   在header里面须要继续渲染二级路由

   const Header = (props) => {
       return (
           <div>
               <Link to='/'>Home</Link>
               <br/>
               <Link to='/Login'>Login</Link>
               { renderRoutes(props.route.routes) }
           </div>
       )
   }