附件下载：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
- 新建文件夹 next-ssr
- 初始化工程，进入next-ssr目录执行
npm init命令后一路回车 - 安装依赖
npm i next react react-dom axios --save --registry=https://registry.npm.taobao.org - 修改package.json文件的scripts为
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next build && next export"
},
- 新建目录和文件 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
-
npm run dev启动服务查看
启动服务
体验感受
Next.js用起来真的很简单，开箱即用，即使之前没接触过，也可以快速的开发部署React服务端渲染。基于文件系统的路由，不需要额外的配置，根据文件路径访问，清晰简洁。
适合从零开始的项目，老项目想改造还是很费力的。至于我的诉求“create-react-app搭建的项目，已经开发完成了，想改成服务端渲染”，改造成本更少的方式还有待探索。
其他
更详细的文档请查看：https://nextjs.frontendx.cn/docs
网友评论