前言

目前spa项目已经很火了，基于vue、react。但是随之而来的也有两个问题比较困扰使用者：
1、CSR 项目的 TTFP（Time To First Page）首屏时间比较长
2、CSR 项目的 SEO 能力极弱，在搜索引擎中基本上不可能有好的排名。因为目前大多数搜索引擎主要识别的内容还是 HTML，对 JavaScript 文件内容的识别都还比较弱。
所以SSR随之诞生，为了解决spa应用的seo和首屏渲染问题，目前成熟的方案有vue的nuxt.js，react的next.js。
需要熟悉的技术栈有react，node，webpack，对开发者的要求比较高，尤其node层优化不好的话会给服务器造成很大的压力，所以小白可以选择成熟的方案来做ssr。接下来带你一步一步搞next.js。

起步

按照官网的步骤安装

npm install --save next react react-dom

将下面代码添加到package.json中

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

因为next.js是以pages下的文件名为路由的，所以新建文件夹pages，里面新建文件index.js，老规矩先来句hello world，在你新建的index.js里添加：

export default () => <div>hello world!this is next.js</div>

可以启动了，控制台运行：

npm run dev

打开浏览器localhost:3000就可以看到你写的内容了。

配置typescript

现在很多公司都在使用ts了，基本上已经是react的标配，现在next.js也可以无缝支持了，别的文档上介绍需要用'@zeit/next-typescript'，但是在next.js9.0以上版本不需要了，直接将你的.js/.jsx文件改成.ts/.tsx，当然里面的语法也要改成ts语法。再次运行npm run dev, next.js会自动帮你创建tsconfig.js，再搭配vscode提供ts语法支持，写起来爽到飞。

写css

官网上推荐写style-jsx，可以内联样式，当然如果想写scss，less也是可以的，这里以less为例，根目录下新建next.config.js,这个文件里可以自行配置webpack，还有更多的配置可以自行查看文档。

npm install @zeit/next-less

const withLess = require('@zeit/next-less');
module.exports = withLess({
    lessLoaderOptions: {
        javascriptEnabled: true,
        localIdentName: "[local]___[hash:base64:5]"
    }
});

接下来根目录下新建static文件夹，注意：next只认static做为静态资源的文件夹，叫别的名都不行，在static里新建css，img文件夹，css中新建index.less文件，里面就可以用less写样式了，最后在我们的pages/index.tsx下导入：

import '../static/css/index.less'

当然也可以使用cssmodule，

const withLess = require('@zeit/next-less')
module.exports = withLess({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  }
})

在pages/index.tsx中

import style from '../static/css/index.less'

生成head

这可能是使用ssr最关心的问题了，在next.js这里都不是事，配置很简单，在你的index.tsx文件下：

import React from 'react'
import Head from 'next/head';
import '../../static/css/index.less';
export default class extends React.Component<any, any> {
    constructor (props) {
        super(props)
    }
    render() {
        return (
            <div className='app'>
                <Head>
                    <title>自定义title</title>
                    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                    <link rel="shortcut icon" href="https://vv.bdstatic.com/static/videoui/img/favicon-4_f4b9465.ico" type="image/x-icon"></link>
                </Head>
            </div>
        )
    }
}

获取数据及组件生命周期

getInitialProps，它能异步获取 JS 普通对象，并绑定在props上。

当服务渲染时，getInitialProps将会把数据序列化，就像JSON.stringify。所以确保getInitialProps返回的是一个普通 JS 对象，而不是Date, Map 或 Set类型。

当页面初始化加载时，getInitialProps只会加载在服务端。只有当路由跳转（Link组件跳转或 API 方法跳转）时，客户端才会执行getInitialProps。

注意：getInitialProps将不能使用在子组件中。只能使用在pages页面中。只有服务端用到的模块放在getInitialProps里，否则会拖慢你的应用速度。
新建component文件夹，这里存放组件。直接贴代码了components/list/index.tsx:


import './index.less';
import Link from 'next/link'
export default (props: any) => {
    return (
        <ul className='infinite hkrecommend'>
            {
                props.list.map((v, i) =>
                    <li key={v.id}>
                        <Link href={/v?vid=${v.id}}>
                            <a>你好我是渣渣辉</a>
                        </Link>
                    </li>
                )
            }
        </ul>
    )
}

