React 服务端渲染

点关注不迷路，倡议珍藏缓缓读……

在开始之前咱们须要先来搞清楚一个问题：什么是服务端渲染？

在以往的概念里，渲染的工作更多的是放在客户端进行的，那么为什么当初咱们要让服务端来做这个工作？

服务端渲染和客户端渲染有什么不同之处吗？

其实服务端渲染的工具有很多，看着手册很快就能上手，并没有什么难度，关键在于，咱们什么场景下须要应用服务端渲染，什么样的渲染计划更适宜咱们的我的项目；知其然，知其所以然，咱们须要先搞清楚服务端渲染的基本概念和原理，服务端渲染为什么会呈现，到底解决了咱们的什么问题，把握整体的渲染逻辑和思路，咱们能力在学习工具应用时，轻松自在，而即使当前工具有了变动和更新，咱们也能得心应手，不会再说“学不动”了；

这个逻辑就是所谓的道、法、术、器的概念；不要仅仅停留在工具的应用和一些工具的奇技淫巧中，更多的要向法、道的层面成长；

什么是 SSR？

现代化的前端我的项目，大部分都是单页应用程序，也就是咱们说的 SPA，整个利用只有一个页面，通过组件的形式，展现不同的页面内容，所有的数据通过申请服务器获取后，在进行客户端的拼装和展现；这就是目前前端框架的默认渲染逻辑，咱们称为：客户端渲染计划（Client Side Render 简称：CSR）；

加载渲染过程如下：HTML/CSS 代码 –> 加载 JavaScript 代码 –> 执行 JavaScript 代码 –> 渲染页面数据

SPA 利用的客户端渲染形式，最大的问题有两个方面：

1：白屏工夫过长，用户体验不好；

2：HTML 中无内容，SEO 不敌对；

这个问题的起因在于，首次加载时，须要先下载整个 SPA 脚本程序，浏览器执行代码逻辑后，能力去获取页面真正要展现的数据，而 SPA 脚本的下载须要较长的期待和执行工夫，同时，下载到浏览器的 SPA 脚本是没有页面数据的，浏览器理论并没有太多的渲染工作，因而用户看到的是没有任何内容的页面，不仅如此，因为页面中没有内容，搜索引擎的爬虫爬到的也是空白的内容，也就不利于 SEO 关键字的获取；

相较于传统的站点，浏览器获取到的页面都是通过服务器解决的有内容的动态页面，有过后端编程教训的可能会比拟相熟一些，页面构造和内容，都是通过服务器解决后，返回给客户端；

全宇宙首动员图，全流程展示

两相比拟咱们会发现，传统站点的页面数据合成在后盾服务器，而 SPA 利用的页面数据合成在浏览器，然而无论那种，最终的渲染展现，还是交给浏览器实现的，所以，不要误会，咱们这里所说的 服务端渲染 和 客户端渲染，指的是页面构造和数据合成的工作，不是浏览器展现的工作；

那么能不能借助传统网站的思路来解决 SPA 的问题又可能保留 SPA 的劣势呢？不论是白屏工夫长还是 SEO 不敌对，理论都是首屏的页面构造先回到浏览器，而后再获取数据后合成导致的问题，那么，首屏的页面构造和数据，只有像传统站点一样，先在服务端合成后再返回，同时将 SPA 脚本的加载仍然放到首屏中，此时返回的页面就是构造和数据都有的残缺内容了，这样浏览器在展现首页数据的同时也能加载 SPA 脚本，搜索引擎的爬虫同样也能获取到对应的数据，解决 SEO 的问题；为了更好的了解这个逻辑，我画了一个流程图：

没错，这就是咱们所说的 服务端渲染的根本逻辑，服务端渲染也就是 SSR（Server Side Rendering）；

白屏工夫过长的问题得以解决，因为首次加载时，服务器会先将渲染好的动态页面返回，在动态页面中再次加载申请 SPA 脚本；

基本原理：首页内容及数据，在用户申请之前生成为动态页面，同时退出 SPA 的脚本代码引入，在浏览器渲染实现动态页面后，申请 SPA 脚本利用，之后的页面交互仍然是客户端渲染；

明确了其中的原理，也就是到了道、法的境界，接下来，让咱们下凡进入术、器的利用层面感受一下；

