Next.js服务器端渲染

学习目标

  • 了解Next.js的作用
  • 掌握Next.js中的路由
  • 掌握Next.js中布局组件的创建
  • 掌握Next.js中的静态文件服务
  • 掌握Next.js中获取页面数据的方法
  • 掌握Next.js中组件样式的书写
  • 使用Next.js完成豆瓣电影案例
  • 能够自定义头部元素head

2.1 什么是Next.js?

Next.js官网

Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护。

Next.js带来了很多好的特性：

  • 默认服务端渲染模式，以文件系统为基础的客户端路由
  • 代码自动分割使页面加载更快
  • 以webpack的热替换（HMR）为基础的开发环境
  • 使用React的JSX和ES6的module，模块化和维护更方便
  • 可以运行在Express和其他Node.js的HTTP 服务器上
  • 可以定制化专属的babel和webpack配置

使用服务器端渲染好处：

  • 对SEO友好
  • 提升在手机及低功耗设备上的性能
  • 快速显示首页

2.2 Next.js初体验

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

配置package.json中的scripts属性

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

此时npm run dev 会得到一个404页面

创建一个pages/index.js

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
)

export default Index

创建一个pages/next-route/teacher.js页面

const Teacher = () => (
  <div>
    <p>教师页面</p>
  </div>
)

export default Teacher

2.3 页面导航

2.3.1 路由跳转

  1. Link组件
  • Link组件内不能直接写文字，必须使用标签包裹，标签可以是任何标签，但是必须只能保证Link组件内只有一个子元素；
  • 给Link组件设置样式不会生效，因为Link组件是一个HOC（高阶组件），但是可以给它里面的子元素设置样式；
import Link from 'next/link'
<Link href="/teachers">
  <a>教师页面</a>
</Link>

组件<Link>可接收 URL 对象，而且它会自动格式化生成 URL 字符串。例如： 

<Link href={{pathname: '/teachers', query: {id: 1}}}>
  <a>教师页面</a>
</Link>
  1. 命名式路由
import Router from 'next/router'

export default () => (<div><span onClick={() => Router.push('/teacher')}>教师</span></div>)

URL对象语法：

Router.push({pathname: '/teacher', query: {id: 1}})

注意：如果没有匹配到的话，默认会去找_error.js中定义的组件； 路由跳转不会向服务器发送请求页面的请求。

2.3.2 创建组件

  1. 普通组件

    组件的创建可以在任何的文件夹下面，但是不要放在pages下面，因为组件并不需要url

  2. 布局组件

    利用this.props.children

  3. 全局布局组件， 创建_app.js，模板入下：

    import React from 'react'
    import App, {Container} from 'next/app'

    class Layout extends React.Component {
      render () {
        const {children} = this.props
        return <div className='layout'>
          {children}
        </div>
      }
    }

    export default class MyApp extends App {
      render () {
        const {Component, pageProps} = this.props
        return <Container>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Container>
      }
    }

2.3.3 query strings

  1. 创建一个带query的链接
  2. 如果你想应用里每个组件都处理路由对象，你可以使用withRouter高阶组件。从next/router中引入withRouter，注入路由对象到Next.js中的组件作为组件属性，从而获取query对象
  3. 组件使用props.router.query.xxx获取query strings

2.3.4 Clean URLs with Route Masking

通过as属性，给browser history来个路由掩饰，但是按刷新按钮路由就找不到了，因为服务器回去重新找/p/xxxx页面，但是实际上此时并不存在xxxx页面

   // /post?title=xxxx 会变成 /p/xxxx
<Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
     <a>{props.title}</a>
   </Link>

2.3.5 服务器端支持Clean URLs

创建自定义服务

  1. 安装express npm install --save express
  2. 创建server.js，添加如下内容
const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})
  1. 修改package.json文件中scripts字段
"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}
  1. 创建自定义路由
server.get('/teacher/:id', (req, res) => {
  const actualPage = '/teacher/detail'
  const queryParams = { id: req.params.id } 
  app.render(req, res, actualPage, queryParams)
})

