Computer >> Máy Tính >  >> Lập trình >> Javascript

Gatsby so với Next.js

Gatsbyjs và Next.js là hai trong số những chủ đề nóng nhất trong phát triển web ngay bây giờ. Tôi thấy nhiều người trên bảng tin và phần nhận xét trên YouTube hỏi về lý do bạn chọn cái này hơn cái kia. Tôi đã vùi đầu vào thế giới Next.js và Gatsbyjs trong 12 tháng qua và tôi tin rằng điều đó khiến tôi đủ điều kiện để tham gia vào cuộc thảo luận này.

Khi nói đến việc sử dụng Next.js hoặc Gatsby cho dự án của bạn, bạn sẽ nghĩ đến “công cụ phù hợp để thể hiện đúng công việc”. Nhưng đừng lo lắng, tôi sẽ không khiến bạn bị treo với một câu trả lời mơ hồ như vậy.

TLDR:

  • Gatsby và Next.js đều là khung công tác React và cả hai đều cung cấp SSR (Kết xuất phía máy chủ) ngay lập tức (tuyệt vời cho SEO).
  • Next.js ít kiên quyết hơn trong hai cách nhưng có đường cong học tập dốc hơn, ít pin hơn, điều đó có nghĩa là bạn tự làm được nhiều việc hơn.
  • Next.js được cho là tốt hơn cho các trang web có lượng lớn dữ liệu cần cập nhật thường xuyên.

Điểm tương đồng của Next.js và Gatsby.js

Có một lý do chính đáng mà mọi người đang so sánh Gatsby và Next.js. Họ có rất nhiều điểm chung hơn là họ khác nhau. Do đó, trước tiên chúng ta hãy xem Gatsby và Next.js có điểm gì chung, sau đó chúng ta sẽ thảo luận về sự khác biệt của chúng.

Gatsby và Next.js:

  • Cả hai đều mang lại hiệu suất cao.
  • Cả hai đều là khung JavaScript và đều dựa trên React.
  • Cả hai đều cung cấp cho bạn Kết xuất phía máy chủ (SSR) và Kết xuất phía máy khách (CSR) ngay lập tức
  • Cả hai đều cung cấp Tạo trang web tĩnh (SSG) và Tạo trang web động (DSG).
  • Cả hai đều có khả năng tách mã và lưu vào bộ nhớ đệm tuyệt vời.
  • Cả hai đều cung cấp tính năng tìm nạp trước dữ liệu trang. Gatsby thực hiện điều này tự động, Next.js có prefetch đề xuất mà bạn có thể sử dụng với Link của họ thành phần (để định tuyến).
  • Cả hai đều cung cấp định tuyến tự động cho các trang, sử dụng bộ định tuyến của riêng họ (Gatsby sử dụng Bộ định tuyến tiếp cận, Next.js sử dụng Bộ định tuyến Next.js).
  • Cả Gatsby và Next.js đều có thể tìm nạp dữ liệu từ Rest API và ví dụ:bằng cách sử dụng WordPress, Contentful hoặc Prismic làm chương trình phụ trợ CMS.

Ngoài ra, Gatsby và Next.js cung cấp cho bạn những gì tốt nhất của cả hai thế giới khi nói đến Kết xuất phía máy chủ (SSR) và Kết xuất phía máy khách (CSR). SSR rất tốt cho SEO và CSR rất tốt để cung cấp cho người dùng của bạn những chuyển đổi trang tức thì tuyệt vời (không cần làm mới trang) nhắc nhở bạn về việc sử dụng một ứng dụng dành cho thiết bị di động gốc.

Sự khác biệt giữa Next.js và Gatsby.js

Tôi muốn làm rõ rằng điều sau đây dựa trên những gì bạn nhận được từ hộp với một trong hai khuôn khổ, chứ không phải những gì một trong hai khuôn khổ đó có thể biến thành thông qua tùy chỉnh. Cả Next.js và Gatsby đều rất linh hoạt.

Gatsby và Next.js có thể được tùy chỉnh "vô hạn". Cả hai sẽ cố gắng nói với bạn nhiều điều này. Cụm từ cổ điển “muốn trở thành tất cả mọi thứ cho tất cả mọi người” xuất hiện trong tâm trí. Không ai trong số họ muốn loại bỏ khách hàng tiềm năng, và là những người kinh doanh giỏi, họ tập trung làm nổi bật điểm mạnh hơn là điểm yếu. Như họ nên làm.

Không ai trong số họ nói dối, nhưng vì cả Next.js và Gatsby đều rất linh hoạt và không ngừng phát triển (với sự hỗ trợ tài chính khổng lồ), thật khó để nói rằng một công cụ nào tốt hơn cho một trường hợp sử dụng cụ thể hơn công cụ kia khi bạn nói về lâu dài. thời hạn.

