Gatsby之web静态化

男娘i 2023-07-18 12:35 9阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[https_blog.csdn.net_yw00yw_article_details_104949826]: https://blog.csdn.net/yw00yw/article/details/104949826
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20230528/b73697dd92154852bd86493ab50081ce.png