昨天leader给分配了新任务，让熟悉一下ssr，刚开始有点懵，啥玩意？百度了一下，不就是服务器端渲染(server side render,简称: ssr)。
ssr简介
服务端渲染一个很常见的场景是当用户（或搜索引擎爬虫）第一次请求页面时，用它来做初始渲染。当服务器接收到请求后，它把需要的组件渲染成 HTML 字符串，然后把它返回给客户端（这里统指浏览器）。之后，客户端会接手渲染控制权。
当在服务器使用 Redux 渲染时，一定要在响应中包含应用的 state，这样客户端可以把它作为初始 state。这点至关重要，因为如果在生成 HTML 前预加载了数据，我们希望客户端也能访问这些数据。否则，客户端生成的 HTML 与服务器端返回的 HTML 就会不匹配，客户端还需要重新加载数据。
把数据发送到客户端，需要以下步骤：
-
为每次请求创建全新的 Redux store 实例；
-
按需 dispatch 一些 action；
-
从 store 中取出 state；
-
把 state 一同返回给客户端。
在客户端，使用服务器返回的 state 创建并初始化一个全新的 Redux store。Redux 在服务端惟一要做的事情就是，提供应用所需的初始 state。
以上是官方文档对ssr及其一些操作的解释。对于半吊子配置水平的我来说，肯定要寻求最简便的替代方案啦！ so，强大的Next.js终于被扒出来了 。^_^
Next.js的原则和思想
- 不需要除 Next 之外，多余的配置和安装（比如 webpack，babel）；
- 使用 glamor 处理样式(不知道什么时候glamor的，请点这里)；
- 自动编译和打包；
- 热更新；
- 方便的静态资源管理；
- 成熟灵活的路由配置，包括路由级别 prefetching；
多说无益，我们来通过一个简单的demo熟悉一下Next.js。
Demo：英超联赛积分榜
相信所有的开发者都厌恶超长时间的安装和各种依赖、插件配置。不要担心，Next.js 作为一个独立的 npm package 最大限度的替你完成了很多耗时且无趣的工作。我们首先需要进行安装：
# 本地新建项目文件夹，并进行初始化 npm init # 安装Next、React及其它一些依赖 npm install next --save npm install react --save npm install react-dom --save
npm install axios --save
注：通过npm拉取的next依赖是最新的4版本，对于react的版本必须要求是在16以上（如果是16以下的react版本，请使用next版本2或3）
安装结束后，我们就可以开启脚本：
"scripts": { "start": "next" },
接下来所需要做的很简单，就是在根目录下创建一个 pages 文件夹（必须是根目录，文件夹名称必须是pages），并在其下新建一个 index.js 文件：
// ./pages/index.js import React from 'react' export default () => ( <h1>This is just so easy!</h1> )
启动项目：
npm start
效果是这样的：
为了验证是服务器端渲染，我们查看一下源码：
就是这么简单，清新。如果我们自己手段实现这一切的话，除了 NodeJS 的种种繁琐不说，webpack 配置，node_modules 依赖，babel插件等等就够折腾半天的了。
添加 Page Head
在 ./pages/index.js 文件内，我们可以添加页面 head 标签、meta 信息、样式资源等等：
// ./pages/index.js import React from 'react' import Head from 'next/head' export default () => ( <div> <Head> <title>League Table</title> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" /> </Head> <h1>This is just so easy!</h1> </div> )
这个 head 不是指真实的 DOM，别忘了 React 虚拟 DOM 的概念。其实这是 Next 提供的 Head 组件，不过最终一定还是被渲染成为真实的 head 标签。
发送 Ajax 请求
Next 还提供了 getInitialProps 方法，这个方法支持异步选项，并且是服务端/客户端同构的。我们可以使用 async/await 方式，处理异步请求。请看下面的示例：
import React from 'react' import Head from 'next/head' import axios from 'axios'; export default class extends React.Component { // 通过async/await异步操作getInitialProps static async getInitialProps () { const res = await axios.get('http://api.football-data.org/v1/competitions/426/leagueTable'); // 把请求的返回值作为属性值return出去 return {data: res.data} } }
这里使用了 axios 类库来发送 HTTP 请求。网络请求是异步的，因此需要在未来某个合适的时候（请求结果返回时）接收数据。这里使用先进的 async/await，以同步的方式处理，从而避免了回调嵌套和 promises 链。
将异步获得的数据返回，它将自动挂载在 props 上（注意 getInitialProps 方法名，不明白的客官可以翻看一下react生命周期），render 方法里便可以通过 this.props.data 获取：
import React from 'react'; import Head from 'next/head'; import axios from 'axios'; import Link from 'next/link'; export default class extends React.Component { static async getInitialProps () { const res = await axios.get('http://api.football-data.org/v1/competitions/426/leagueTable'); return {data: res.data} } render () { const logoStyle = { width: '30px' } return ( <div> <Head> <title>League Table</title> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" /> </Head> <div className="pure-g"> <div className="pure-u-1-3"></div> <div className="pure-u-1-3"> <h1>英超联赛</h1> <table className="pure-table"> <thead> <tr style={{lineHeight: '200%', textAlign: 'center'}}> <td style={{width: 50}}>排名</td> <td style={{width: 50}}>球队</td> <td>P</td> <td>GL</td> <td>W</td> <td>D</td> <td>L</td> <td style={{width: 50, lineHeight: '200%', textAlign: 'center'}}>操作</td> </tr> </thead> <tbody> {this.props.data.standing.map((standing, i) => { const oddOrNot = i % 2 == 1 ? "pure-table-odd" : ""; return ( <tr key={i} className={oddOrNot} style={{lineHeight: '200%', textAlign: 'center'}}> <td>{standing.position}</td> <td><img className="pure-img logo" src={standing.crestURI}/></td> <td>{standing.points}</td> <td>{standing.goals}</td> <td>{standing.wins}</td> <td>{standing.draws}</td> <td>{standing.losses}</td> <td><Link href=''>查看</Link></td> </tr> ); })} </tbody> </table> </div> <div className="pure-u-1-3"></div> </div> </div> ); } }
再访问3000端口看一下：
路由和页面跳转
也许你已经有所感知：我们已经有了最基本的一个路由。Next 不需要任何额外的路由配置信息，你只需要在 pages 文件夹下新建文件，每一个文件都将是一个独立的页面。
让我们来新建一个详情页面吧！新建 ./pages/details.js 文件：
import React from 'react' import Head from 'next/head' import Link from 'next/link' import axios from 'axios'; export default class extends React.Component { static async getInitialProps ({query}) { // 从query参数中回去id const id = query.id; //通过process的browser属性判断处于何种环境：Node环境下为false,浏览器为true if(!process.browser) { // 发送服务器请求 const res = await axios.get('http://api.football-data.org/v1/competitions/426/leagueTable') return { data: res.data, // 对查询的数据进行过滤和返回 standing: res.data.standing.filter(s => s.position == id) } } else { // 没有请求服务器的情况下在此使用缓存 const bplData = JSON.parse(sessionStorage.getItem('bpl')); // 对查询的数据进行过滤和返回 return {standing: bplData.standing.filter(s => s.position == id)} } } componentDidMount () { // 如果没有缓存，通过localStorage在本地缓存数据 if(!sessionStorage.getItem('bpl')) sessionStorage.setItem('bpl', JSON.stringify(this.props.data)) } render() { const detailStyle = { ul: { marginTop: '100px' } } return ( <div> <Head> <title>League Table</title> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" /> </Head> <div className="pure-g"> <div className="pure-u-8-24"></div> <div className="pure-u-4-24"> <h2>{this.props.standing[0].teamName}</h2> <img src={this.props.standing[0].crestURI} className="pure-img"/> <h3>Points: {this.props.standing[0].points}</h3> </div> <div className="pure-u-12-24"> <ul style={detailStyle.ul}> <li><strong>Goals</strong>: {this.props.standing[0].goals}</li> <li><strong>Wins</strong>: {this.props.standing[0].wins}</li> <li><strong>Losses</strong>: {this.props.standing[0].losses}</li> <li><strong>Draws</strong>: {this.props.standing[0].draws}</li> <li><strong>Goals Against</strong>: {this.props.standing[0].goalsAgainst}</li> <li><strong>Goal Difference</strong>: {this.props.standing[0].goalDifference}</li> <li><strong>Played</strong>: {this.props.standing[0].playedGames}</li> </ul> <div style={{marginLeft:30, marginTop: 120}}> <Link href="/">返回首页</Link> </div> </div> </div> </div> ) } }
这个页面根据 query 变量，动态展现出球队信息。具体来看，getInitialProps 方法获取 URL query id，根据 id 筛选出（filter 方法）展示信息。因为一支球队的信息比较稳定，所以在我们在客户端使用了 sessionStorage 进行存储。
别忘了我们的主页（排行榜页面）index.js 中，也要使用相应的 sessionStorage 逻辑。同时，在 render 方法里加入一条链接到详情页的 ：
<td><Link href={`/details?id=${standing.position}`}>查看</Link></td>
错误页面
在 Next 中，同样可以通过 error.js 文件定义错误页面。在 ./pages 下新建 error.js：
import React from 'react' export default class extends React.Component { static getInitialProps ({ res, xhr }) { const statusCode = res ? res.statusCode : (xhr ? xhr.status : null) return { statusCode } } render () { return ( <p>{ this.props.statusCode ? `服务器错误 ${this.props.statusCode}` : '客户端错误' }</p> ) } }
总结
这篇文章实现了一个简易 demo，只是介绍了最基本的 Next.JS 搭建 React 同构应用的基本步骤。
除此之外，Next 还有非常多的功能，非常多的先进理念可以应用。
- 比如 搭配 prefetch，预先请求资源；
- 再如动态加载组件（Next.js 支持 TC39 dynamic import proposal），从而减少首次 bundle size；
- 虽然它替我们封装好了 Webpack、Babel 等工具，但是我们又能 customizing，根据需要自定义。
扫一扫
7184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
