基于React+Redux的SSR实现

  • 时间:
  • 浏览:1
  • 来源:uu快3官网pk10_uu快3官方邀请码_官网ios版

最后有另另另一个有用的命令,用于运行亲戚亲戚许多人的http服务器:

fetchUsers是有另另另一个异步函数,它通过Fetch API请求数据。当数据返回时,会分派users_fetch动作,从而通过reducer重新计算情况,而亲戚亲戚许多人的<App />事先连接到Redux从而被重新渲染。

亲戚亲戚许多人使用Storesubscribe土方法 来监听情况。当情况占据 变化——算是有任何用户数据被获取。事先users占据 ,亲戚亲戚许多人将unsubscribe(),事先 亲戚亲戚许多人就无需让相同的代码运行两次,因此亲戚亲戚许多人使用相同的存储实例转换为string。最后,亲戚亲戚许多人将标记输出到浏览器。

目前为止,亲戚亲戚许多人的服务端仅仅是返回了有另另另一个html骨架,而所有交互全在客户端完成。浏览器里能 先下载bundle.js后执行。而服务端渲染的作用假如有一天在服务器上执行所有操作并发送最终标记,而都不 把所有工作交给浏览器执行。React足够的聪明,里能识别出哪此标记。

还记得亲戚亲戚许多人在客户端做的以下事情吗?

今天亲戚亲戚许多人将构建有另另另一个使用Redux的简单的React应用应用程序,实现服务端渲染(SSR)。该示例包括异步数据抓取,这使得任务变得更有趣。

最后有另另另一个里能 优化的地方,假如有一天当事先取到users时,里能 阻止fetch

代码底部形态如下:

亲戚亲戚许多人在package.json里边加入以下有另另另一个命令脚本:

你就看,亲戚亲戚许多人使用componentWillMount来发送fetchUsers请求,componentDidMount为哪此非要用呢? 主要意味着是componentDidMount在服务端渲染过程中暂且会执行。

类似于于,亲戚亲戚许多人使用了Fetch API向后端发出异步请求,而服务端默认是不支持的。亲戚亲戚许多人里能 做的假如有一天在server.js中将Fetch导入:

亲戚亲戚许多人的页面中我我觉得有许多内容,但它假如有一天<div data-reactroot=""></div>。这暂且意味着应用程序出错了。这绝对是正确的。React我我觉得呈现了亲戚亲戚许多人的页面,但它只呈现静态内容。在亲戚亲戚许多人的组件中,亲戚亲戚许多人在获取数据事先哪此都那末 ,数据的获取是有另另另一个异步过程,在服务器上呈现时,亲戚亲戚许多人里能 考虑到这人 点。这假如有一天亲戚亲戚许多人的任务变得棘手的地方。这里能 归结为亲戚亲戚许多人的应用应用程序在做哪此。在本例中,客户端代码依赖于有另另另一个特定的请求,但事先使用redux-saga库,则事先是多个请求,事先事先是有另另另一个删剪的root saga。我意识到避免这人 问题图片的一种 土方法 :

<html>
          <head>
            <title>App</title>
            <style>
              body {
                font-size: 18px;
                font-family: Verdana;
              }
            </style>
          </head>
          <body>
            <div id="content"><div data-reactroot=""><p>Eve Holt</p><p>Charles Morris</p><p>Tracey Ramos</p></div></div>
            <script>
              window.__APP_STATE = {"users":[{"id":4,"first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"},{"id":5,"first_name":"Charles","last_name":"Morris","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"},{"id":6,"first_name":"Tracey","last_name":"Ramos","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"}]};
            </script>
            <script src="/bundle.js"></script>
          </body>
        </html>

concurrently库帮助并行运行多个应用程序,这正是亲戚亲戚许多人在监控更改时里能 的。

因此将这人 字符串加入到Express的响应里边,所以有服务端代码为:

亲戚亲戚许多人里能 保证代码能在服务端正常的运行。类似于于,访问Window对象,Node不提供Window对象的访问。

第一种 土方法 ,里能 亲戚亲戚许多人在两端做好情况管理。第二种土方法 里能 亲戚亲戚许多人在服务端使用许多额外的库或工具,来确保同一套代码能在服务端和客户端做相同的事情,我买车人比较推荐使用这人 土方法 。

reducer避免过程如下:

1、亲戚亲戚许多人明确知道请求的页面里能 哪此样的数据。亲戚亲戚许多人获取数据并使用该数据创建Redux存储。因此亲戚亲戚许多人通过提供已完成的Store来呈现页面,理论上亲戚亲戚许多人里能 做到。

实现的最关键一步假如有一天创建

,亲戚亲戚许多人将就看以下响应:

假设服务端返回以下的数据格式:

