我們一連介紹了 React 好多天了，今天開始我們來介紹 React 有哪些框架可以讓我們去使用

大家都知道 React 是一個 javascript 的函式庫，
而他的目的就是建造一個 user interface 也就是 使用者介面，
他可以很快速也很方便的製作 SPA 也就是 Single Page Applications 單頁式應用程式

我的網站要很多頁面啊？

但是若要製作一個網站，我們還是需要，有不同的頁面吧

例如說 首頁 之後我可以點選個人頁面 去設定自己的大頭貼，或是說進入 後台頁面 去管理自己發佈的文章，短短的一句我們就可以想像到三個頁面，這是 SPA 無法做到的事情

所以這時我們就可以使用 React 的框架去製作一個網站

React 的框架有哪些？

以下這些是 React 團隊推薦的方案，依照自己不同的需求來選擇自己需要的工具

• If you’re learning React or creating a new single-page app, use Create React App.
• If you’re building a server-rendered website with Node.js, try Next.js.
• If you’re building a static content-oriented website, try Gatsby.
• If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.

今天我們就來大致介紹 Gatsby & Next.js

什麼 Gatsby & Next.js

先來說說 Gatsby 吧，進到官網就可以看到這句話

Gatsby 是一個用於快速構建靜態網站的 React 框架，簡單易上手、並且支持服務端渲染，有以下的一些特性：

• 生成靜態的網頁：非常利於SEO；
• 使用現代化的前端技術： React、Webpack、Graphql 等等；
• PWA(漸進式網頁應用程式): 按需加載需要的數據，達到快速呈現內容；
• 有許多 Plugin 支持

Next.jS 是一個輕量的服務端渲染應用框架，有以下的一些特性：

• 輕量、速度快
• 支援 SSR (Server Side Rendering) 與 SSG (Static Side Generation)
• 自動化路由：API routes
• 圖片的檔案優化：使用 next/image 內建的圖片優化方案

小結

今天說明了 React 的框架有哪些，也大致說明了，我們為什麼需要 React 的框架，明天我們將會教大家如何來玩這兩個框架，但是也要記住這些框架都是基於 React 製作的～