React 必学SSR框架——next.js

狂奔滴小马

发布于 2021-11-15 07:10:29

7.7K00

代码可运行

文章被收录于专栏：前端专享前端专享

运行总次数：0

代码可运行

F首先我们就回顾一下，我们到底是怎么告别了使用 php/jsp 做服务器端渲染，进入前后端分离的客户端渲染时代，又为什么重新回到了服务端渲染。

其实把 next.js/nust.js 称为 SSR（服务器端渲染 Server Side Render）不太精确，应该是 Isomorphic render（同构渲染）。

服务器渲染(Server Side Render)并不是一个复杂的技术，而 服务器渲染 与 服务器同构渲染 则是 2 个不同的概念，重点在于：同构。

服务端渲染：渲染过程在服务器端完成，最终的渲染结果 HTML 页面通过 HTTP 协议发送给客户端。对于客户端而言，只是看到了最终的 HTML 页面，看不到数据，也看不到模板。
客户端渲染：服务器端把模板和数据发送给客户端，渲染过程在客户端完成。

为什么需要同构？

通常同构渲染主要是为了：

利于 SEO 搜索引擎收录
加快首屏呈现时间
同时拥有单页(SPA)和多页路由的用户体验

前端同构就是：让一套javascript代码同时跑在服务端和客户端

为什么需要现代的前端同构框架？

现代前端框架（react、vue、angular）都有服务端渲染API，为什么我们还需要一个同构框架？原因是，一个正常的同构需求，我们需要：

前端组件渲染为HTML字符串，流
服务端，客户端资源的加载不同处理，(首屏不一定全部加载完所有js……)
服务端，客户端的状态数据的传递
打包工具链
性能优化
……

而React SSR的API只有四个函数： renderToString()， renderToStaticMarkup()，renderToNodeStream()，renderToStaticNodeStream()（Vue也类似），只能满足第一个需求，我们需要更多，而以Next.js为代表前端同构框架除了能满足上述基本的要求外，还能为我们带来：

极佳的开发体验，做到和开发SPA一样，(是的这个第一重要，不然不如选用传统模版渲染方案)
初次server渲染及其高效，所需JS也越小越好。
再之后的客户端渲染能够尽可能利用服务端带下来的数据。
便利的SSG(Static Site Generation)支持。
支持TypeScript
……

换句话说，让开发越发动态灵活，让渲染越发静态高效。举个例子：

Wordpress等cms系统，动态需求容易满足，但是静态缓存的优化就较难实现。
Hexo等方案，页面渲染完全静态化(落地为文件)，但是但凡有点动态化的需求，基本无法实现。

其中Next.js可以说是前端同构中的开山，翘楚级框架，依赖React渲染组件。当然Vue有Nuxt.js，Angular有 Angular Universal。

正式开始之前，强烈推荐Next.js的官方文档，挺清晰易懂。 Next.js的官方Blog，也十分推荐，各个版本的更新详尽及时，堪称模范。官方github也有近百个案例，大家尽可以跟着官方文档一步步学习，也可以很快学会。

本文将以blog 系统为例，不涉及原理，记录开发过程。

创建项目

yarn create next-app next-start
cd next-start
yarn dev

这个时候访问http://localhost:3000，我的next 项目就已经创建成功了，第一步创建项目的时候会比较慢可以先将npm 镜像源设置为淘宝的npm源

npm config set registry https://registry.npm.taobao.org

typescript

如果你想使用typescript ，可以在根目录执行 tsc --init 创建tsconfig.json 文件，这个时候执行yarn dev, 就会提示你安装ts依赖包

yarn add --dev typescript @types/react @types/node

尝试再次启动开发服务器。启动服务器后，Next.js 将：

为您填充 tsconfig.json 文件。您也可以自定义此文件。
创建 next-env.d.ts 文件，以确保 TypeScript 编译器选择正确 Next.js 类型（types）。

基于文件路径的路由

页面