其中 Vue 框架和 React 框架都有对应的比拟成熟的 SSR 解决方案，React 对应的是 Next.js 框架，Vue 对应的就是 Nuxt.js，当然，如果你对这些都不感兴趣，也能够本人实现一个 SSR 的服务端利用，我本人之前也写过一个，如果你感兴趣，想看看我实现的代码，能够留言给我，回头做成教程收回来；

咱们以 React 对应的 Next.js 为例，来具体感触服务端渲染；

Next.js 框架

中武官网首页，曾经介绍的十分分明了：https://www.nextjs.cn/

根本利用

装置部署

我的项目装置命令：npx create-next-app 或 npm init next-app my-next-project

运行：npm run dev 命令，启动我的项目

同时，也能够查看 ./package.json 文件中的脚本配置

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

这些脚本波及开发应用程序的不同阶段：

• dev – 运行 next dev，以开发模式启动 Next.js
• build – 运行 next build，以构建用于生产环境的应用程序
• start – 运行 next start，将启动 Next.js 生产环境服务器

拜访 http://localhost:3000 即可查看咱们的应用程序了。

页面路由

在 Next.js 中，页面是被搁置在 pages 文件夹中的 Reac 组件，这是框架定义好的；

组件须要被默认导出；组件文件中不须要引入 React；页面地址与文件地址是对应的关系；

页面（page）依据其文件名与路由关联。例如，pages/about.js 被映射到 /about。

在你的我的项目中的 pages 目录创立一个 about.js。

为 ./pages/about.js 文件填充如下内容：

// 类组件须要引入 react 继承
import React from 'react'
class AboutPage extends React.Component {render(){return <h3>class Component -- About Page</h3>}
}
export default AboutPage

// 函数组件不须要引入 React 
function AboutPage(){return <h3>Function Component -- About Page</h3>}
export default AboutPage

页面跳转

Link 组件默认应用 Javascript 进行页面跳转，即 SPA 模式的跳转
如果浏览器中 Javascript 被禁用，则应用链接跳转
Link 组件中不应增加除 href 属性以外的属性，其余属性增加到 a 标签上
Link 组件通过 预取（在生产中）性能主动优化应用程序以获得最佳性能

// 引入组件  
import Link from 'next/link'
// 函数组件不须要引入 React 
function AboutPage() {
  return (
    <div>
      {/* Link 中必须要写 a 标签，href 必须写在 Link 中 */}
      <Link href="/list"><a>Go to list Page</a></Link>
      <h3>Function Component</h3>
    </div>
  )
}
export default AboutPage

动态资源

应用程序根目录中的 public 文件夹用于寄存动态资源；
通过以下模式进行拜访：
public/img/1.png->/img/1.png
public/css/style.css->/css/style.css

import React from 'react'
class ListPage extends React.Component {render(){
    return <div>
      <h3>ListPage</h3>
      {/* 引入图片文件 */}
      ![](/img/1.png)
    </div>
  }
}
export default ListPage

CSS 款式

内置 styled-jsx

https://github.com/vercel/sty…

在 Next.js 中内置了 styled-jsx，它是一个 CSS-in-JS 库，容许在 React 组件中编写 CSS，CSS 仅作用于以后组件外部；

import React from 'react'
class ListPage extends React.Component {render(){
    return <div>
      <h3 >ListPage</h3>
      <p className="pra"> 这是一个 p 标签外面的内容 </p>
     
      <style jsx>
        {`
          .pra{color: red;}
        `}
      </style>

    </div>
  }
}
export default ListPage

CSS 模块

通过应用 CSS 模块性能，容许将组件的 CSS 款式编写在独自的 CSS 文件中
CSS 模块约定款式文件的名称必须为: 组件文件名称.module.css

创立 ./pages/list.module.css 文件并填写如下内容：

.prag{
  color:brown;
  font-size: 20px;
}

import React from 'react'
// 引入款式文件
import ListStyle from './list.module.css'

class ListPage extends React.Component {render(){
    return <div>
      <h3 >ListPage</h3>
      {/* 应用款式 */}
      <p className={ListStyle.prag}> 这是一个 p 标签外面的内容 </p>
    </div>
  }
}
export default ListPage

全局款式文件

