Ở thời điểm hiện tại, Next.js và Gatsby.js có lẽ là hai cái tên nổi bật nhất trong làng front-end framework cho React. Nếu bạn là một frond-end coder, chắc hẳn bạn đã biết một trong hai cái tên này. Nếu bạn vẫn chưa biết thì lời khuyên chân thành của tôi là hãy bắt đầu học ngay, và bạn sẽ cảm thấy tiếc vì mình đã không biết đến nó sớm hơn.

Như đã nói ở trên, cả Next và Gatsby đều là những framework rất tốt. Vậy thì, đâu là những điểm khác biệt giữa hai framework, nên sử dụng khi nào và những điểm hạn chế của hai framework này là gì? Hãy cùng WorkLabs khám phá trong bài viết hôm nay nhé!

Trước tiên, bạn cần biết rằng Next và Gatsby có khá nhiều điểm tương đồng với nhau. Nếu bạn đã từng làm việc với React, chắc hẳn bạn sẽ biết đến một boilerplate nổi tiếng, `create-react-app`. Next và Gatsby cũng tương tự. Hai framework này sẽ tạo sẵn cho bạn một codebase React với những cấu hình cơ bản và cần thiết, để bạn có thể bắt đầu ngay vào việc xây dựng ứng dụng của mình. Nhưng bên cạnh đó, nếu `create-react-app` chỉ đơn giản là tạo ra một codebase mới với cấu hình cơ bản, Next và Gatsby còn cung cấp cho bạn một bộ công cụ rất hay ho để có thể đẩy nhanh tốc độ xây dựng và năng cao chất lượng của ứng dụng. Next và Gatsby, với những phong cách phát triển ứng dụng riêng, sẽ giúp bạn tạo ra một SPA (single page application) với khả năng hoạt động ổn định, tối ưu SEO mà không phải coding quá nhiều.

Nếu nhìn sơ qua hai framework này, có một điểm khác biệt dễ nhận thấy nhất: Gatsby.js là framework Static Site Generated (SSG) trong khi đó Next.js là framework Server-side Rendered (SSR). Sự khác biệt giữa hai khái niệm này có thể được hiểu như sau:

  • SSG: toàn bộ ứng dụng web của bạn sẽ được chuyển đổi toàn bộ thành các file HTML/CSS/JS trong quá trình `build` ứng dụng. (`build` ở đây không phải là quá trình xây dụng (developing) mà là quá trình tổng hợp và xuất ứng dụng với trạng thái sẵn sàng triển khai thực tế). Với các file HTML/CSS/JS đã được tạo sẵn cho toàn bộ ứng dụng, kết quả đạt được là một trang web với tốc độ tải cực kỳ nhanh chóng. Vì mọi thứ đã được tạo sẵn, chỉ cần gửi HTML/CSS/JS đi mà không cần phải xử lý gì thêm. Một điều đặc biệt nữa là, bạn sẽ không cần một máy chủ cho ứng dụng SSG, chỉ cần một web hosting là đủ.
  • SSR: đối với các ứng dụng có tích hợp SSR, các trang sẽ được tạo ra trước trên máy chủ khi yêu cầu được gửi đến, sau đó máy chủ sẽ gửi file HTML/CSS/JS đã được tạo ra đến client và browser sẽ hiển thị cho người dùng. Sự khác biệt so với SSG đó là các trang chỉ được tạo ra trong quá trình máy chủ đang chạy (run-time) và khi có yêu cầu (request).
  • Ban đầu, Next.js là framewor hỗ trợ tính năng SSR, nhưng kể từ phiên bản 9.3, Next.js cũng đã hỗ trợ thêm tính năng SSG, khiến cho sự khác biệt chủ yếu giữa Next và Gatsby không còn quá lớn. Trong phần còn lại của bài viết, chúng ta sẽ cùng thảo luận về những gì Next và Gatsby đang làm tốt, và những điểm mình nghĩ vẫn còn có thể cải thiện được.

1. Những điểm Gatsby đang làm rất tốt 

Plugins 

Không giống như Next.js, Gatsby cho phép người dùng có thể áp dụng các plugin (các tính năng được xây dựng sẵn, chỉ cần kết nối vào ứng dụng) được tạo ra bởi cộng đồng người dùng của Gatsby. Với số lượng lớn và đa dạng, thư viện plugins đã góp phần tạo nên hệ sinh thái bao quanh Gatsby – nơi bạn có thể tìm thấy gần như tất cả những gì bạn cần để áp dụng cho ứng dụng của mình.

Các plugin có thể giúp ứng dụng của bạn có thêm một tính năng nào đó mà không phải code quá nhiều, cũng không cần phải trải qua quá trình cấu hình, kết nối phức tạp. Đặc biệt là khi cần phải kết nối với các ứng dụng khác như Facebook, Google, nếu đã có sẵn một plugin nào đó để thực hiện điều bạn muốn, chúc mừng bạn, bạn chỉ cần áp dụng plugin đó ngay mà không cần phải code lại. Với plugin, thời gian hoàn thiện ứng dụng sẽ được rút ngắn rất nhiều. Khả năng áp dụng plugin vào ứng dụng có lẽ là điều ấn tượng nhất khi bạn làm việc với Gatsby.

