React服务端渲染初体验（Next.js）

附件下载：next-ssr.zip

create-react-app搭建的项目，已经开发完成了，想改成服务端渲染，看了很多关于react服务端渲染的文章，对于怎么实现还是云里雾里的。先体验一下用Next.js实现服务端渲染吧。

客户端渲染和服务端渲染的区别

1. 客户端渲染（csr）

页面第一次访问时加载所有资源，由js解析生成dom

打开页面 -> 右键 -> 显示页面源代码，可以看到只有一个id为root的空div，内容由js控制渲染。

客户端渲染页面源代码

优点：

• 资源一次性加载，后续页面加载快，体验好
• 减轻服务器压力，与服务器只有ajax交互

缺点:

• 首次加载慢，经常被吐槽
• 不利于SEO，搜索引擎抓取到的就上面图片的内容（可以使用Rendora解决）

2. 服务端渲染（ssr）

服务器生成完整的html，前端直接展示

优点：

• 客户端只负责渲染html，首次加载快
• 对搜索引擎友好，利于SEO优化
• 页面渲染时与接口的交互在服务端完成，减少http请求提升速度（onClick等事件发的请求还在是客户端）

缺点:

• 增加服务器压力

上手Next.js

1. 新建文件夹 next-ssr
2. 初始化工程，进入next-ssr目录执行npm init命令后一路回车
3. 安装依赖 npm i next react react-dom axios --save --registry=https://registry.npm.taobao.org
4. 修改package.json文件的scripts为

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next build && next export"
  },

5. 新建目录和文件 pages/index.js

import React, { Component } from 'react'
import axios from 'axios'

export class index extends Component {
  static async getInitialProps() {
    const res = await axios.post('http://www.yocoder.cn:8080/test')
    console.log(res)
    return { data: JSON.stringify(res.data) }
  }

  render() {
    return (
      <div>
        <h2>React服务端渲染 Next.js 实例</h2>
        测试接口返回数据：{this.props.data}
      </div>
    )
  }
}
export default index

6. npm run dev启动服务查看
   启动服务

体验感受

Next.js用起来真的很简单，开箱即用，即使之前没接触过，也可以快速的开发部署React服务端渲染。基于文件系统的路由，不需要额外的配置，根据文件路径访问，清晰简洁。
适合从零开始的项目，老项目想改造还是很费力的。至于我的诉求“create-react-app搭建的项目，已经开发完成了，想改成服务端渲染”，改造成本更少的方式还有待探索。

其他

更详细的文档请查看：https://nextjs.frontendx.cn/docs