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 {idnameplacepricepush_timemysqlId}}}
}
`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文件里的数据，假如过了一秒数据就变了，那此时页面就还是旧数据，就会误导用户了，又只能重新构建来获取新的数据了是吧。