# Gatsby.js 開發筆記

View the book with "<i class="fa fa-book fa-fw"></i> Book Mode".

## 簡介
Gatsby.js是一個靜態網站的生成工具，整合了React框架、webpack 以及GraphQL 這種比較新型態的 API 介面。因為其生成的是純靜態的頁面，可以做到方便部屬，並提供各種數據接口，可以容易的去將資料內容以及網頁本體分開，加快加載速度以及渲染速度，以及抓取不同種類的資料，包括json、markdown、database等。並且可以方便地去使用React下的功能，方便的去實現SPA以及實作各種組件。

## 入門資源
- [官方文件](https://www.gatsbyjs.org/docs/)
- [Gatsby.js 入門指南](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/708897)
- [Gatsby.js 入門](https://ithelp.ithome.com.tw/articles/10213883)
- [Gatsby.js 練習](https://ithelp.ithome.com.tw/articles/10201610)

## Quick Start
根據官方給的指令，可以簡單的完成專案的建置
- 用npm在全域環境安裝gatsby的cli
`npm install -g gatsby-cli`
- 用new指令可以創建gatsby的專案，hello-world為專案名稱，最後一個參數是starter的url，starter是gatsby社群維護的開發樣板，可以方便使用者快速的開發。
`gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`
- 進入專案目錄
`cd hello-world`
- 以開發者模式在本機端將專案跑起來
`gatsby develop`

## Gatsby 是如何做到無刷新的頁面跳轉以及瞬間加載
- [原理介紹](https://baurine.netlify.com/2019/06/05/why-gatsby-blazing-fast/)
gatsby 相比其它靜態站點生成器 (Jekyll / Hugo ...) 有一个很特别的地方，它能實現站内頁面間無刷新的跳轉。前提是在程式中使用`Link组件`做為鏈結。比如：
`<Link to="/about">About</Link>`
而不是直接用`<a>` tag。比如：
`<a href="/about">About</a>`
而且，當你點擊鏈結時，頁面可以被瞬間顯示出来 (但並不是絕對的，取決於網速和頁面上的鏈結數)，似乎该頁面已經被提前下载了

- 这里用到了 HTML5 的 prefetch 特性。加上了 rel="prefetch" 的 link tag，其相应的资源会被浏览器在空闲时间提前下载缓存在本地。当然，如果一个页面中有很多很多链接，对所有这些链接都进行 prefetch 会产生很多多余的请求，也会让真正需要 prefetch 的链接没法优先 prefetch。gatsby 会监听页面的滚动，只对可视范围内的链接进行 prefetch。

- [preFetch概念](https://juejin.im/post/58e8acf10ce46300585a7a42)

## GraphQL

在組件中，我們應該如何獲取數據呢？在 Gatsby 中，主要分成兩種形式:

- 頁面組件中，我們需要調用 Gatsby 提供的 graphql 方法來查詢數據：Gatsby 會自行處理
- 非頁面組件獲取數據則需要結合兩個 API：useStaticQuery 和 graphql。

## 獲取文件數據

Gatsby 可以通過一些源（source）插件將各方面的數據轉換為本地能夠通過 GraphQL 提取的內容。比如 gatsby-source-filesystem、gatsby-source-wordpress 等。主要有本地的文件以及其他內容管理系統中的數據，可以用於數據的遷移。這裡只講解本地文件數據的獲取。

- gatsby-source-filesystem `yarn add gatsby-source-filesystem`