peges/index.tsx中使用

import React from 'react'
import Head from 'next/head';
import List from '../../components/list';
import fetch from 'isomorphic-unfetch';
import '../../static/css/index.less';
export default class extends React.Component<any, any> {
    constructor (props) {
        super(props)
    }
    static async getInitialProps({req}) {
        let hlist = [];
        if(req) { // 服务端执行
            const result = await fetch('xxxxxxx.json');
            const json = await result.json();
            hlist = json.data.response.videos;
        } else { // 客户端执行
            const list = window['__NEXT_DATA__'].props.pageProps.hlist;
            hlist = list;
        }
        return {hlist}
    }
    render() {
        return (
            <div className='app'>
                <Head>
                    <title>自定义title</title>
                    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                    <link rel="shortcut icon" href="https://vv.bdstatic.com/static/videoui/img/favicon-4_f4b9465.ico" type="image/x-icon"></link>
                </Head>
                {this.props.hlist.length > 0 ?
                    <List list={this.props.hlist}></List>
                    : <div>暂无数据哦</div>
                }
            </div>
        )
    }
}

这里用到了Link，是next官方推荐的跳转路由的方法，可以使用

<link prefetch>

使链接和预加载在后台同时进行，来达到页面的最佳性能。(只有生产环境有此功能）。还有其他更多参数详见官网，请求数据用isomorphic-unfetch，既可以在服务端也可以在客户端执行,数据地址要替换成自己的，这里都是假的，小伙伴们不要照抄。

自定义路由

next路由是pages下的每一个文件名，这样工程庞大的时候维护起来不方便，还不能够使用类似/types/id: xxxxxx的动态路由，这时可以使用自定义路由。根目录下新建server.js，可以选择koa2或express，既然写node服务就少不了缓存，好的缓存能让你的页面访问更快。这里使用express做后端服务，lru-cache做缓存。

npm install express lru-cache

在server.js中

const express = require('express');
const next = require('next');
const LRUCache = require('lru-cache');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

// This is where we cache our rendered HTML pages
const ssrCache = new LRUCache({
  max: 100,
  maxAge: 1000 * 60 * 60 // 1hour
});

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

    // Use the `renderAndCache` utility defined below to serve pages
    server.get('/', (req, res) => {
      renderAndCache(req, res, '/homepage')
    })

    server.get('/v', (req, res) => {
      renderAndCache(req, res, '/videoland', req.query)
    })

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

    server.listen(port, (err) => {
      if (err) throw err
      console.log(`> Ready on http://localhost:${port}`)
    })
  })

/*
 * NB: make sure to modify this to take into account anything that should trigger
 * an immediate page change (e.g a locale stored in req.session)
 */
function getCacheKey (req) {
  return `${req.url}`
}

async function renderAndCache (req, res, pagePath, queryParams) {
  const key = getCacheKey(req)

  // If we have a page in the cache, let's serve it
  if (ssrCache.has(key)) {
    res.setHeader('x-cache', 'HIT')
    res.send(ssrCache.get(key))
    return
  }

  try {
    // If not let's render the page into HTML
    const html = await app.renderToHTML(req, res, pagePath, queryParams)

    // Something is wrong with the request, let's skip the cache
    if (res.statusCode !== 200) {
      res.send(html)
      return
    }

    // Let's cache this page
    ssrCache.set(key, html)

    res.setHeader('x-cache', 'MISS')
    res.send(html)
  } catch (err) {
    app.renderError(err, req, res, pagePath, queryParams)
  }
}

然后改写一下我们的启动命令，在package.json中：

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

项目部署

在你的服务器上安装node，部署中，你可以先构建打包生成环境代码，再启动服务。因此，构建和启动分为下面两条命令：

npm run build
npm start

接下来官方推荐使用now去部署next.js项目。

结语

个人认为前后端协作开发的趋势是后端专注于接口，提升后端服务性能，node做中间层聚合数据，渲染模版，前端负责展示页面，用户体验。next.js是实践道路上的一次优秀项目，比较适用于小型公司静态展示型项目，或者用户操作不多。如果是企业级应用，还需要去自己定制，可以参考阿里基于egg.js开发的北斗同构框架，可以预料的是未来的前端将会承担更多的职责。最后附GitHub地址，求star😄😄🙏🙏
https://github.com/wangyingjie123/nextjs