用Next.js快速上手React服务器渲染

时间 2019-11-13

标签 next.js 快速上手 react 服务器渲染栏目 JavaScript 繁體版

原文原文链接

新前端时代的服务端渲染也提了好久了，各类技术演进层出不穷。css

带你领略一下基于React和Nodejs架构的服务端渲染技术，让你快速上手，开发Next服务端渲染的项目。前端

本文参考官方文档，作精简总结，用一些小例子，让你快速理解Next.js项目的开发。node

全文3800字左右，阅读全文约15分钟。react

本文同步发表于知乎专栏：前端微志。欢迎关注。webpack

什么是服务端渲染？

服务端渲染，是指页面的渲染和生成由服务器来完成，并将渲染好的页面返回客户端。而客户端渲染是页面的生成和数据的渲染过程是在客户端（浏览器或APP）完成。ios

随着先后端分离模式的兴起，从服务端渲染到服务端渲染的演进，前端Web App给前端开发带来了很大的便利，并减轻后端服务器压力。web

先后端解耦，让前端专一作好用户UI层，专一于提高用户体验，让后端专一于业务逻辑处理，分离成微服务，专心作好一件事。ajax

先后端分离前的服务端渲染技术有：PHP，ASP，JSP等方式，分离后的前端SPA（单页面应用）渲染拥有独立的路由和页面渲染（React，Vue和Angular等），而SPA的最大问题是对SEO不友好，当项目对SEO有需求时，SPA就不是一个好的选择。express

近两年来，React和Vue也开始支持服务端渲染（Server Side Render ），行业内也有这方面的实践，其中掘金就使用Vue的SSR功能作了全站服务端渲染，且效果良好。npm

咱们如今介绍一个React生态中表现突出的服务端渲染框架：Next.js。

Next.js是什么？它有什么优势？

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

Next.js带来了不少好的特性：

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

怎么开始构建一个Next.js项目？

在开始构建Next.js项目以前，须要作好一些准备：

首先，无论你使用哪一个操做系统，你须要一个趁手的命令行工具，在Mac系统和Linux下自带的命令行工具比较好用，在Windows系统下，我推荐一个命令行工具：Cmder；
已经在本地安装好Nodejs和Npm；
熟悉React技术栈开发及ES6语法；
熟悉Express架构的Nodejs开发。

下面开始构建一个Next.js项目。

建立项目

在命令行工具中依次执行下面语句：

// 在本地建立一个项目跟目录
$ mkdir hello-next 

// 切换到项目根目录
$ cd hello-next

// 用npm初始化项目
$ npm init -y

// 将react和next安装到本地依赖
$ npm install --save react react-dom next

// 建立文件夹 pages
$ mkdir pages

建立完文件夹以后，打开hello-next文件下的package.json文件，在 scripts 下添加一个script，以下：

{
  "scripts": {
    "dev": "next"
  }
}

至此，项目准备工做完成，运行下面这条命令开启项目服务器：

$ npm run dev

命令执行完毕后，在浏览器中打开 http://localhost:3000，你会看到这样的页面：

这个页面是Next.js默认生成的404页面，而开启服务后访问的之因此是404页面，是由于咱们尚未设置项目主页。

建立页面

Next.js是从服务器生成页面，再返回给前端展现。Next.js默认从 pages 目录下取页面进行渲染返回给前端展现，并默认取 pages/index.js 做为系统的首页进行展现。注意，pages 是默认存放页面的目录，路由的根路径也是pages目录。

在 pages/index.js 中建立一个React函数式组件：

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

export default Index

Next.js默认使用Webpack构建项目，webpack的热部署功能同样能提高开发效率。建立完 pages/index.js 后，再访问 http://localhost:3000 便可看到设置好的页面。

多页面构建

使用Next.js的目的就是构建非SPA的多页面项目。下面开始构建多页面应用，建立第二个页面。

在 pages 目录下建立文件 pages/about.js :

export default () => (
  <div>
    <p>This is the about page</p>
  </div>
)

建立完以后，能够经过 http://localhost:3000/about 访问该页面。至此，全部的页面的路由都是经过后端服务器来控制的，要想实现客户端路由，须要借助Next.js的Link API。

Link API