Theme & Starters 

Bên cạnh plugin, một trong những điều giúp bạn rút ngắn thời gian để tạo ra ứng dụng là hệ thống theme & starter mà cộng đồng người dùng Gatsby đã tạo ra. Nếu bạn cần tạo một trang blog, hoặc một trang bán hàng online, chỉ cần tìm một theme phù hợp và áp dụng. Rất nhanh chóng, bạn sẽ có ngay một ứng dụng (gần như) hoàn chỉnh để có thể sử dụng ngay. Thật tuyệt vời phải không!!!

GraphQL 

Khi làm việc với Gatsby, bạn sẽ sử dụng GraphQL – ngôn ngữ truy vấn dữ liệu (query language) được tạo ra bởi Facebook (lại là Facebook). Nói một cách ngắn gọn nhất, với GraphQL, bạn có thể truy vấn các thông tin cụ thể và vừa đủ cho ứng dụng của mình. Nếu ứng dụng của bạn có cấu trúc dữ liệu phức tạp, bạn sẽ thấy GraphQL cần thiết như thế nào.

Một ví dụ về GraphQL: bạn có một trang blog, tại trang danh sách các bài viết, bạn cần truy vấn dữ liệu về bài viết của mình. Dữ liệu về bài viết thì có rất nhiều mục như tiêu đề, tóm tắt, hình minh họa, nội dung chính, v/v. Với GraphQL, bạn có thể truy xuất dữ liệu chỉ bao gồm tiêu đề, hình minh họa và tóm tắt để hiện thị trên danh sách, mà không cần phải tạo ra một API mới.

Để làm được việc này, trên máy chủ hỗ trợ GraphQL, các `schema` – cấu trúc của các bộ dữ liệu sẽ được xác định. Với các `schema` này, ứng dụng từ Front-end có thể chọn các mục cụ thể trong schema để truy xuất các mục liên quan và cần thiết, mà không cần phải gửi toàn bộ. Điều này sẽ làm giảm mức khối lượng trao đổi giữa back-end và front-end, tăng tốc độ tải của trang web. GraphQL hiện đã được áp dụng bởi rất nhiều ứng dụng khác nhau, không chỉ mỗi Facebook. Với việc được cài đặt sẵn trong Gatsby, đây là một điểm mạnh nhất phải kể đến của framework này.

2. Gatsby có những điểm nào chưa thật sự tốt 

Đối với Gatsby, điểm chưa thật sự tốt đáng nhắc đến nhất có lẽ là thời gian build ứng dụng. Với đặc điểm là framework hỗ trợ Static Site Generated, tất cả các dữ liệu liên quan sẽ được tổng hợp để tạo ra một bộ file HTML/CSS/JS. Bạn hãy tưởng tượng, nếu bạn xây dựng một trang bán hàng với hàng nghìn sản phẩm, sẽ có hàng nghìn trang cần được tạo ra trong quá trình build. Thời gian để Gatsby hoàn tất việc này trong một vài trường hợp có thể lên đến hàng chục phút, có khi là hàng tiếng đồng hồ.

Một điểm khác bạn cần phải cân nhắc chính là độ linh hoạt của ứng dụng. Nếu ứng dụng của bạn dựa trên cơ sở dữ liệu được cập nhật và thay đổi thường xuyên, bạn nên cân nhắc sử dụng một framework khác thay vì sử dụng Gatsby. Nếu mỗi khi đăng một bài viết mới mà phải dành hàng chục phút để đợi Gatsby build thì quả là không hợp lý. Tất nhiên, vẫn có cách để tải dữ liệu linh hoạt hơn với ứng dụng Gatsby, nhưng những cách làm này sẽ không còn giữ được nguyên vẹn những điểm tốt nhất mà Gatsby có thể mang lại.

3. Next.js có gì hay 

Tính năng Static Site Generated 

Với bản cập nhật 9.3, Next.js đã chính thức hỗ trợ Static Site Generated, tính năng này cũng khá tương đồng với Gatsby khi các trang sẽ được tạo sẵn và lưu trên máy chử, tốc độ tải trang sẽ vì vậy mà tăng lên đáng kể. Khác với Gatsby, bạn có thể xác định những trang nào sẽ được tạo ra trong quá trình build ứng dụng, từ đó giảm đi đáng kể thời gian build. Đây là một điểm khác biệt rất lớn so với Gatsby.