2.4 静态文件服务

项目的根目录新建 static 文件夹，代码通过 /static/ 开头的路径来引用此文件夹下的文件，例如：

export default () => <img src="/static/logo.png" />

2.5 获取页面数据

  1. 下载isomorphic-unfetch ： npm install --save isomorphic-unfetch
  2. 引入 import fetch from 'isomorphic-unfetch';

使用异步静态方法getInitialProps获取数据，此静态方法能够获取所有的数据，并将其解析成一个 JavaScript对象，然后将其作为属性附加到 props对象上

当页面初次加载时，getInitialProps只会在服务端执行一次。getInitialProps只有在路由切换的时候（如Link组件跳转或命名式路由跳转）时，客户端的才会被执行。

注意：getInitialProps 不能 在子组件上使用，只能使用在pages页面中。

// Index是一个组件
Index.getInitialProps = async function() {
  const res = await fetch('http://localhost:3301/in_theaters')
  const data = await res.json()
	
	// 这段数据会在服务器端打印，客户端连请求都不会发
  console.log(data)

  return {
    // 组件中通过props.shows可以访问到数据
    movieList: data
  }
}

如果你的组件是一个类组件，你需要这样写：

export default class extends React.Component {
  static async getInitialProps() {
    const res = await fetch('http://localhost:3301/in_theaters')
    const data = await res.json()
    console.log(data);
    return {movieList: data}
  }
  render() {
    return (
      <div>
        {this.props.movieList.map(item => (
          <p key={item.id}>{item.title}</p>
        ))}
      </div>
    )
  }
}

getInitialProps： 接收的上下文对象包含以下属性：

  • pathname： URL的 path部分
  • query： URL的 query string部分，并且其已经被解析成了一个对象
  • asPath： 在浏览器上展示的实际路径(包括 query字符串)
  • req： HTTP request 对象 (只存在于服务器端)
  • res： HTTP response 对象 (只存在于服务器端)
  • jsonPageRes： 获取的响应数据对象 Fetch Response (只存在于客户端)
  • err： 渲染时发生错误抛出的错误对象
// 在另外一个组件中，可以使用context参数(即上下文对象)来获取页面中的query
Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`http://localhost:3301/in_theaters/${id}?_embed=details`)
  const data = await res.json()
  console.log(data)

  return {movieDetail: data}
}

2.6 组件样式

  1. css样式文件

  2. css in js

  3. styled-jsx

  • scoped

    如果添加了 jsx属性，只作用于当前组件，不包括子组件

<style jsx>{`
  h1, a {
    font-family: "Arial";
  }

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    margin: 5px 0;
  }

  a {
    text-decoration: none;
    color: blue;
  }

  a:hover {
    opacity: 0.6;
  }
`}</style>

  • global

    作用于当前组件，包括子组件

<style jsx global>{``}</style>

2.7 豆瓣电影案例

接口

获取电影列表：http://localhost:3301/in_theaters （in_theaters可以替换为coming_soon及top250）

获取电影详情：http://localhost:3301/in_theaters/1?_embed=details

2.7.1 豆瓣电影首页

MovieHeader组件样式

.movie-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  background-color: #1e2736;
  margin: 0;
}
li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
li a {
  color: white;
}
li a:hover {
  color: red;
}

2.7.2 豆瓣电影列表页

.movie-type {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.movie-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  padding: 10px 0;
  width: 40%;
  box-shadow: 0 0 10px #bbb;
  
}
.movie-box:hover {
  box-shadow: rgba(0,0,0,0.3) 0px 19px 60px;
}

2.7.3 豆瓣电影详情页

.detail {
  width: 40%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #bbb;
}
.detail-box {
  text-align: center;
}

2.8 自定义头部元素head

引入next/head

export default () => {
    <div>
    	<Head>
      		<meta name="keywords" content="" key="viewport" />
    	</Head>
    </div>
}

注意：在卸载组件时，<head>的内容将被清除。请确保每个页面都在其<head>定义了所需要的内容，而不是假设其他页面已经加过了