1：在 pages 文件夹中新建 _ app. js 文件（文件名固定）
2：在我的项目根目录下创立 styles 文件夹，并在其中创立 global.css
3：在 _app.js 中通过 import 引入 global.css

global.css 中的款式，将会全局起作用

/pages/_app.js 文件中的内容如下：

import '../styles/globals.css'

// 固定代码
function MyApp({Component, pageProps}) {return <Component {...pageProps} />
}

export default MyApp

在新版框架中，曾经帮咱们做好相干内容及文件和代码

服务端渲染办法

getServerSideProps() 这个办法是服务端渲染的办法，适宜页面数据实时变动的利用；getServerSideProps() 办法接管一个参数，是以后的 HTTP 客户端申请对象；

import React from 'react'

// 类组件
class ListPage extends React.Component {render(){
    return <div>
      <h3 >ListPage</h3>
      <h4> 服务器数据：</h4>
      {/* 类组件的形式展现数据内容 */}
      <p> {this.props.data[0].name} </p>
    </div>
  }
}

// // 函数组件
// function ListPage({data}){
//   return (
//     <div>
//       <h3 >ListPage</h3>
//       <h4> 服务器数据：</h4>
//       {/* 类组件的形式展现数据内容 */}
//       <p> {data[1].name} </p>
//     </div>
//   )
// }

// Node 环境下执行
// 文件读写，数据库链接，网络通信
// export async function getStaticProps(){export async function getServerSideProps(){const res = await fetch('http://localhost:80/');
      const backData = await res.json();
      const data = JSON.parse(backData);
      console.log(data);
      return {props:{data}
      }
  }

export default ListPage

我的项目构建与运行

我的项目构建：npm run build

启动运行我的项目: npm run start

动态站点生成

next.js 不仅提供服务端渲染的形式，同时还提供了动态站点生成的解决方案；

动态站点生成也被称为 SSG（Static Site Generators），就是将利用中用到的所以页面，全副生成动态文件的计划；

next 官网倡议在大多数状况下应用动态站点生成，动态站点生成计划，更适宜 CDN、缓存、内容数据无变动的页面，比方：宣传页、博客文章、帮忙文档、新闻页面、电商产品列表等泛滥利用场景；

Next.js 中的 getStaticProps、getStaticPaths 就是动态站点生成；是在构建时生成 HTML 的办法，当前的每个申请都共用构建时生成好的 HTML；

Next.js 倡议大多数页面应用动态生成，因为页面都是当时生成好的，一次构建，重复应用，访问速度快。
服务器端渲染访问速度不如动态生成快，然而因为每次申请都会从新渲染，所以实用数据频繁更新的页面或页面内容随申请变动而变动的页面；

在 next.js 中，动态生成分为 无数据和有数据两种状况；
如果组件不须要在其余中央获取数据，默认间接进行动态生成，如果组件须要在其余中央获取数据，在构建时 Next.js 会事后获取组件须要的数据，而后再对组件进行动态生成

咱们来比照一下，开发环境不会打包动态文件，生产环境打包，默认生成动态文件

那么，有数据的状况应该怎么做呢？

有数据的动态生成

getStaticProps() 这个办法官网翻译为 动态生成。是把组件提前编译成 html 文件，而后把整个 html 文件响应到客户端，从而达到预渲染的目标。

getStaticProps() 办法是个异步办法，在 Node 环境下执行(构建时执行)，因而能够进行文件读写，数据库链接，网络通信等一些列操作

对于这个办法的应用，先看 demo：

import React from 'react'
import Axios from "axios"

// 类组件
class ListPage extends React.Component {render(){
    return <div>
      <h3 >ListPage</h3>
      <h4> 服务器数据：</h4>
      {/* 类组件的形式展现数据内容 */}
      <p> {this.props.data[0].name} </p>
    </div>
  }
}

// // 函数组件
// function ListPage({data}){
//   return (
//     <div>
//       <h3 >ListPage</h3>
//       <h4> 服务器数据：</h4>
//       {/* 类组件的形式展现数据内容 */}
//       <p> {data[1].name} </p>
//     </div>
//   )
// }

// Node 环境下执行
// 文件读写，数据库链接，网络通信
export async function getStaticProps(){const d3 = await Axios.get('http://localhost:80/');
  const data = JSON.parse(d3.data);
  console.log(data)
  // 返回的 Props 属性的值会传递给组件
  return {props:{data}
  }
}