Bên cạnh các trang được tạo sẵn trong quá trình build, trong quá trình hoạt động của máy chủ, các trang mới được tạo ra bằng tính năng Server-side Rendered cũng sẽ được lưu lại tại máy chủ để sử dụng cho những lần sau mà không cần phải `render` lại nữa. Đây được coi là tính năng Incremental Static Generation, một tính năng cực kỳ hay ho của Next.js. Để bạn dễ hiểu hơn, hãy đọc cách thức hoạt động của tính năng này trong đoạn dưới đây:

  • Người dùng A yêu cầu trang example.com/page-1, Next sẽ tạo ra các file HTML/CSS/JS/JASON của trang này và gửi đến user, đồng thời các file này cũng sẽ được lưu lại tại máy chủ (caching)
  • Sau người dùng A, người dùng B cũng yêu cầu trang example.com/page-1. Lúc này, Next sẽ không thực hiện lại quá trình tạo trang (render) mà dùng lại các file HTML/CSS/JS/JASON đã tạo ra trước đó để gửi đến cho người dùng B. Nhờ các file cache này, thời gian tải trang sẽ giảm đi rất nhiều. Những người dùng sau cũng sẽ nhận được những file cache tương tự mà không cần phải render lại.

Với tính năng SSG và ISR, Next.js thật sự là một framework tuyệt với. Chắc chắn bạn cũng sẽ cảm thấy như vậy sau khi đã trải nghiệm những gì mà Next.js mang lại.

Sự linh hoạt 

Không có hệ sinh thái plugin, theme và starter như Gatsby, đây có thể là một điểm yếu của Next. Nhưng điểm yếu này lại là điểm mạnh trong một vài trường hợp khi bạn có nhiều sự chủ động hơn trong việc tạo ra các tính năng cho trang theo cách của riêng mình. Và bạn cũng có thể chủ động chọn lựa SSR hay SSG cho ứng dụng của mình, điều mà Gatsby không cho phép (nếu bạn dùng Gatsby, bạn chắc hắn phải dùng SSG).

Với Next.js, bạn có thể dùng SSG, nhưng đến khi bạn cảm thấy nó không còn phù hợp, bạn có thể chuyển sang SSR bất cứ lúc nào. Hãy cân nhắc thật kỹ khả năng phát triển của ứng dụng cũng như các dữ liệu liên quan, nếu ứng dụng có khả năng phát triển vượt bậc và thay đổi nhiều trong tương lai, tốt nhất bạn nên dùng Next.js.

Vercel 

Vercel, trước đây là Zeit, là công ty đã tạo Next.js. Nếu bạn dùng Next.js, bạn không nhất thiết phải dùng Vercel để triển khai ứng dụng của mình, Nhưng phải nói rằng, Vercel đang làm rất tốt việc triển khai các ứng dụng Next.js. Bạn có thể `go-live` với một câu lệnh duy nhất, bạn có thể trỏ tên miền của mình vào ứng dụng Next với vài cú click chuột, bạn có thể tùy chỉnh để xem trước khi đưa vào hoạt động chính thức. Tất cả những thứ trên đều được thực hiện một cách cực kỳ dễ dàng với Vercel.

Bạn cũng có thể tạo ra một vài API (serverless functions) với Next.js và Vercel như quản lý người dùng, gửi fform, quản lý các logic nhỏ, … Next.js kết hợp với Vercel chắc chắn sẽ là một trong những sự kết hợp hoàn hảo và tối ưu nhất cho bất kỳ lập trình viên Front-end nào.

4. Next.js có gì chưa tốt? 

Có thể nói, tìm một điểm không tốt nổi trội của Next.js không phải là một chuyện dễ dàng nếu không đào sâu vào các khía cạnh kỹ thuật của framework này. Những vấn đề kỹ thuật thì bất kỳ framework nào cũng sẽ gặp phải, nên ta sẽ không đề cập ở đây. Nếu nói về điểm chưa tốt so với Gatsby, ta có thể nói đến thời gian xây dựng nên một ứng dụng hoàn chỉnh có thể hoạt động được. Không giống với Gatsby với hệ sinh thái plugins và theme, đa phần những gì bạn muốn làm với Next.js, bạn đều phải tự làm. Việc này vô tình sẽ khiến cho thời gian tạo ra ứng dụng tăng lên đáng kể. Như vậy, nếu bạn cần tạo ra một ứng dụng trong thời gian ngắn, bạn sẽ cần Gatsby thay cho Next.js.

Thời gian gần đây, đã có nhiều hơn các boilerplate cũng như starter kit cho Nextx.js, nhưng so với Gatsby thì vẫn như muối bỏ bể và vẫn chưa đáp ứng được nhu cầu đa dạng của người dùng. Trong tương lai, có thể sẽ khác nhưng ở thời điểm hiện tại, đây có lẽ là điểm chưa tốt nhất của Next.js.

Kết luận 

Tùy theo nhu cầu và định hướng, bạn nên chọn framework phù hợp nhất với mình.

Next.js cung cấp sự linh hoạt cần thiết cho ứng dụng, kết hợp với Vercel trở thành một tổ hợp tuyệt vời cho bất kỳ lập trình viên nào. Nếu ứng dụng của bạn có khả năng phát triển và thay đổi nhiều trong tương lai, Next.js sẽ phù hợp với bạn.

Nếu bạn cần một trang web với thời gian xây dựng ngắn, ít phải code và ứng dụng không có nhiều thay đổi trong tương lại. Gatsby.js là sự lựa chọn hợp lý.