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

使用reducer之后

我们现如今无法使用reducer来替代createStore来实现服务端的渲染!

  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>
        )
    }

原文地址:https://www.cnblogs.com/longlongdan/p/11316850.html

时间: 2024-10-07 16:52:05

react服务端渲染(九)proxy代理&&多级路由&&数据的脱水和注水的相关文章

react服务端渲染(同构)

学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对react组件进行解析并生成html字符串后返回视图页面. 后台为什么可以解析react组件?因为Node.js是一个Javascript运行环境,nodejs与javascript语法基本是相同的,所以nodejs可以正常解析react组件. 一.准备动作 1.安装nodejs与安装express 安

react服务端渲染框架

客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 服务端渲染 加载出来的就带有完整的html文档内容(同时带有数据) 流程: 浏览器发送请求 --> 服务器端运行react代码生成页面 --> 服务器端返回渲染的页 客户端渲染:react代码在浏览器上执行,消耗的是用户浏览器的性能 服务端渲染:react代码在服务器上执行,消耗的是服务器端的性能

React服务端渲染总结

欢迎吐槽 : ) 本demo地址( 前端库React+mobx+ReactRouter ):https://github.com/Penggggg/react-ssr.本文为笔者自学总结,有错误的地方恳请各位指出 O(∩_∩)O          序:前言.原因与思路.注意事项与问题.详解.       一.前言 为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该“按需”对页面进行渲染 ——“首次加载/首屏”

react服务端渲染(八)路由改写

每一个用户使用不同的store 请求发送axios/fetch,选择使用fetch进行异步请求的发送 在浏览器端可以直接使用fetch发送,无需安装.但是服务端会报error:fetch is not defined,因为fetch()是为浏览器设计的,然后在第三方模块中后端移植到node.js,所以需要安装node-fetch: import fetch from 'node-fetch' 定义常量保存字符串 避免错误难以发现 componentDidMount只会在客户端执行 服务端不执行,

react服务端渲染(七)redux添加

使用,添加一个redux-thunk中间件,支持异步action操作 import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import Router from '../router' import Rducer from '../reducer' const Store = createStore

React(0.13) 服务端渲染的两个函数

1.React.renderToString 函数,  参数是组件,返回一个字符串 <!DOCTYPE html> <html> <head> <title>React JS</title> <script src="../build_0.13/react.js"></script> <script src="../build_0.13/JSXTransformer.js"&g

react+redux教程(六)redux服务端渲染流程

教程目录 react+redux教程(一)connect.applyMiddleware.thunk.webpackHotMiddleware react+redux教程(二)redux的单一状态树完全替代了react的状态机? react+redux教程(三)reduce().filter().map().some().every()....展开属性 react+redux教程(四)undo.devtools.router react+redux教程(五)异步.单一state树结构.compo

react+laravel与服务端渲染的思考

1.首先 controller 几乎不写代码是不可能的.我现在就是 react.js 和 laravel 一起用,前后端完全分离的. 用 react.js 搭建前端视图,然后用 ajax 或者 fetch 来和 laravel 通信.laravel 写的接口代码几乎都在 controller 里面. 2.不要 react.js 和 laravel 的 blade 混写,要么要么完全分离,要么就完全用 blade 不然项目大一点痛苦就来了. 3.更不要想用 laravel 来服务端渲染 react

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换