Tôi không có da trong trò chơi, vì vậy đây là quan điểm không thiên vị của tôi. Các lĩnh vực chính tạo nên sự khác biệt của Next.js và Gatsby:

  • Gatsby buộc bạn phải sử dụng GraphQL (theo ý kiến), với Next.js là tùy chọn.
  • Gatsby xử lý quá trình chuyển đổi hình ảnh không cần thiết (hơi cố chấp) mặc dù bạn không bị buộc phải sử dụng nó.
  • Gatsby tự động thêm tính năng tải chậm vào hình ảnh (theo ý kiến)
  • Một trang web Gatsby có thể được biến thành một Ứng dụng web tiến bộ (PWA) bằng cách cài đặt một plugin nhỏ. Tôi chưa thấy bất kỳ cách đơn giản nào để làm điều đó trong Next.js.
  • Next.js cung cấp cả định tuyến động và tĩnh. Theo như tôi có thể nói, Gatsby chỉ cung cấp định tuyến tĩnh / mã cứng. Tôi không chắc 100% về vấn đề này vì rất khó tìm được thông tin rõ ràng (tôi sẽ cập nhật thông tin này khi tôi biết thêm).
  • Gatsby thực hiện SSR của mình trong giai đoạn xây dựng trang web (SSG).
  • Next.js thực hiện SSR động theo yêu cầu trang - nhưng họ cũng cung cấp SSG thông qua tính năng xuất tĩnh.

Về phần tùy chỉnh, Gatsby có rất nhiều plugin hữu ích mà hầu hết đều có thể cài đặt trực tiếp (từ Nhận xét đến Algolia để tìm kiếm). Next.js có một thư mục / example trong kho lưu trữ GitHub của họ để hiển thị các thư viện khác nhau (“plugin”) được sử dụng với Next. Nhưng theo kinh nghiệm của tôi khi sử dụng các ví dụ Next.js khó định cấu hình hơn so với sử dụng các plugin của Gatsby.

Tìm nạp dữ liệu động

Mặc dù Gatsby được tạo tĩnh, Gatsby có thể truy vấn các API máy chủ khác nhau để động tìm nạp dữ liệu.

Next.js có thể thực hiện tìm nạp dữ liệu động theo cách tương tự.

Nếu cần SSR, bạn có thể sử dụng API GraphQL tích hợp của Gatsby để sử dụng dữ liệu từ CMS như WordPress hoặc Contentful (“CMS không đầu”), sau đó sử dụng webhook (từ CMS của bạn) để xử lý tự động triển khai mỗi khi bạn xuất bản nội dung.

Quy ước so với Cấu hình

Nói chung, Gatsby là người kiên định hơn trong hai người. Mặt trái của điều đó là bạn có ít quyết định hơn. Next.js yêu cầu thêm cấu hình để thiết lập và chạy. Mặt trái của điều đó là không có gì bị ép buộc đối với bạn.

Next.js không chỉ là một sản phẩm “xây dựng ứng dụng của bạn từ đầu”, với một số pin đẹp bao gồm (SSR, định tuyến, tìm nạp trước, tách mã).

Gatsby thiên về một sản phẩm “xuất phát điểm của bạn bao gồm những thứ mà bạn có thể muốn”, với nhiều pin bao gồm (GraphQL, tìm nạp trước, SSR, tách mã, tải chậm, biến đổi hình ảnh).

Nếu bạn cần tùy chỉnh cụ thể chính xác cho mọi góc của sản phẩm, Next.js là lựa chọn tốt hơn trong số hai, đơn giản vì nó mang lại nhiều “cơ hội” hơn (ít việc hơn được thực hiện cho bạn).

Không bao giờ thú vị khi bắt đầu một dự án bằng cách xóa các tính năng khỏi khuôn khổ, vì vậy nếu bạn không thích GraphQL (vì bất kỳ lý do gì) thì Gatsby không dành cho bạn.

Hiện tại, GraphQL là tất cả sự cường điệu (vì một lý do chính đáng), điều này khó có thể phản bác việc Gatsby biến nó thành một phần của khuôn khổ. Tôi coi đó là một phần thưởng, nhưng sở thích của bạn có thể khác. Cần lưu ý rằng Apollo (một công cụ GraphQL) là một trong những phần bổ sung phổ biến nhất cho ứng dụng Next.js.

