大前端 - react- 服务端渲染

1.什么是Gatsby以及静态应用的优势

Gatsby是一个基于react的静态站点html生成器
官网： https://www.gatsbyjs.cn/

解决单页应用的2大问题。

静态应用的优势

访问速度快
更利于 SEO 搜索引擎的内容抓取
部署简单

Gatsby 总览

基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具，开发人员开发体验好；
采用数据层和UI层分离而不失 SEO 的现代前端开发模式.对SEO非常友好；
数据预读取，在浏览器空闲的时候预先读取链接对应的页面内容.使静态页面拥有 SPA 应用的用户体验，用户体验好；
数据来源多样化: Headless CMS, markdown, API;
功能插件化， Gatsby 中提供了丰富且功能强大的各种类型的插件，用什么装什么

2.创建Gatsby项目

全局安装脚手架工具

npm install gatsby-cli -g

创建项目
创建: gatsby new project-name https://github.com/gatsbyjs/gatsby-starter-hello-world
启动: gatsby develop 或 npm start
访问: localhost:8000

3.基于文件的路由系统

Gatsby 框架内置基于文件的路由系统，页面组件被放置在 src/pages/ 文件夹中。

import React from 'react'
export default function List() {return (<div>list page</div>
)
}

查看效果：localhost:8000/list

4. 以编程的方式创建页面

基于同一个模版创建多个html页面，有多少数据就创建多少页面。
比如商品详情页面，有多少商品就生成多少商品详情展示页面。

// createPages方法用于创建页面,方法名字不能更改，固定的。
// Gatsby在构建应用是会调用该方法
// 该方法在gatsby-node.js文件中定义
function createPages({actions}) {const {createPage} = actions// 获取模版绝对路径// 获取组件所需数据// 根据模版和数据创建页面
}
module.exports = { createPages }

案例：

1.在项目根目录下创建文件：gatsby-node.js

// 创建页面
function createPages({actions}) {const { createPage } = actions// 1.获取模版绝对路径const template = require.resolve('./src/templates/person.js')// 2.获取组件所需数据const persons = [{ slug: 'zhangsan', name: '章三', age: 20 }, { slug: 'lisi', nane: '李四', age: 40 }]// 3.根据模版和数据创建页面persons.forEach((person) => {createPage({// 模版的绝对路径component: template,// 创建出来的页面的访问地址path: `/person/${person.slug}`,// 传递给模版的数据 context 是一个对象的形式context: {person},})})
}module.exports = { createPages }

2.创建模版文件：src/templates/person.js

import React from 'react'
// props：传递的数据
export default function Person(props) {console.log('props', props)const {name, age} = props.pageContextreturn <div><span>{name}</span><span>{age}</span>
</div>
}

打印：props

5.Link组件的使用

在Gabstry框架中页面跳转通过Link组件实现

import Link from 'Gatsby'
<Link to="/list">jump to list page</Link>

案例：
pages/index.js

import React from 'react'
import Link from 'Gatsby'
export default function Home() {return (<div>Home page<Link to="/person/zhangsan">章三页面</Link><Link to="/person/lisi">李四页面</Link>
</div>
)
}

6. GraphQL数据层介绍

在Gabstry框架中提供了一个统一的存储数据的地方，叫做数据层。
在应用构建时，Gabstry会从外部获取数据并将数据放入数据层，组件可以直接从数据层查询数据。
数据层使用GraphQL构建。
调试工具：localhost:8000/___graphql

7. 在组件中从数据层中查询数据

页面组件
在组件文件中导出查询命令，框架执行查询并将结果传递给组件的prop对象，存储在props对象的data属性中。

import {graphql} from 'gatsby'
function PageComponent(props) {const {data} = props.datareturn <div>{data.site.siteMetadata.title}</div>
}export const query = graphql`query{site{siteMetadata {title}}
}
`

非页面组件
通过钩子函数useStaticQuery进行手动查询