export default ListPage

getStaticProps 办法外部必须返回一个对象，这个对象中的 props 属性讲传递到组件中。

getStaticPaths() 这个办法也是动态生成。与 getStaticProps 独特应用，会依据不同的申请参数生成不同的动态页面，它的应用形式比拟非凡，代码文件要放在一个目录中，同时代码文件的文件名，要应用 可选项 文件名的模式，如\pages\props\[id].js 的模式，在我的项目构建时，next 会依据不同的 ID 值，生成不同的对应的 动态文件，如下代码

import React from 'react'
import Axios from "axios"

// 类组件
class ListPage extends React.Component {render() {
    return <div>
      <h3 >ListPage - Class</h3>
      <p>{this.props.backData.name}</p>
    </div>
  }
}

// 依据客户端参数生成动态页面
export async function getStaticPaths() {
  return {
    // 匹配客户端申请的 id 值 
    paths: [{params: { id: "1"} }, {params: { id: "2"} }],
    fallback: false
  }
}

// 主动调用以后办法，将客户端参数传入; {params} 承受到的客户端参数
export async function getStaticProps({params}) {const d3 = await Axios.get('http://localhost:80/');
  const data = JSON.parse(d3.data);
  console.log(params)
  // 循环服务器数据，获取
  for (let i = 0; i < data.length; i++) {// console.log(data[i].id)
    if (params.id == data[i].id) {
      // 返回对应数据
      const backData = data[i];
      return {props: { backData}
      }
    }
  }
}

export default ListPage

最终构建后，会生成不同的动态页面：

动态站点导出

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

执行命令 npm run export，进行构建和导出操作，生成 out 文件夹，获取动态站点资源；

除此之外，还有专门针对 React 的 SSG 动态站点生成计划：Gatsby https://www.gatsbyjs.cn/，感兴趣的能够本人去看看

当然，你 React 有的，我 Vue 怎么可能没有呢：Gridsome https://www.gridsome.cn/

奋斗吧，前端框架们……

React 服务端渲染

点关注不迷路，倡议珍藏缓缓读……

在开始之前咱们须要先来搞清楚一个问题：什么是服务端渲染？

在以往的概念里，渲染的工作更多的是放在客户端进行的，那么为什么当初咱们要让服务端来做这个工作？

服务端渲染和客户端渲染有什么不同之处吗？

其实服务端渲染的工具有很多，看着手册很快就能上手，并没有什么难度，关键在于，咱们什么场景下须要应用服务端渲染，什么样的渲染计划更适宜咱们的我的项目；知其然，知其所以然，咱们须要先搞清楚服务端渲染的基本概念和原理，服务端渲染为什么会呈现，到底解决了咱们的什么问题，把握整体的渲染逻辑和思路，咱们能力在学习工具应用时，轻松自在，而即使当前工具有了变动和更新，咱们也能得心应手，不会再说“学不动”了；

这个逻辑就是所谓的道、法、术、器的概念；不要仅仅停留在工具的应用和一些工具的奇技淫巧中，更多的要向法、道的层面成长；

什么是 SSR？

现代化的前端我的项目，大部分都是单页应用程序，也就是咱们说的 SPA，整个利用只有一个页面，通过组件的形式，展现不同的页面内容，所有的数据通过申请服务器获取后，在进行客户端的拼装和展现；这就是目前前端框架的默认渲染逻辑，咱们称为：客户端渲染计划（Client Side Render 简称：CSR）；

加载渲染过程如下：HTML/CSS 代码 –> 加载 JavaScript 代码 –> 执行 JavaScript 代码 –> 渲染页面数据

SPA 利用的客户端渲染形式，最大的问题有两个方面：

1：白屏工夫过长，用户体验不好；

2：HTML 中无内容，SEO 不敌对；

这个问题的起因在于，首次加载时，须要先下载整个 SPA 脚本程序，浏览器执行代码逻辑后，能力去获取页面真正要展现的数据，而 SPA 脚本的下载须要较长的期待和执行工夫，同时，下载到浏览器的 SPA 脚本是没有页面数据的，浏览器理论并没有太多的渲染工作，因而用户看到的是没有任何内容的页面，不仅如此，因为页面中没有内容，搜索引擎的爬虫爬到的也是空白的内容，也就不利于 SEO 关键字的获取；

