SSG框架Gatsby访问数据库，并显示到页面上

前言

对于一些不长变的前端项目中，如个人博客、公司官网，可能技术选型为SSG框架会相对比之前的CSR会更好些，也会更快，最近研究了下Gatsby框架，感觉不错，就简单写了一个用其访问MySQL数据库，并显示到页面的一个dome记录下学习心得

步骤

1、安装Gatsby-cli脚手架

npm install -g gatsby-cli

2、通过Gatsby-cli脚手架新建一个项目

gatsby new gatsby-site

其中gatsby-site是项目名称，自己随便取

3、进入项目根目录并下载MySQL插件

cd gatsby-site && npm install gatsby-source-mysql

4、修改Gatsby配置文件(gatsby-config.js)，添加插件

{
      resolve: `gatsby-source-mysql`,
      options: {
        connectionDetails: {
          host: 'localhost',
          user: 'root',
          password: 'root',
          database: 'gatsby'
        },
        queries: [
          {
            statement: 'SELECT * FROM goods',
            idFieldName: 'id',
            name: 'goods', // 这个不是表名，别搞混了

          }
        ]
      }
    },

5、打开src/pages/index.js文件，修改代码

当然我这里用了一个mantine的组件库，只是为了好看而已，其中你可能会需要了解graphql语法

import * as React from "react"
import { graphql } from "gatsby"

import { Table } from '@mantine/core';

import Layout from "../components/layout"
import Seo from "../components/seo"



const IndexPage = ({ data }) => {
  return (
    <Layout>
      <Seo title="Home" />
      <Table striped >
        <thead>
          <tr>
            <th>id</th>
            <th>价格</th>
            <th>地点</th>
            <th>发布时间</th>
          </tr>
        </thead>
        <tbody>
          {data.allMysqlGoods.edges.map(({ node }) =>
          (<tr key={node.mysqlId}>
            <td>{node.mysqlId}</td>
            <td>{node.price}</td>
            <td>{node.place}</td>
            <td>{node.push_time}</td>
          </tr>)
          )
          }
        </tbody>
      </Table>
    </Layout>
  )
}

/* 这是graphql语法，其实在项目启动，构建的过程中，Gatsby会去通过插件加上
  我们之前加的配置文件，去连接你的MySQL，然后查询出结果，然后再通过graphql
  语法去筛选出mysql插件查出的结果，因为还有模板里面会含有其他插件，如
  `gatsby-plugin-sharp`、`gatsby-plugin-image`等等，它们查出来的结果是
  它们的，mysql插件查出来的是mysql的查询结果
*/
export const query = graphql`{
  allMysqlGoods {
    edges {
      node {
        id
        name
        place
        price
        push_time
        mysqlId
      }
    }
  }
}
`

export default IndexPage

这是我的gatsby数据库以及goods表

6、启动项目

npm run develop 或者 gatsby develop

访问默认端口8000，查看效果

总结与反思

问：为什么要学这个呢？难道之前的vue或者react写的项目用axios请求数据，再显示到页面上面达不到上面的效果吗？

答：首先学这个并不是为了新技术而学它，没啥用，不明白它的价值，学了也是白学，还不如躺平；

其次按照以前写一个spa应用，大概流程就是axios发请求到后端 -> 后端收到请求，连接mysql -> 查询出结果，响应给前端 -> 前端收到数据 -> 通过框架的diff算法，得出html，渲染到页面上；

但是你想过一个问题没有，上面的流程当中，在请求发出去开始，到框架帮你把数据解析成html，渲染到页面上结束，这个中间的过程，你的页面是不是还没有数据？是不是相当于是空白？如果这个空白太长，作为一个用户而言，他也许不知道要经历上面那个过程，他只知道 “你这个网站好慢啊，我点了查询，怎么半天不出来数据啊”，那作为开发者你就只能通过loading动画，或者骨架屏之类的东西来告知：用户网站正在请求数据，请耐心等待…

所以才会有SSG（Static Site Generation）静态站点生成，而Gatsby就是该框架的其中之一技术，也就是我在项目构建的时候就去连接数据库，或者请求其他资源、数据，然后将这些数据放进一个json文件，再直接读这个json文件，把对应的html放在页面上，而用户去访问这个页面的时候，其实就是一个具有完整数据的html了，所以会很快，用户都不用等其他js文件加载或者执行了，就可以看到页面了，就不会有空白页面了

当然也并不是那么完美，肯定是有缺点，比如说对于频繁的数据交互，那这个显然是不好的方案，因为项目构建完了之后，那个json文件就是死的了，是静态的，而解析出的html就是读这个json文件里的数据，假如过了一秒数据就变了，那此时页面就还是旧数据，就会误导用户了，又只能重新构建来获取新的数据了是吧。