在开始英文英文编写应用事先,里能 亲戚亲戚许多人先把环境编译/打包环境配置好,事先亲戚亲戚许多人采用的是es6语法编写代码。亲戚亲戚许多人里能 将代码编译成es5代码在浏览器或node环境中执行。

总结下来有以下几点:

本文来源: 掘金 如需转载请联系原作者

store.subscribe土方法 返回有另另另一个函数,调用这人 函数就里能 解除监听

这假如有一天有另另另一个简单的案例,实际开发场景往往比这人 冗杂的多,里能 考虑的情况也会非常多,亲戚亲戚许多人的服务端渲染是为什么做的?

import ReactDOM from 'react-dom';

ReactDOM.render(
  <Provider store={ createStore() }><App /></Provider>,
  document.querySelector('#content')
);

当然,现在并那末 开始英文英文,客户端JavaScript他不知道服务器上占据 了哪此,也他不知道亲戚亲戚许多人事先对API进行了请求。亲戚亲戚许多人里能 通过传递Store的情况来通知浏览器,以便它里能接收它。

:

在这里里能 提的有另另另一个重点是,一旦亲戚亲戚许多人想实现服务端渲染,事先 们就里能 改变事先的纯客户端编程模式。

2、亲戚亲戚许多人删剪依赖于运行在客户端上的代码,计算出最终的结果。

亲戚亲戚许多人使用了相同的组件<App />和 store,不同之占据 于它返回的是有另另另一个字符串,而都不 虚拟DOM。

亲戚亲戚许多人使用客户端API接收异步数据,一旦Store获取到异步数据,亲戚亲戚许多人将触发ReactDOMServer.renderToString。它会提供给亲戚亲戚许多人已经 的标记。亲戚亲戚许多人的Express避免器是事先 的:

服务器端呈现是有另另另一个有趣一句话题。它有所以有优势,并改善了整体用户体验。它都不 提升你的单页应用应用程序的SEO。但这人 切暂且简单。在大多数情况下,里能 额外的工具和精心确定的api。

为哪此直接返回的是工厂函数而都不 createStore(reducer)?这是事先当亲戚亲戚许多人在服务器端渲染时,亲戚亲戚许多人里能 有另另另一个全新的Store实例来避免每个请求。

不使用node ./build/server/server.js而使用Nodemon的意味着是,它里能 监控亲戚亲戚许多人代码中的任何更改,并自动重新启动服务器。这人 点在开发过程会非常有用。

请求去改变应用情况,亲戚亲戚许多人里能 编写

服务器端渲染,也叫代码同构,也假如有一天同一份代码既能在客户端渲染,又能在服务端渲染。

亲戚亲戚许多人将用babelify转换来使用browserify和watchify来打包亲戚亲戚许多人的客户端代码。对于亲戚亲戚许多人的服务器端代码,亲戚亲戚许多人将直接使用babel-cli。

注意typeof window !== 'undefined',亲戚亲戚许多人里能 事先 做,事先这段代码也会在服务端执行,这假如有一天为哪此说在做服务端渲染里能 非常小心,尤其是全局使用的浏览器api的事先。

有了这人 文件,亲戚亲戚许多人里能 运行npm run start并访问http://localhost:30000。亲戚亲戚许多人就看数据获取成功,并成功的显示了。

为了能分派

服务端几乎相同:

有了里边的代码,亲戚亲戚许多人的组件事先里能 成功地在服务器端渲染。通过开发者工具,亲戚亲戚许多人里能 就看发送到浏览器的内容:

原文作者:感叹句

事先您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr

// App.jsx
import React from 'react';
import { connect } from 'react-redux';

import { getUsers } from './redux/selectors';
import { usersFetched } from './redux/actions';

const ENDPOINT = 'http://localhost:30000/users_fake_data.json';

class App extends React.Component {
  componentWillMount() {
    fetchUsers();
  }
  render() {
    const { users } = this.props;

    return (
      <div>
        {
          users && users.length > 0 && users.map(
            // ... render the user here
          )
        }
      </div>
    );
  }
}

const ConnectedApp = connect(
  state => ({
    users: getUsers(state)
  }),
  dispatch => ({
    fetchUsers: async () => dispatch(
      usersFetched(await (await fetch(ENDPOINT)).json())
    )
  })
)(App);

export default ConnectedApp;

为了演示方便,亲戚亲戚许多人首选Express作为http服务器。

事先重新启动服务器并打开相同的

亲戚亲戚许多人通过有另另另一个组件将数据渲染出来。在这人 组件的componentWillMount生命周期土方法 中,亲戚亲戚许多人将触发数据获取,一旦请求成功,亲戚亲戚许多人将发送有另另另一个类型为user_fetch的操作。该操作将由有另另另一个reducer避免,亲戚亲戚许多人将在Redux存储中获得更新。情况的改变将触发亲戚亲戚许多人的组件重新呈现指定的数据。