一般前端web应用都可以简化为，基于路由的页面和API接口两部分。Next的路由系统基于文件路径自动映射，不需要做中性化的配置。这就是约定大于配置。

一般都约定在根目录pages文件夹内：

./pages/index.tsx --> 首页 /
./pages/admin/index.tsx --> /admin
./pages/admin/post.tsx --> /admin/post

默认导出一个React的组件，Next就会帮你默认生成对应路由的页面。

你不用关心head里面资源如何配置加载
可以像SPA应用一样，使用css-in-js，css module，less，sass等样式import方式。

页面间的导航

import Link from 'next/link'
function Home() {
  return (
    <ul>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

注意，Link中最好独立包裹a元素。

增加Head

import Head from 'next/head'
function About() {
  return (
    <div>
      <Head>
        <title> Hipo Log - {props.post?.name ?? ''}</title>
      </Head>
      content
    </div>
  );
}
export default About

Dynamic import 代码拆分

Next也支持ES2020的dynamic import()语法，可以拆分代码，或者有些第三方组件依赖浏览器API时候精致服务端渲染(ssr: false)

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { 
    loading: () => <p>...</p>,
  	ssr: false
  }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

** 注意：在页面代码要谨慎import代码！！**

越多引入，上线访问后加载的js就越多，特别是下面钩子函数要注意，不要引入多余代码

API

API类型的路由约定在./pages/api 文件夹内，next会自动映射为/api/*路径的API

import { NextApiRequest, NextApiResponse } from 'next'

export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

请求方法通过req中取到。

如此你就可以很轻松的生成一个API。

动态路由

正常的应用，都有动态路由，next中精巧使用文件命名的方式来支持。

./pages/post/create.js --> /post/create
./pages/post/[pid].js --> /post/1, /post/abc等，但是不会匹配 /post/create
./pages/post/[...slug].js --> /post/1/2, /post/a/b/c等，但是不会匹配 /post/create, /post/abc

动态参数可以通过req.query对象中获取（{ pid }， { slug: [ 'a', 'b' ] }），在页面中可以通过router hook获取：

import { useRouter } from 'next/router';

function About() {
  const router = useRouter();
  const { bID, pID } = router.query
  return <div>About</div>
}

页面SSR 钩子以及SSG

大部分的应用内容，都不是纯静态的，我们需要数据查询才能渲染那个页面，而这些就需要同构钩子函数来满足，有了这些钩子函数，我们才可以在不同需求下作出极佳体验的web应用。

`getServerSideProps`（SSR）每次访问时请求数据

页面中export一个async的getServerSideProps方法，next就会在每次请求时候在服务端调用这个方法。

方法只会在服务端运行，每次请求都运行一遍getServerSideProps方法
如果页面通过浏览器端Link组件导航而来，Next会向服务端发一个请求，然后在服务端运行getServerSideProps方法，然后返回JSON到浏览器。

getServerSideProps方法主要是升级了9.3之前的getInitialProps方法

9.3之前的getInitialProps方法有一个很大的缺陷是在浏览器中req和res对象会是undefined。也就是使用它的页面，如果是浏览器渲染你需要在组件内再显示地请求一次。开发体验不太好。如果没有特殊问题，建议使用getServerSideProps替代getInitialProps方法。

示例：

import { GetServerSideProps, NextPage } from 'next'

interface PostProps {
  list: Post[]
}

const App: NextPage<PostProps> = props => {
  return <div></div>
}

export const getServerSideProps: GetServerSideProps<PostProps> = async context => {
  const list = await context.req.service.post.getPost(context.params.postID)
  return {
    props: {
      list
    }
  }
}
export default App

`getStaticProps`和`getStaticPaths`（SSG）构建时请求数据

所谓的SSG也就是静态站点生成，类似像hexo或者gatsbyjs都是在build阶段将页面构建成静态的html文件，这样线上直接访问HTML文件，性能极高。

Next.js 再9.0的时候引入了自动静态优化的功能，也就是如果页面没有使用getServerSideProps和getInitialProps方法，Next在build阶段会生成html，以此来提升性能。

但是正如上文说的，一般应用页面都会需要动态的内容，因此自动静态优化局限性很大。

Next 在9.3中更近了一步，引入了getStaticProps和getStaticPaths方法来让开发者指定哪些页面可以做SSG优化。

使用getStaticProps方法在build阶段返回页面所需的数据。
如果是动态路由的页面，使用getStaticPaths方法来返回所有的路由参数，以及是否需要回落机制。

export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map(post => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: true };
}
export const getStaticProps: GetStaticProps<InitProps> = async ({ params }) => {
  const data = await fetch(
    `http://.../api/p/${params.bookUUID }/${
      params.postUUID }`
  );
  return {
    props: {
      post: data,
    },
  };
};

使用非常的简单，需要注意的是：

getStaticPaths方法返回的fallback很有用：如果fallback是false，访问该方法没有返回的路由会404
但是如果不想或者不方便在build阶段拿到路由参数，可以设置fallback为true，Next在访问build中没有的动态路由时候，先浏览器loading，然后服务端开始build该页面的信息，然后再返回浏览器渲染，再次访问该路由该缓存就会生效，很强大！！
静态缓存目前没办法很灵活的更新！！，例如博客内容在build或者fallback生效之后发生更改，目前没办法很方便的替换缓存。
Next 在9.5.0之后getStaticProps方法可以增加revalidate的属性以此来重新生成缓存，这点就很强大：页面加载仍然很快，页面永不离线，即使重新生成失败，老的还可以访问，而且可以大幅减少数据库，server的负载。

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}

export default Blog

如何选择SSR还是SSG？

如果页面内容真动态(例如，来源数据库，且经常变化)，使用getServerSideProps方法的SSR。
如果是静态页面或者伪动态(例如，来源数据库，但是不变化)，可以酌情使用SSG。

上面就是Next.js中主要的部分了，下面是一些可能用到的自定义配置。

自定义App

用./pages/_app.tsx来自定义应用App，可以配置全局的css，或者getServerSideProps方法来给每个页面添加数据。

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

自定义Document

用./pages/_document.tsx来自定义页面的Document，可以配置页面html，head属性，或者使用静态getInitialProps方法中renderPage方法来包括整个react 应用。

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
<Html>`, `<Head />`, `<Main />` 和 `<NextScript />都是必须的。

上述app和document中使用getServerSideProps或者getInitialProps方法让整个应用都无法自动静态优化
上述app和document中在浏览器中不执行，包括react的hooks或者生命周期函数。

自定义构建

Next自然也可以自定义构建，根目录使用next.config.js来配置webpack，可以用来支持less编译，按需加载，path alias等。

下面的配置，支持了Antd design的自定义样式。

const withLess = require('@zeit/next-less')
const fs = require('fs')
const path = require('path')

const rewrites = [
  {
    source: '/page/:path*',
    destination: `/?pageNum=:path*`,
  },
  {
    source: '/post/:id/edit',
    destination: `/create`,
  },
]

const lessToJS = require('less-vars-to-js')
const themeVariables =lessToJS(
    fs.readFileSync(
      path.resolve(__dirname, './src/styles/antd-custom.less'),
      'utf8'
    )
  )

if (process.env.NODE_ENV !== 'production') {
  rewrites.push({
    source: '/api/:path*',
    destination: `http://localhost:4000/api/:path*`,
  })
}
module.exports = withLess({
  async rewrites() {
    return rewrites
  },
  lessLoaderOptions: {
    javascriptEnabled: true,
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
    modifyVars: themeVariables, // make your antd custom effective
  },
  distDir: 'build',
  target: 'serverless',
})

自定义服务

Next也支持node启动，以此来和其他框架配合实现更复杂的服务端功能，譬如使用它来绑定数据库typeorm等。

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

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

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})