相较于传统的站点，浏览器获取到的页面都是通过服务器解决的有内容的动态页面，有过后端编程教训的可能会比拟相熟一些，页面构造和内容，都是通过服务器解决后，返回给客户端；

全宇宙首动员图，全流程展示

两相比拟咱们会发现，传统站点的页面数据合成在后盾服务器，而 SPA 利用的页面数据合成在浏览器，然而无论那种，最终的渲染展现，还是交给浏览器实现的，所以，不要误会，咱们这里所说的 服务端渲染 和 客户端渲染，指的是页面构造和数据合成的工作，不是浏览器展现的工作；

那么能不能借助传统网站的思路来解决 SPA 的问题又可能保留 SPA 的劣势呢？不论是白屏工夫长还是 SEO 不敌对，理论都是首屏的页面构造先回到浏览器，而后再获取数据后合成导致的问题，那么，首屏的页面构造和数据，只有像传统站点一样，先在服务端合成后再返回，同时将 SPA 脚本的加载仍然放到首屏中，此时返回的页面就是构造和数据都有的残缺内容了，这样浏览器在展现首页数据的同时也能加载 SPA 脚本，搜索引擎的爬虫同样也能获取到对应的数据，解决 SEO 的问题；为了更好的了解这个逻辑，我画了一个流程图：

没错，这就是咱们所说的 服务端渲染的根本逻辑，服务端渲染也就是 SSR（Server Side Rendering）；

白屏工夫过长的问题得以解决，因为首次加载时，服务器会先将渲染好的动态页面返回，在动态页面中再次加载申请 SPA 脚本；

基本原理：首页内容及数据，在用户申请之前生成为动态页面，同时退出 SPA 的脚本代码引入，在浏览器渲染实现动态页面后，申请 SPA 脚本利用，之后的页面交互仍然是客户端渲染；

明确了其中的原理，也就是到了道、法的境界，接下来，让咱们下凡进入术、器的利用层面感受一下；

其中 Vue 框架和 React 框架都有对应的比拟成熟的 SSR 解决方案，React 对应的是 Next.js 框架，Vue 对应的就是 Nuxt.js，当然，如果你对这些都不感兴趣，也能够本人实现一个 SSR 的服务端利用，我本人之前也写过一个，如果你感兴趣，想看看我实现的代码，能够留言给我，回头做成教程收回来；

咱们以 React 对应的 Next.js 为例，来具体感触服务端渲染；

Next.js 框架

中武官网首页，曾经介绍的十分分明了：https://www.nextjs.cn/

根本利用

装置部署

我的项目装置命令：npx create-next-app 或 npm init next-app my-next-project

运行：npm run dev 命令，启动我的项目

同时，也能够查看 ./package.json 文件中的脚本配置

“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”
}

这些脚本波及开发应用程序的不同阶段：

• dev – 运行 next dev，以开发模式启动 Next.js
• build – 运行 next build，以构建用于生产环境的应用程序
• start – 运行 next start，将启动 Next.js 生产环境服务器

拜访 http://localhost:3000 即可查看咱们的应用程序了。

页面路由

在 Next.js 中，页面是被搁置在 pages 文件夹中的 Reac 组件，这是框架定义好的；

组件须要被默认导出；组件文件中不须要引入 React；页面地址与文件地址是对应的关系；

页面（page）依据其文件名与路由关联。例如，pages/about.js 被映射到 /about。

在你的我的项目中的 pages 目录创立一个 about.js。

为 ./pages/about.js 文件填充如下内容：

// 类组件须要引入 react 继承
import React from ‘react’
class AboutPage extends React.Component {
render(){
return <h3>class Component — About Page</h3>
}
}
export default AboutPage

// 函数组件不须要引入 React
function AboutPage(){
return <h3>Function Component — About Page</h3>
}
export default AboutPage

页面跳转

Link 组件默认应用 Javascript 进行页面跳转，即 SPA 模式的跳转 如果浏览器中 Javascript 被禁用，则应用链接跳转 Link 组件中不应增加除 href 属性以外的属性，其余属性增加到 a 标签上 Link 组件通过 预取（在生产中）性能主动优化应用程序以获得最佳性能

