React使用Next.js作服务器端渲染

React使用Next.js作服务器端渲染

内容包含

• 什么是React服务端渲染，为什么
• 解决React SEO
• 是否需要服务端渲染
• 使用Next.js实现React的服务端渲染,基本语法
  
  • Next.js简介
  • 安装
  • getInitialProps
  • jsx style
  • static静态目录
  • 两种路由方式
  • 自定义Head组件
• 引入Ant design
• 动态导入示例
• 静态导出
• 缓存
• Next.js整合dva

什么是React服务端渲染，为什么

• 服务端渲染（Server side rendering）,是指通过服务器执行React页面的渲染和生成，并返回给客户端静态的HTML页面。
• 服务端渲染主要优势：
  
  • SEO
  • 首屏渲染友好
  • 速度相对快

解决React SEO

使用React编写出来的程序是单页的应用程序，前端请求会都是一个html模板，对于信息分发类或者公众网站来说致命，SEO无法优化，搜索引擎无法找到网站想要分发出去的东西。使用服务端渲染每一个路径都会返回不同的html，包含不同的head，可以对其进行SEO优化。实际上React更适合制作后台系统，软件服务，无需被搜索引擎抓取，如果非必要，也可以选择使用传统的开发方法。

使用Next.js实现React的服务端渲染,基本语法

• Next.js简介：

  他是服务端渲染和静态导出React程序的框架。Next.js

  下载演示demo：github

• 安装

  • npm install next –save

  • package.json中添加script命令

    "scripts": {
        "dev": "node .",
        "build": "next build && next export",
        "preexport": "npm run build",
        "export": "next export",
        "prestart": "npm run export",
        "start": "serve out"
      }
    

  • 创建pages目录

• getInitialProps

  • Next改变了组件的getInitialProps方法，传入了一个上下文对象，这个对象在服务端和客户端时候有不同的属性。因此可以在组件中处理上下文对象。

    import React from 'react'
    export default class extends React.Component {
      static async getInitialProps ({ req }) {
        console.log(req);
        return req
          ? { userAgent: req.headers['user-agent'] }
          : { userAgent: navigator.userAgent }
      }
      render () {
        return <div>
          show userAgent: {this.props.userAgent}
        </div>
      }
    }
    

  • 另一方面getInitialProps还会被用来获取数据。

    import { Component } from 'react'
    import Head from 'next/head'
    import fetch from 'isomorphic-fetch'
    import Post from '../components/post'
    
    e