import {graphql, useStaticQuery} from 'gatsby'export const query =useStaticQuery(graphql`query{site{siteMetadata {titledescription}}
})
`
// data.site.siteMetadata.title
// data.site.siteMetadata.description

案例：
gatsby.config.js

module.exports = {siteMetadata: {title: 'hello gatsby',author: 'join'},plugins:[]
}

页面组件
pages/index.js

import {graphql} from 'gatsby'export default function Home(props) {const {data} = props.dataconsole.log(data)return (<div>Home <p>{data.site.siteMetadata.title}</p><p>{data.site.siteMetadata.author}</p>
</div>
)
}export const query = graphql`
query MyQuery{site{siteMetadata {titleauthor}}
}
`

非页面组件
src/components/Header.js

import {graphql, useStaticQuery} from 'gatsby'export default function Header() {const data = useStaticQuery(graphql`query{site{siteMetadata {titleauthor}}}`)
return <div><p>{data.site.siteMetadata.title}</p><p>{data.site.siteMetadata.author}</p>
</div>
}

src/pages/list.js

import Header from './Header.js'
export default List() {return <><Header/></>
}

8. Gatsby框架中和插件相关的一些概念

Gatsby框架中内置插件系统，插件就是为应用添加功能的最好的方式。

在Gatsby中有三种类型的插件，将数据统一放在Gatsby的数据层中。

数据源插件：负责从应用外部获取数据，将数据统一放在Gatsby的数据层中。

数据转换插件：负责转换特定类型的数据的格式，比如将markdown文件中的内容转换为对象形式。

功能插件：为应用提供功能，比如通过插件让应用支持Less或者 typeScript

插件地址：https://www.gatsbyjs.com/plugins

9.将本地JSON文件数据添加到数据层中

项目的根目录下创建文件json.js
创建数据：
json/products.json

[{"title": "Vans 男子短袖T恤 Work Weird 新款运动休闲 TEE 迷彩官方正品","price": 208,"url": "/images/product-1.jpg","address": "上海","id": "1"},{"title": "女 韩版 长袖 卫衣 假两件","price": 67,"url": "/images/product-2.jpg","address": "北京","id": "2"},{"title": "女 春秋 阔腿裤 九分裤 打底裤","price": 399,"url": "/images/product-3.jpg","address": "杭州","id": "3"},{"title": "波司登 羽绒服 男女两穿 中长款","price": 544,"url": "/images/product-4.jpg","address": "南京","id": "4"}
]

要将本地JSON文件中的数据放入到数据层需要用到2个插件。

gatsby-source-filesystem：用于将本地文件中的数据添加到数据层。

gatsby-transformer-json：将原始JSON字符串转换为javascript对象。

安装插件：

npm install gatsby-source-filesystem gatsby-transformer-json

修改配置文件：gatsby-config.js配置下载的插件

module.exports = {siteMetadata: {title: "hello Gatsby",description: "description in gatsby-node.js",author: "gatsby",},/* Your site config here */plugins: [{resolve: "gatsby-source-filesystem", // 插件：用于将本地文件中的数据添加到数据层。options: {name: "json", // 自动地path: `${__dirname}/json/`, // 指定文件所在的绝对路径},},"gatsby-transformer-json", // 将原始JSON字符串转换为javascript对象。]
}

存放图片的 images 文件夹在 static 目录下。存放路径：static/images/1.png. 图片的访问路径：localhost:8000/images/1.png

10.图像优化

图像存在的问题：

图像文件和数据文件不在源代码中的同一位置
图像路径基于构建站点的绝对路径，而不是相对于数据的路径，难以分析出图片的真实位置
图像没有经过任何优化操作。

解决图像优化问题：
1. gatsby-source-filesystem 用于将本地文件信息添加至数据层
2. gatsby-plugin-sharp 提供本地图像的处理功能。（调整图像尺寸，压缩图像体积等等）
3. gatsby-transformer-sharp 将 gatsby-plugin-sharp 插件处理后的图像信息添加到数据层。
4. gatsby-image : react组件优化，优化图像显示，基于gatsby-transformer-sharp插件转换后的数据。

1. 生成多个具有不同宽度和图像版本，为图像设置srcset和 sizes属性，因此无论您的设备是什么宽度都可以加载到合适大小的图片
1. 使用 '模糊处理’技术，其中一个20px宽的小图像显示为占位符，直到实际图像下载完成为止。

安装插件：

npm install gatsby-plugin-sharp gatsby-transformer-sharp gatsby-image

gatsby-plugin-sharp得下载容易出错，需要安装mirror-config-china提高下载成功机率。

修改配置文件：gatsby-config.js配置下载的插件

module.exports = {/* Your site config here */plugins: [{resolve: "gatsby-source-filesystem",options: {name: "json",path: `${__dirname}/json/`,},},"gatsby-plugin-sharp","gatsby-transformer-sharp",]

src/pages/Product.js

import React from 'react'
import {grqphql} from 'gatsby'
import Img from 'gabsty-image'
export default functoion Product() {return (<><Img fluid={nodes.url}/></>)
}export const query = grqphql`
`query{allProductsJson{nodes { addresspricetitleurl}}
}
`

11 将本地markdown文件作为数据源构建文章列表

构建文章列表

通过 gatsby -source-filesystem 将markdown文件数据放入数据层
gatsby-config.js

 {resolve: "gatsby-source-filesystem",options: {name: "posts",path: `${__dirname}/src/posts/`,},},

通过 gatsby-transformer-remark 将数据层中的原始数markdown数据转换为对象形式。
gatsby-config.js

 module.exports = {plugins: [`gatsby-transformer-remark`]
}

npm install gatsby-source-filesystem gatsby-transformer-remark

12 以编程方式为所有md数据节点添加slug属性

重新构建查询数据，添加slug作为请求标识，slug值为文件名称
gatsby.md --> /posts/gatsby
react.md --> /posts/react
重新构建查询数据，添加slug作为请求标识，slug值为文件名称

const onCreateNode = ({node, actions}) => {const {createNodeField} = actionsif (node.internal.type === 'MarkdownRemark'){const slug = path.basename(node.fileAbsolutePath, '.md')createNodeField({node,name: 'slug',value: slug})}
}

根据根据 slug 标识构建页面
gatsby-node.js

async function createPages ({graphql, actions}) {const {createPage} = actions// 1. 获取模板文件的绝对路径const template = require.resolve('./src/templates/article.js')// 2. 获取页面的访问标识let {data} = await graphql(`query {allMarkdownRemark {nodes {fields {slug}}}}`)// 3. 创建页面data.allMarkdownRemark.nodes.forEach(node => {createPage({component: template,path:`/article/${node.fields.slug}`,context: {slug: node.fields.slug}})})
}

案例：

src/pages/templates/article.js


import React from 'react'export default function Article({data}) {console.log(data)const {markdownRemark} = datareturn (<div><p>{markdownRemark.frontmatter.title}</p><p>{markdownRemark.frontmatter.date}</p><p dangerouslySetInnerHTML={{__html: markdownRemark.html}}></p></div>)
}export const query = graphql`
query ($slug: String) {markdownRemark(fields: {slug: {eq: $slug}}) {idhtmlfrontmatter {titledate}}
}
`

13 解决markdown文件中的图片显示优化问题

gatsby-remark-images: 处理 markdown 中的图片，以便可以在生产环境中使用。显示图片。
npm install gatsby-remark-images
gatsby-config.js

{resolve: 'gatsby-transformer-remark',options: {plugins: ['gatsby-remark-images']}
}

注：貌似不使用 gatsby-remark-images 也可以展示图片，而使用了 gatsby-remark-images 反而还得安装 gatsby-plugin-sharp, gatsby-plugin-sharp 需要翻墙才能安装，无法翻墙就无法安装，不安装 gatsby-remark-images 会导致 markdownRemark 的 html 字段消失，报错为Cannot query field “html” on type “MarkdownRemark”.。所以我就没有使用 gatsby-remark-images 了，也可以正常展示图片。

14 将CMS作为Gatsby应用程序的外部数据源

CMS：内容管理系统后台

从 Strapi 获取数据：

创建项目：npx create-strapi-app 项目名称
http://github.com/strapi/strapi

npx create-strapi-app cms

访问：http://localhost:1337/admin/
第一次登录要设置用户名和账号密码

配置插件:

{resolve: 'gatsby-source-strapi',options: {apiURL: 'http://localhost:1337',contentTypes: [`posts`]}
}

15 开发数据源插件 - 获取外部数据

数据源插件负责从 batsby应用外部获取数据，创建数据查询节点供开发者使用

gatsby clean 清除上一次的构建内容
在项目根目录下创建plugins文件夹，在此文件夹中继续创建具体的插件文件夹，比如 gatsby-source-mystrapi 文件夹
在插件文件夹中创建gatsby-node.js文件
插件实际上就是npm包
导出sourceNodes方法用于获取外部数据，创建数据查询节点
在gabsty-config.js文件中配置插件，并传递插件所需的配置参数
重新运行应用

npm init -y
npm install axios
npm install pluralize

pluralize 模块是用来将单词转化成复数形式的。

将数据添加到数据层：创建节点对象，将节点对象添加到数据层

npm install gatsby-node-helpers@0.3.0

gatsby-node.js

const axios = require('axios')
const pluralize = require('pluralize') // 单词转复数形式
const createNodeHelpers = require('gatsby-node-helpers').defaultasync function sourceNodes ({actions}, configOptions) {const {createNode} = actionsconst { apiURL, contentTypes } = configOptions// Post -> posts  Product -> productsconst types = contentTypes.map(type => pluralize(type.toLowerCase()))// console.log(types) //  [ 'posts', 'products' ]// 从外部数据源中获取数据let final = await getContents(types, apiURL)for(let [key, value] of Object.entries(final)) {// 1. 构建数据节点对象 allPostsContent allProductsContentconsole.log('key', key)const {createNodeFactory} = createNodeHelpers({typePrefix: key,})const createNodeObject = createNodeFactory('content')// 2. 根据数据节点对象对象创建节点value.forEach(item => {createNode(createNodeObject(item))})}
}async function getContents(types, apiURL) {const size = types.lengthlet index = 0// {posts: [], products: []}const final = {}await loadContents()async function loadContents () {if (index === size) returnlet {data} = await axios.get(`${apiURL}/${types[index]}`)final[types[index++]] = dataawait loadContents()}return final
}module.exports = {sourceNodes,
}

17 开发数据转换插件

transformer 插件将 source 插件提供的数据转换为新的数据

在 plugins 文件夹中创建 gatsby-transformer-xml 文件件
在插件文件夹中创建 gatsby-node.js 文件
在文件中导出 onCreateNode 方法用于构建 Gatsby 查询节点
根据节点类型筛选 xml 节点 node.internal.mediaType -> application/xml
通过 loadNodeContent 方法读取节点中的数据
通过 xml2js 将 xml 数据转换为对象
将对象转换为 Gatsby 查询节点

实战：
新建xml文件夹
xml/person.xml

<person><name>张三</name><age>20</age>
</person>

gatsby-node.js
将xml文件添加到数据层。

module.exports = {siteMetadata: {title: "hello Gatsby",description: "description in gatsby-node.js",author: "gatsby",},/* Your site config here */plugins: [{resolve: "gatsby-source-filesystem",options: {name: "json",path: `${__dirname}/json/`,},},{resolve: "gatsby-source-filesystem",options: {name: "xml",path: `${__dirname}/xml/`,  // xml文件路径},},"gatsby-transformer-xml", // 调用我们写的插件"gatsby-plugin-react-helmet","gatsby-plugin-less",],
}

需求：就是将我们写的xml代码转换成js对象。

plugins/gatsby-transformer-xml/gatsby-node.js
npm inti -y 生成package.json文件

const { parseString } = require('xml2js')
const { promisify } = require('util')
const parse = promisify(parseString)
const createNodeHelpers = require('gatsby-node-helpers').defaultasync function onCreateNode({ node, loadNodeContent, actions }) {const { createNode } = actionsif (node.internal.mediaType === 'application/xml') {// 判断 node 是否是我们需要转换的节点let content = await loadNodeContent(node)//  {explicitArray: false, explicitRoot: false}：配置对象let obj = await parse(content, {explicitArray: false, explicitRoot: false})console.log('xml obj', obj)console.log('xml test', content)// 将数据添加到数据层const {createNodeFactory} = createNodeHelpers({typePrefix: 'XML' // 类型前缀})// 帮助我们构建数据节点对象const createNodeObject = createNodeFactory('parsedContent')createNode(createNodeObject(obj))}
}module.exports = {onCreateNode,
}

下载：npm install xml2js
下载： npm install gatsby-node-helpers 辅助方法帮助找到文件所对应的文件夹

18 SEO优化

gasby-plugin-react-helmet
react-helmet是一个组件，用于控制页面元素，这对于seo非常重要。
此插件用于将页面元数据添加到gastby构建的静态html页面中。
npm install gatsby-plugin-react-helmet react-helmet

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import { Helmet } from 'react-helmet'export default function SEO({ title, description, meta, lang }) {const { site } = useStaticQuery(graphql`query {site {siteMetadata {titledescription}}}`)console.log('site', site)const metaDescription = description || site.siteMetadata.descriptionreturn (<HelmethtmlAttributes={{ lang }}title={title} // 网页的标题titleTemplate={`%s | ${site.siteMetadata.title}`}meta={[{name: 'description',content: metaDescription}].concat(meta)}/>)
}SEO.defaultProps = {description: 'test description',meta: [],lang: 'en'
}

页面中引入SEO组件
src/SEO.js


export default function Home () {return (<div><SEO title="Index Page" />// <SEO title="List Page " description="list page description"/></div>)
}

让Gatsby应用支持less

在 Gatsby 应用中使用 less
下载插件: npm install --save gatsby-plugin-less
配置插件: plugins: [ ‘gatsby-plugin-less’ ]

gatsby-node.js

module.exports = {siteMetadata: {title: "hello Gatsby",description: "description in gatsby-node.js",author: "gatsby",},/* Your site config here */plugins: ["gatsby-plugin-less",],
}

创建样式: index.module.less
styles/ index.module.less

.red{color red
}

引入样式 import styles from ‘./index.module.less’
在需要的地方引入文件
import styles from ‘./styles/index.module.css’

使用Gatsby实现项目案例

1.创建项目

gatsby new realWorld https://github.com/gatsbyjs/gatsby-starter-hello-world

npm start
gatsby -v
修复npm start启动的错误：删除package-lock.js node-modules。npm install重新安装。
在浏览器中输入localhost:8000

2.构建案例所需组件

src/component/Header.js

在这里插入代码片

src/component/Footer.js

在这里插入代码片

src/page/Home.js

在这里插入代码片

// 拆分组件
src/component/Banner.js

在这里插入代码片

src/component/Toggle.js

在这里插入代码片

src/component/Sidebar.js

在这里插入代码片

src/pages/login.js

src/component/settings.js

src/pages/create.js

src/pages/article.js

添加css
html.js

import React from "react"
import PropTypes from "prop-types"export default function HTML(props) {return (<html {...props.htmlAttributes}><head><meta charSet="utf-8" /><meta httpEquiv="x-ua-compatible" content="ie=edge" /><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/>{props.headComponents}<div><linkhref="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"rel="stylesheet"type="text/css"/><linkhref="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"rel="stylesheet"type="text/css"/>{/* Import the custom Bootstrap 4 theme from our hosted CDN */}<link rel="stylesheet" href="//demo.productionready.io/main.css" /></div></head><body {...props.bodyAttributes}>{props.preBodyComponents}<divkey={`body`}id="___gatsby"dangerouslySetInnerHTML={{ __html: props.body }}/>{props.postBodyComponents}</body></html>)
}HTML.propTypes = {htmlAttributes: PropTypes.object,headComponents: PropTypes.array,bodyAttributes: PropTypes.object,preBodyComponents: PropTypes.array,body: PropTypes.string,postBodyComponents: PropTypes.array,
}

Layout.js
每个页面引入头部和底部

const React = require("react")
const Layout = require("./src/components/Layout").default // 拿出默认导出exports.wrapPageElement = ({ element }) => {return <Layout>{element}</Layout>
}

4.在案例中配置Redux

npm install redux react-redux
src/store/createStore.js
src/store/reducers

配置客户端provider
gatsby-browser.js

const React = require("react")
const Layout = require("./src/components/Layout").default // 拿出默认导出
+ const { Provider } = require("react-redux")
+ const createStore = require("./src/store/createStore").default // 导到默认导出exports.wrapPageElement = ({ element }) => {return <Layout>{element}</Layout>
}// wrapRootElement拿到应用的最外层组件
+ exports.wrapRootElement = ({ element }) => {//element：最外层组件
+  return <Provider store={createStore()}>{element}</Provider>
}

配置服务器端provider
gatsby-ssr.js

const React = require("react")
const { Provider } = require("react-redux")
const createStore = require("./src/store/createStore").defaultexports.wrapRootElement = ({ element }) => {return <Provider store={createStore()}>{element}</Provider>
}

在组件中使用redux
Banner.js

import React from "react"
import { useDispatch, useSelector } from "react-redux"
// useDispatch ：获取到dispatch方法
// useSelector：从store中获取数据
export default function Banner() {const dispatch = useDispatch()const counterReducer = useSelector(state => state.counterReducer)return (<div className="banner"><div className="container"><h1 className="logo-font">conduit {counterReducer.count}</h1><p>A place to share your knowledge.</p><button onClick={() => dispatch({ type: "increment" })}>+1</button><button onClick={() => dispatch({ type: "increment_async" })}>+1</button></div></div>)
}

配置redux -saga
npm install redux-saga
createStore.js

import { createStore, applyMiddleware } from "redux"
import rootReducer from "./reducers/root.reducer"+ import createSagaMiddleware from "redux-saga"+ import rootSaga from "./sagas/root.saga"export default function () {+  const sagaMiddleware = createSagaMiddleware()
+  const store = createStore(rootReducer, applyMiddleware(sagaMiddleware))
+  sagaMiddleware.run(rootSaga)return store
}

src/store/sagas/root.saga.js


import { all } from "redux-saga/effects"
// all:合并所有的saga
import counterSaga from "./counter.saga"export default function* rootSaga() {yield all([counterSaga()])
}

src/store/sagas//counter.saga

import { takeEvery, put, delay } from "redux-saga/effects"
// takeEvery:接收action
// put：触发action
// delay： 延迟
function* increment_async() {yield delay(1000)yield put({ type: "increment" })
}export default function* counterSaga() {yield takeEvery("increment_async", increment_async)
}

5.实现登录