从 next/link中能够引用到 Link 组件。在pages/index.js文件中引用Link，修改以下：

// This is the Link API
import Link from 'next/link'

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

在浏览器中访问首页 http://localhost:3000 时，点击 About Page便可跳转到about页面。

Link组件是经过location.history的浏览器API保存历史路由，因此，你能够经过浏览器左上角的前进和后退按钮来切换历史路由。而在开发过程当中，你不须要再单独写客户端路由的配置。

Link组件是React的高阶组件的实现，不能对它进行样式的设置，它只是起到路由的跳转功能，可是它的复用性强，只要包含一个能触发onClick事件的组件便可。

组件复用

Next.js是以多页面为中心，只要将页面文件放在pages目录下，就能够在浏览器上以文件名为路由名来访问到。

组件的设置跟React同样，经过export导出，经过import导入。通常，只要不想让用户经过页面直接访问的组件，都不放在pages目录下。对除了pages目录，组件放在哪一个目录下没有要求，开发者能够自定义设置。

下面再 components 目录下，建立一个公用组件 Header，用于各个文件的头部导航，经过导航能够在页面见切换。

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
)

export default Header

在 pages/index.js 中引入Header：

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Hello Next.js</p>
  </div>
)

在 pages/about.js 中一样引入 Header 组件，在浏览器上经过点击导航切换页面。

进一步封装Header组件，建立一个自动包含Header和Content的组件 components/MyLayout.js：

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

建立动态页面

使用Next.js建立动态页面，与使用React或Vue建立一个SPA页面大致相同，惟一的区别就是页面的渲染主体不一样，前者是Nodejs服务器获取到后端数据渲染完页面后再返回给前端展现，后者是前端先获取页面主体架构，再经过ajax的方式请求后端的数据，在前端渲染展现。

以一个简易的博客页面为例，建立博客列表页，修改 pages/index.js：

import Layout from '../components/MyLayout.js'

import Link from 'next/link'

const PostLink = (props) => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink title="Hello Next.js"/>
      <PostLink title="Learn Next.js is awesome"/>
      <PostLink title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

访问 http://localhost:3000/ 访问，页面以下：

有了列表页，须要再写一个博客的详情页，从上面的代码中也可看到，咱们须要建立一个 pages/post.js 文件：

import Layout from '../components/MyLayout.js'

export default (props) => (
  <Layout>
    <h1>{props.url.query.title}</h1>
    <p>This is the blog post content.</p>
  </Layout>
)

在博文列表页，点击博文名可跳转到对应博文的详情页。

用路由遮盖（Route Masking）的干净的URL

Next.js上提供了一个独特的特性：路由遮盖（Route Masking）。它可使得在浏览器上显示的是路由A，而App内部真正的路由是B。这个特性可让咱们来设置一些比较简洁的路由显示在页面，而系统背后是使用一个带参数的路由。好比上面的例子中，地址栏中显示的是 http://localhost:3000/post?title=Hello%20Next.js ，这个地址含有一个title参数，看着很不整洁。下面咱们就用Next.js来改造路由，使用路由遮盖来建立一个更加简洁的路由地址。好比咱们将该地址改形成 http://localhost:3000/p/hello-nextjs。

首先咱们要修改 pages/index.js 下的PostLink组件，会使用到 next/link 组件的 as 属性，并给组件添加一个属性 id：

import Layout from '../components/MyLayout.js'