Đối với việc Gatsby xử lý các chuyển đổi hình ảnh và tải chậm cho bạn, mặc dù vẫn kiên quyết, việc tăng hiệu suất lớn mà điều này mang lại cho bạn, có thể sẽ khiến bạn tha thứ cho họ vì đã quyết định điều đó cho bạn. Nhưng một lần nữa, có lẽ bạn muốn xử lý các chuyển đổi hình ảnh theo cách của riêng mình và trong trường hợp đó Next.js là lựa chọn tốt hơn.

Gatsby so với Next.js dành cho SEO

Vì cả Gatsby và Next.js đều được hiển thị ngay từ phía máy chủ nên cả hai đều là lựa chọn tuyệt vời cho các trang web cần SEO tốt (Tối ưu hóa công cụ tìm kiếm) - có nghĩa là hầu hết các trang web công khai hiện nay.

Tuy nhiên, có một trường hợp sử dụng SEO nhất định mà Next.js tỏa sáng so với Gatsby:

Nếu bạn đang xây dựng một nền tảng như Twitter hoặc Reddit, nơi bạn liên tục cần cập nhật nội dung - và nếu bạn cần SEO tối ưu cho tất cả nội dung của mình - thì Next.js là lựa chọn tốt nhất của bạn.

Làm thế nào mà? Vì Next.js có thể tự động hiển thị các bản cập nhật nội dung từ phía máy chủ từ máy chủ của riêng bạn, ngay lập tức bất cứ khi nào có thay đổi.

Để Gatsby hiển thị nội dung mới, bạn phải xây dựng lại và triển khai lại ứng dụng của mình mỗi khi có thay đổi đối với nội dung của bạn. Điều này phù hợp với các blog, trang Thương mại điện tử và hầu hết các loại trang web khác chỉ cần cập nhật một lần mỗi ngày hoặc thậm chí một lần mỗi giờ.

Mặt khác, nếu trang web Gatsby của bạn đang tự động tìm nạp dữ liệu từ một API bên ngoài để hiển thị các bản cập nhật trên trang web của bạn (ví dụ:thông qua dịch vụ nhận xét như Talkard hoặc Disqus) thì bạn có thể nhận được các bản cập nhật nội dung theo thời gian thực trên trang web Gatsby của mình - nhưng bạn đã thắng 'không nhận được lợi ích SEO, bởi vì các bản cập nhật sẽ được hiển thị từ phía máy khách - không được hiển thị phía máy chủ (đó là những gì bạn muốn cho SEO).

Những phản đối chung trong thế giới thực

Các công ty lớn hơn với các trang web lớn hơn có xu hướng sử dụng Next.js thay vì Gatsby. Mặc dù không hiểu sai, nhưng trang tài liệu chính thức của ReactJS sử dụng Gatsby. Tôi chỉ đang nói về những gì tôi đã quan sát được.

Các trang web lớn sử dụng Next.js:

  • Marvel.com
  • Netflix
  • Thị trường Uber
  • Invisionapp
  • Giao diện người dùng Material

Các trang web lớn sử dụng Gatsby

  • ReactJS
  • MarvelApp.com

Đúng, thật thú vị, Marvel sử dụng cả hai. Họ sử dụng Next.js cho trang web chính của họ và Gatsby cho MarvelApp của họ (một nền tảng thiết kế).

Đối với việc viết blog, tôi chỉ thấy một số ví dụ blog Next.js phong phú nhưng tôi đã thấy một số ví dụ blog Gatsby khá tốt. Cái này của Tania Rascia là một trong những mục yêu thích của tôi.

Mặc dù Gatsby nói rõ rằng họ không muốn bị coi là “chỉ là một trình tạo trang web tĩnh khác cho các blogger” (như Jekyll), nhưng điều này không thay đổi thực tế rằng nó thực sự phổ biến đối với việc viết blog và nhiều người dùng WordPress đang chuyển sang Gatsby vì lý do đó (bao gồm cả Tania mà tôi đã đề cập ở trên).

CMS không đầu với Gatsby hoặc Next.js

Nhiều nhà phát triển đang nói về xu hướng "CMS không đầu" hoặc "CMS tách rời", nơi bạn sẽ sử dụng, ví dụ:WordPress làm chương trình phụ trợ và sau đó sử dụng React (hoặc Angular / Vue) để tiêu thụ dữ liệu thông qua Rest API / GraphQL. Cả Next.js và Gatsby đều có thể được sử dụng làm ứng dụng giao diện người dùng cho các sản phẩm Headless CMS. Về lý thuyết thì nghe có vẻ rất hứa hẹn, nhưng cho đến nay tôi mới chỉ thấy một vài ví dụ điển hình:

  • Next.js + WordPress của Kata.ai
  • Gatsby + WordPress của Chase McCoy
  • Gatsby + WordPress của Indigo Tree
  • Gatsby + WordPress của Adam Rasheed