// 引入组件
import Link from ‘next/link’
// 函数组件不须要引入 React
function AboutPage() {
return (
<div>
{/ Link 中必须要写 a 标签，href 必须写在 Link 中 /}
<Link href=”/list”>Go to list Page</Link>
<h3>Function Component</h3>
</div>
)
}
export default AboutPage

动态资源

应用程序根目录中的 public 文件夹用于寄存动态资源；通过以下模式进行拜访：public/img/1.png->/img/1.png public/css/style.css->/css/style.css

import React from ‘react’
class ListPage extends React.Component {
render(){
return <div>
<h3>ListPage</h3>
{/ 引入图片文件 /}
<img class=”lazy” data-src=”/img/1.png” />
</div>
}
}
export default ListPage

CSS 款式

内置 styled-jsx

https://github.com/vercel/styled-jsx#readme

在 Next.js 中内置了 styled-jsx，它是一个 CSS-in-JS 库，容许在 React 组件中编写 CSS，CSS 仅作用于以后组件外部；

import React from ‘react’
class ListPage extends React.Component {
render(){
return <div>
<h3 >ListPage</h3>
<p className=”pra”> 这是一个 p 标签外面的内容 </p>

<style jsx>
{`
.pra{
color: red;
}
`}
</style>
​
</div>
}
}
export default ListPage

CSS 模块

通过应用 CSS 模块性能，容许将组件的 CSS 款式编写在独自的 CSS 文件中 CSS 模块约定款式文件的名称必须为: 组件文件名称.module.css

创立 ./pages/list.module.css 文件并填写如下内容：

.prag{
color:brown;
font-size: 20px;
}

import React from ‘react’
// 引入款式文件
import ListStyle from ‘./list.module.css’
​
class ListPage extends React.Component {
render(){
return <div>
<h3 >ListPage</h3>
{/ 应用款式 /}
<p className={ListStyle.prag}> 这是一个 p 标签外面的内容 </p>
</div>
}
}
export default ListPage

全局款式文件

1：在 pages 文件夹中新建 _ app. js 文件（文件名固定）2：在我的项目根目录下创立 styles 文件夹，并在其中创立 global.css 3：在 _app.js 中通过 import 引入 global.css

global.css 中的款式，将会全局起作用

/pages/_app.js 文件中的内容如下：

import ‘../styles/globals.css’
​
// 固定代码
function MyApp({Component, pageProps}) {
return <Component {…pageProps} />
}
​
export default MyApp

在新版框架中，曾经帮咱们做好相干内容及文件和代码

服务端渲染办法

getServerSideProps() 这个办法是服务端渲染的办法，适宜页面数据实时变动的利用；getServerSideProps() 办法接管一个参数，是以后的 HTTP 客户端申请对象；