import Link from 'next/link'

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`} 
      href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink id="hello-nextjs" 
        title="Hello Next.js"/>
      <PostLink id="learn-nextjs" 
        title="Learn Next.js is awesome"/>
      <PostLink id="deploy-nextjs" 
        title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

当在 Link 组件上使用 as 属性时，浏览器上显示的是 as 属性的值，走的是客户端路由，而服务器真正映射的是 href 属性的值，走的是服务端路由。

这样就会有一个问题，若是在前端路由间切换不会有问题，能够正常显示，可是在页面 http://localhost:3000/p/hello-nextjs 时刷新页面，会显示 404页面。这是由于路由遮盖默认只在客户端路由中有效，要想在服务端也支持路由遮盖，须要在服务端单独设置路由解析的方法。

服务端支持路由遮盖

上面说到，服务器默认不支持路由遮盖，要让服务器支持它，须要单独对路由进行设置。下面以 Express （你也可使用Koa等其余Nodejs的Web服务器框架）建立后端服务器讲解如何设置服务器来支持路由遮盖。

首先须要将 express 安装到项目依赖中：

$ npm install --save express

在项目目录下建立 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('/p/:id', (req, res) => {
    const actualPage = '/post'
    const queryParams = { 
        title: req.params.id 
    } 
    app.render(req, res, actualPage, queryParams)
  })

  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)
})

并更新 package.json 文件中的 scripts ：

{
  "scripts": {
    "dev": "node server.js"
  }
}

这时候，服务器已经能够支持路由遮盖了，在显示遮盖路由的页面，刷新页面也能够正常显示内容。具体的实现是在服务器中对 /p/* 开头的路由进行重写，而后重定向到 /post 开头的路由上，最后将内容返回给前端。具体代码是这一段：

server.get('/p/:id', (req, res) => {
  const actualPage = '/post'
  const queryParams = { 
      title: req.params.id 
  } 
  app.render(req, res, actualPage, queryParams)
})

请求接口，获取数据

Next.js 在 React 的基础上为组件添加了一个新的特性： getInitialProps （有点像是getInitialState），它用于获取并处理组件的属性，返回组件的默认属性。咱们能够在改方法中请求数据，获取页面须要的数据并渲染返回给前端页面。

引入一个支持在客户端和服务器端发送 fetch 请求的插件 isomorphic-unfetch，固然你也可使用 axios 等其余工具。

$ npm install --save isomorphic-unfetch

而后修改 pages/index.js 里的内容，换成下面这样：

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.shows.map(({show}) => (
        <li key={show.id}>
          <Link as={`/p/${show.id}`} 
            href={`/post?id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows: data
  }
}

export default Index

上述代码中，在 getInitialProps 中使用了 async 和 await 来处理异步请求，并将取到的数据当作一个属性赋给页面，页面拿到这个属性的值后会用于页面的初始化渲染。页面展现效果以下图：

样式化组件

Next.js 提供了一个 css-in-js 的特性，它容许你在组件内部写一些样式，你只须要在组件内使用 <style jsx> 标签来写 css 便可。举个例子，好比咱们在 pages/index.js 里添加样式：

import Layout from '../components/MyLayout.js'

import Link from 'next/link'

function getPosts () {
  return [
    { 
      id: 'hello-nextjs', 
      title: 'Hello Next.js'
    },
    { 
      id: 'learn-nextjs', 
      title: 'Learn Next.js is awesome'
    },
    { 
      id: 'deploy-nextjs', 
      title: 'Deploy apps with ZEIT'
    }
  ]
}

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      {getPosts().map((post) => (
        <li key={post.id}>
          <Link as={`/p/${post.id}`} 
            href={`/post?title=${post.title}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
    <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>
  </Layout>
)

在上述代码中，咱们没有直接使用 <style> 标签来书写样式代码，而是写在一个模板字符串（{``}）里面。Next.js 使用 babel插件来解析 styled-jsx ，它支持样式命名空间，将来还将支持变量赋值。

须要注意的是：styled-jsx 的样式不会应用到子组件，若是想要该样式适用于子组件，能够在 styled-jsx 标签添加属性 global：<style jsx global>。

怎么部署一个next.js项目

Next.js 项目的部署，须要一个 Node.js的服务器，能够选择 Express, Koa 或其余 Nodejs 的Web服务器。本文中以 Express 为例来部署 Next 项目。

服务器的入口文件就使用上文中提到的 server.js，在 server.js 里添加了针对部署环境的选择，代码以下：

const dev = process.env.NODE_ENV !== 'production'

为了区分部署环境，咱们须要在 package.json 中修改 script 属性以下：

"scripts": {
  "build": "next build",
  "start": "NODE_ENV=production node server.js -",
  "dev": "NODE_ENV=dev node server.js"
}

其中，build 命令是用于打包项目，start 命令是用于生产环境部署，dev 命令是用于本地开发。

执行以下命令便可将 Next项目部署到服务器：

$ npm run build
$ npm run start

执行完命令后，可在 http://host:3000 访问。其中，host 是指服务器的IP地址。