Adam và Chase’s Các ví dụ về Gatsby + WordPress đều rất nhanh. Đối với Kata’s Ví dụ Next.js mặc dù trang web đẹp nhưng hơi chậm. Vì hiệu suất cao cấp là một trong những điểm bán hàng chính của Next.js, Kata không phải là ví dụ thuyết phục nhất về lý do tại sao bạn nên sử dụng Next.js với WordPress.

CMS không đầu vẫn còn là một khái niệm tương đối mới. Không có nghi ngờ gì về việc Headless CMS nói chung (không chỉ Headless WordPress) sẽ trở thành một chủ đề nóng trong năm 2020 về sau. Và vì cả Gatsby và Next.js đều xử lý SSR cho bạn nên cả hai đều là những tùy chọn ổn định làm giao diện người dùng Headless của bạn.

Triển khai / Lưu trữ Gatsby và Next

Vì Gatsby được tạo tĩnh (tạo sẵn) trước khi triển khai nên nó có thể chạy ở bất kỳ đâu mà không cần máy chủ riêng. Nói chung Next.js yêu cầu máy chủ Node.js chạy trừ khi toàn bộ ứng dụng của bạn được xuất dưới dạng trang tĩnh, giống như Gatsby. (vâng, điều đó có thể). Một số giải pháp lưu trữ được thiết kế riêng cho giải pháp này hơn giải pháp lưu trữ khác.

Gatsby + Netlify

Gatsby và Netlify là một trận đấu được tạo ra trên thiên đường. Nếu trang web của bạn không có máy chủ, việc triển khai trang web Gatsby cho Netlify theo đúng nghĩa đen có thể được định cấu hình trong vòng chưa đầy 30 giây.

Từ đây, việc triển khai contintius có thể được hoàn thành để chạy một git push origin master duy nhất lệnh trong thiết bị đầu cuối của bạn - nếu bạn sử dụng plugin gatsby-plugin-netlify của gatsby.

Next.js + Hiện tại

Next.js kết hợp tốt với dịch vụ lưu trữ Hiện hành và vì lý do chính đáng, Zeit là công ty đứng sau cả Now (dịch vụ lưu trữ) và Next.js (khung).

Cũng giống như với Netlify, việc triển khai sang Hiện hành có thể được thực hiện trong vài giây, nhưng điều đó phụ thuộc vào loại ứng dụng bạn đang triển khai.

Lưu ý:mặc dù Gatsby và Next.js kết hợp tốt với các dịch vụ lưu trữ cụ thể, bạn thực sự có thể lưu trữ ứng dụng Next.js tĩnh / frontend trên Netlify (đây là ví dụ) và bạn có thể lưu trữ Gatsby on Now (đây là ví dụ).

Cả hai khung đều có thể được lưu trữ trên DigitalOcean, Heroku, v.v.

Nếu muốn lưu trữ máy chủ phụ trợ / API của riêng bạn (thay vì chuyển sang không có máy chủ) cho ứng dụng Next.js hoặc Gatsby thì bạn sẽ muốn xem một cái gì đó như DigitalOcean, Heroku hoặc Now. Hãy lưu ý rằng (“kể từ bây giờ”) của Zeit Now v2.0, họ không còn hỗ trợ Docker, một công cụ phá vỡ thỏa thuận cho rất nhiều nhà phát triển.

Thời gian triển khai Next.js so với Gatsby

Có độ trễ giữa các bản cập nhật khi bạn xây dựng lại và triển khai lại Gatsby. Độ trễ lớn như thế nào phụ thuộc vào quy mô trang web của bạn. Càng lớn thì càng mất nhiều thời gian để xây dựng lại và triển khai lại. Gần đây tôi đã xây dựng trang web này với Gatsby và mất khoảng 2 phút từ khi xây dựng lại đến khi triển khai lại hoàn tất và đây là một trang web tương đối nhỏ.

Next.js không gặp sự cố xây dựng lại> triển khai lại> thời gian chết. Nếu bạn chạy máy chủ phụ trợ của riêng mình, nội dung mới của bạn sẽ cập nhật ngay lập tức.

Đây có thể không phải là vấn đề nếu Gatsby giúp dễ dàng xử lý các bản cập nhật gia tăng mà không có thời gian chết / độ trễ, nhưng ngay từ bây giờ, bạn sẽ cần phải tự mình tìm cách giải quyết vấn đề đó (ví dụ:với websocket).

Tài nguyên

  • Postlight.com có ​​bộ công cụ bắt đầu WordPress + Next.js thực sự thú vị trên GitHub.
  • Đối với CMS không đầu, một số lựa chọn thay thế chắc chắn cho WordPress là Prismic, Contentful, Sanity, Ghost và ButterCMS