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为后续的文件名的文件)丢过去自己的空间。