Vì sao tôi chuyển từ Next.js sang Astro

Tổng quan ​

Nếu quý vị nào từng sử dụng Gatsby, Next.js, hay Nuxt.js, thì có lẽ đã biết rằng các công cụ này đều rất mạnh mẽ và phổ biến trong việc xây dựng các ứng dụng web tĩnh. Tuy nhiên, có một công cụ khác mà mình đã chuyển sang gần đây, đó là Astro.

Astro có thể nói là anh bạn mới tham gia vào thế giới phát triển web, còn khá mới nhưng nhanh chóng thu hút được sự quan tâm trong khi Next.js được cho là framework phát triển trang web phổ biến nhất hiện nay, nó là lựa chọn của một số công ty lớn nhất thế giới như OpenAI, Hulu và Vimeo.

Phân tích các Framework ​

Điểm khác biệt là trong khi Astro là khung MPA không phụ thuộc vào giao diện người dùng được xây dựng để tăng tốc độ thì Next.js là khung SPA dựa trên React tập trung mạnh vào các tính năng.

Bản thân mình đã sử dụng Gatsby, Next.js trong một thời gian dài và thấy rằng nó rất mạnh mẽ, nhưng sau khi thử nghiệm Astro, mình nhận thấy rằng Astro cung cấp một số lợi ích mà Next.js không có, và một điều bất ngờ hơn là khi build với Vercel, Astro nhanh hơn Next.js rất nhiều lần.

Cả Gatsby, Next.js phụ thuộc vào React, trong khi Astro không phụ thuộc vào bất kỳ thư viện nào cụ thể, điều này giúp Astro trở nên linh hoạt hơn trong việc sử dụng các thư viện khác nhau.

Để hiểu rõ hơn mời quý vị xem bảng so sánh bên dưới:

Cách tiếp cận ​

Astro dễ tiếp cận hơn Next.js với những người có ít kinh nghiệm. Quý vị có thể sử dụng bất kỳ ngôn ngữ thành phần UI nào mà mình biết: React, Preact, Svelte, Vue, Solid, Lit, v.v. đều được.

Ngoài ra Astro còn tích hợp sẵn ngôn ngữ của nó với phần mở rộng *.astro giúp quý vị dễ dàng sử dụng các mẫu trợ năng và nâng cao hơn trong quá trình viết code.

Dưới đây là một đoạn mã ví dụ về cách sử dụng một số thành phần trong Astro:

---
import Layout from '@/layouts/PageLayout.astro';
import Stats from '@/components/widgets/Stats.astro';

const metadata = {
  title: 'Nguyen Pham - Web Developer & Designer',
  ignoreTitleTemplate: true,
};
---

<Layout metadata={metadata}>
 
  <Stats
    stats={[
      { title: 'Dự án', amount: '164' },
      { title: 'Đánh giá', amount: '24.8K' },
      { title: 'Năm làm việc', amount: '18' },
      { title: 'Tiện ích', amount: '>1K' },
    ]}
  >
  <Fragment slot="bg">
    <div class="absolute inset-0 bg-stone-50 dark:bg-stone-900"></div>
  </Fragment>
</Stats>

</Layout>

Nên chọn khi nào? ​

Câu trả lời ngắn gọn là điều đó phụ thuộc vào quý vị, và dự án mà quý vị đang làm. Lý do mà mình chuyển từ Next.js sang Astro là vì Astro cung cấp một số lợi ích mà Next.js không có, và một điều bất ngờ hơn là khi build với Vercel, Astro nhanh hơn Next.js rất nhiều lần.

Chọn Astro nếu quý vị mới bắt đầu phát triển web và muốn việc tiếp cận nhẹ nhàng hơn. Astro không phức tạp và quý vị có thể xây dựng toàn bộ trang web chỉ bằng HTML và CSS. Quý vị sẽ không cần phải lo lắng nhiều về hook và stale, atoms, selectors, reactions, hoặc derivations.

Tuy nhiên nếu quý vị đã có kinh nghiệm về React và muốn hưởng lợi vô số tính năng, plugin và tài nguyên của nó thì Next.js lại là lựa chọn phù hợp. Cũng nói thêm rằng Next.js cung cấp một cộng đồng lớn và mạnh mẽ, giúp quý vị giải quyết vấn đề nhanh chóng hơn, và với các dự án lớn, đòi hỏi sự phức tạp hơn thì Next.js là lựa chọn tốt nhất hiện nay.