Gatsby之web静态化

Gatsby简介

Gatsby实际上是一个react的静态化框架。React本身实际上能完成所有gatsby的功能。但是有一个问题就是，react是一个单页应用（SPA - single page application）,本身实际上是在前端动态的生成页面。这样就会有两个问题，一个是首屏加载时间很长。第二个因为页面是动态生成，所以搜索引擎不知道每个页面的内容，对SEO很不友好。对于这些问题，react的服务端渲染框架（SSR - server side render）应运而生。而SSR本身也有很多不同的实现方案，有些是直接搭一个渲染服务器多一个中间层，而有一些就比较极端，比如gatsby，直接在编译的时候就把整个网站静态化。这样上面的问题就迎刃而解了。

静态化与服务器渲染

静态化渲染和服务器渲染二者都为你的站点页面进行HTML渲染， 然而他们之间有个巨大的差异。。。

静态化和服务器渲染都参与到了对HTML的生成， 不同点在于静态化渲染只在编译的时候发生一次，然而服务器渲染则是按需发生根据用户的每一次请求。

静态化

当静态化渲染的时候，你需要在每次用户访问前就生成好一个单一的HTML文件。 接着你把这些生成好的文件都存放在云端服务中或者运行中的Nginx服务器。

静态化渲染的优势在于能够对服务器请求做到无脑的快速，因为在处理过程中不需要再去生成什么文件。 实际上, 由于你的网站的响应都是提前生成好的，那么你就可以存放文件在全世界任何角落的CDN。这样可以让你的网站达到一个不可思议的响应速度。但是这也是有代价的。

使用静态化渲染时，你需要给每一个可能的请求提前生成响应。 对于那些对高质量内容的网站来说，这样是没问题的——静态化渲染工具比如Navi可以在仅仅几秒内生成上百个网页。但是如果你需要搭建一些无法预测的用户请求的项目，比如一个搜索引擎？或者你有一堆用户生成内容，根据每一个请求来改变响应？这种情况的话，你需要的是服务器渲染。

服务器渲染

按React的说法，服务器渲染指的是按照每一个请求生成HTML的过程。通常，你在服务器上架设一些后端框架比如express或者Next.js，根据每个请求渲染你的React app， 就像更传统的PHP和Rails框架网站一样。

服务器渲染总是慢于静态内容的。当然， 服务器渲染的速度短板，成就了他的灵活性，它允许你：

• 响应任何用户发出的请求 —— 即使是你可能没预想过的
• 从数据库中抓取最新的内容，而不是过时的静态文件
• 对没授权的用户选择性的隐藏内容

安装

安装注意事项：node版本不能太高太低，推荐使用 10.13.0 版本
多个node版本控制可以使用gnvm管理：https://blog.csdn.net/yw00yw/article/details/104949826

• npm install --global gatsby-cli

使用npm安装的脚手架，可能在创建项目的时候报错，可以转换成cnpm安装

• cnpm install -g gatsby-cli

创建项目

• gatsby new gatsby_website gatsby_website为项目名称

运行

• cd gatsby_website
• gatsby develop

查看

• http://localhost:8000/

构建

• gatsby build
• gatsby 内置一个服务，用来搭载build后的静态资源 gatsby serve 此时端口是9000

此时Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上，可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。