import React from ‘react’
​
// 类组件
class ListPage extends React.Component {
render(){
return <div>
<h3 >ListPage</h3>
<h4> 服务器数据：</h4>
{/ 类组件的形式展现数据内容 /}
<p> {this.props.data[0].name} </p>
</div>
}
}
​
// // 函数组件
// function ListPage({data}){
//   return (
//     <div>
//       <h3 >ListPage</h3>
//       <h4> 服务器数据：</h4>
//       {/ 类组件的形式展现数据内容 /}
//       <p> {data[1].name} </p>
//     </div>
//   )
// }
​
// Node 环境下执行
// 文件读写，数据库链接，网络通信
// export async function getStaticProps(){
export async function getServerSideProps(){
const res = await fetch(‘http://localhost:80/’);
const backData = await res.json();
const data = JSON.parse(backData);
console.log(data);
return {
props:{data}
}
}
​
export default ListPage

我的项目构建与运行

我的项目构建：npm run build

启动运行我的项目: npm run start

动态站点生成

next.js 不仅提供服务端渲染的形式，同时还提供了动态站点生成的解决方案；

动态站点生成也被称为 SSG（Static Site Generators），就是将利用中用到的所以页面，全副生成动态文件的计划；

next 官网倡议在大多数状况下应用动态站点生成，动态站点生成计划，更适宜 CDN、缓存、内容数据无变动的页面，比方：宣传页、博客文章、帮忙文档、新闻页面、电商产品列表等泛滥利用场景；

Next.js 中的 getStaticProps、getStaticPaths 就是动态站点生成；是在构建时生成 HTML 的办法，当前的每个申请都共用构建时生成好的 HTML；

Next.js 倡议大多数页面应用动态生成，因为页面都是当时生成好的，一次构建，重复应用，访问速度快。服务器端渲染访问速度不如动态生成快，然而因为每次申请都会从新渲染，所以实用数据频繁更新的页面或页面内容随申请变动而变动的页面；

在 next.js 中，动态生成分为 无数据和有数据两种状况；如果组件不须要在其余中央获取数据，默认间接进行动态生成，如果组件须要在其余中央获取数据，在构建时 Next.js 会事后获取组件须要的数据，而后再对组件进行动态生成

咱们来比照一下，开发环境不会打包动态文件，生产环境打包，默认生成动态文件

那么，有数据的状况应该怎么做呢？

有数据的动态生成

getStaticProps() 这个办法官网翻译为 动态生成。是把组件提前编译成 html 文件，而后把整个 html 文件响应到客户端，从而达到预渲染的目标。

getStaticProps() 办法是个异步办法，在 Node 环境下执行(构建时执行)，因而能够进行文件读写，数据库链接，网络通信等一些列操作

对于这个办法的应用，先看 demo：

import React from ‘react’
import Axios from “axios”
​
// 类组件
class ListPage extends React.Component {
render(){
return <div>
<h3 >ListPage</h3>
<h4> 服务器数据：</h4>
{/ 类组件的形式展现数据内容 /}
<p> {this.props.data[0].name} </p>
</div>
}
}
​
// // 函数组件
// function ListPage({data}){
//   return (
//     <div>
//       <h3 >ListPage</h3>
//       <h4> 服务器数据：</h4>
//       {/ 类组件的形式展现数据内容 /}
//       <p> {data[1].name} </p>
//     </div>
//   )
// }
​
// Node 环境下执行
// 文件读写，数据库链接，网络通信
export async function getStaticProps(){
const d3 = await Axios.get(‘http://localhost:80/’);
const data = JSON.parse(d3.data);
console.log(data)
// 返回的 Props 属性的值会传递给组件
return {
props:{data}
}
}
​
export default ListPage

getStaticProps 办法外部必须返回一个对象，这个对象中的 props 属性讲传递到组件中。

getStaticPaths() 这个办法也是动态生成。与 getStaticProps 独特应用，会依据不同的申请参数生成不同的动态页面，它的应用形式比拟非凡，代码文件要放在一个目录中，同时代码文件的文件名，要应用 可选项 文件名的模式，如pagesprops[id].js 的模式，在我的项目构建时，next 会依据不同的 ID 值，生成不同的对应的 动态文件，如下代码

import React from ‘react’
import Axios from “axios”
​
// 类组件
class ListPage extends React.Component {
render() {
return <div>
<h3 >ListPage – Class</h3>
<p>{this.props.backData.name}</p>
</div>
}
}
​
// 依据客户端参数生成动态页面
export async function getStaticPaths() {
return {
// 匹配客户端申请的 id 值
paths: [{params: { id: “1”} }, {params: { id: “2”} }],
fallback: false
}
}
​
// 主动调用以后办法，将客户端参数传入; {params} 承受到的客户端参数
export async function getStaticProps({params}) {
const d3 = await Axios.get(‘http://localhost:80/’);
const data = JSON.parse(d3.data);
console.log(params)
// 循环服务器数据，获取
for (let i = 0; i < data.length; i++) {
// console.log(data[i].id)
if (params.id == data[i].id) {
// 返回对应数据
const backData = data[i];
return {
props: {backData}
}
}
}
}
​
export default ListPage

最终构建后，会生成不同的动态页面：

动态站点导出

“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“export”: “next build && next export”
},

执行命令 npm run export，进行构建和导出操作，生成 out 文件夹，获取动态站点资源；

除此之外，还有专门针对 React 的 SSG 动态站点生成计划：Gatsby https://www.gatsbyjs.cn/，感兴趣的能够本人去看看

当然，你 React 有的，我 Vue 怎么可能没有呢：Gridsome https://www.gridsome.cn/

奋斗吧，前端框架们……