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"
  },
  1. 新建目录和文件 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 (
      

React服务端渲染 Next.js 实例

测试接口返回数据:{this.props.data}
) } } export default index
  1. npm run dev启动服务查看
    启动服务

体验感受

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

其他

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

你可能感兴趣的:(React服务端渲染初体验(Next.js))