[Day 29] - Gatsby v.s. Next

终於来到尾声了，今天我们将对 Next.js 来做一番介绍，介绍完後，我们会跟这二十九天来的战友 Gatsby 来做一次简单的比较，最後会告诉大家，什麽时候该选用什麽样的工具才是最适合的，话不多说，我们就直接来吧！

什麽是 Next.js ?

Next.js 是一款基於 React.js、Node.js、webpack 与 Babel 建立的免费开源框架，用来构建 SSR ( Server Side Rendering ) 或静态网站。

Next.js 希望我们能轻易地建构 SSR，它大幅改善我们的开发体验，减少我们建立一个 SSR 网站所要花费心力，它不仅支援 Hot Reload ，同样的，它的 pages 目录也会自动帮我们生成路由，最棒的是，性能上很优秀，对 SEO 的帮助也是众人皆知。

Gatsby 与 Next 的异同

上面说着说着，读者会不会觉得我直接去第一篇抄 Gatsby 的简介复制贴上？
没错 Gatsby 真的有很多地方跟 Next 有类似之处，例如

• 学习曲线
  Gatsby 与 Next 的学习曲线都不算陡峭，使用者能很轻易的进行开发与使用

• 开发体验
  Gatsby 与 Next 都有丰富且详细的文件，只要对於 React 有基础的理解，都快速地进行开发

• 优秀的性能
  Gatsby 与 Next 建构出来的网站都能在 Lighthouse 中取得非常高的分数

• SEO
  Gatsby 与 Next 建构的网站相比单纯的 SPA ，同样的对於 SEO 都有非常大的帮助

• 出色的功能
  Gatsby 与 Next 同样都有提供 Hot Reload，也都有在 Pages 目录下自动产生路由的功能，还有其它类似代码拆分、快取等等方便的功能供我们使用。

但你说他们是一样的吗？
不，其实他们还是有不同的地方，

Gatsby 是 SSG ( Static Site Generator )，所谓的静态网页生成器，他们将我们的程序码在建立时，生成一个一个的 HTML。

而 Next 主要用在 Server 端，每当有使用者来我们的网站时，我们才会动态的生成该页的 HTML 来提供给访客。

两者都是生成 HTML / CSS / JS ，只是生成的时间点上的差异，造就了他们的不同，Gatsby 在 build time 的时候做生成，而 Next 在 run time 的时候生成。

所以根本上的差异在於，Gatsby 可以在完全没有 Server 的状态下运行，而 Next 需要有 Server 的协助才能正常的运作。

使用的时机

那说了这麽多，我们还是不知道什麽时候该使用 Next ，什麽时候该使用 Gatsby 啊？

有个非常简单的区分方式，
如果你们网站使用者很多、更新非常频繁的话，你可以选择 Next，
因为如果内容过多，我们会花大量的时间来 Build 专案，当页面几百个时可能一两分钟即可，但如果大到千、万等级时，重建起来真的是会要人命，而这类型的网站例如 巴哈姆特、iT 邦帮忙等，都比较适合选用 Next。

而如果你们的网站属於小型的部落格或者公司官网等等，偶尔进行更新，内容篇数都是可预期的话，那非 Gatsby 莫属，Gatsby 对於各大 CMS 的支援，还有安全性的考量，甚至是 Gatsby-Image 提供的帮助，都是 Next 在这方面不及 Gatsby 的原因。

结论

Gatsby 与 Next 都是很棒的工具，端看我们在什麽样的需求上，就像你要登高，会需要的是梯子而不会是锯子吧？

在适合的时间点选择适合的工具，永远都是工程师需要具备的能力，谁不希望能顺利、愉快的开发，准时、快乐的回家呢？

参考资料

Comparison of Gatsby vs Next.js
Next.js vs. GatsbyJS: A developer’s perspective
Gatsby vs Next.JS - What, Why and When?