RSC dành cho nhà phát triển Astro

 (overreacted.io)
2 điểm bởi GN⁺ 2025-05-10 | 3 bình luận | Chia sẻ qua WhatsApp
  • Astro và React Server Components (RSC) đều triển khai theo cách tương tự trong việc tách mã phía server và phía client
  • Trong Astro, Astro Component và Client Island mỗi bên đảm nhiệm vai trò chức năng riêng
  • RSC chia cùng một khái niệm thành Server Component và Client Component, đồng thời dùng chỉ thị 'use client' để thiết lập ranh giới
  • So với Astro, RSC linh hoạt hơn trong việc xây dựng UI tương tác và chia sẻ mã
  • Cả hai mô hình đều có cấu trúc với luồng dữ liệu một chiều từ server sang client

Giới thiệu và khái niệm cơ bản

  • Astro cung cấp hai loại component chính là Astro Component và Client Island
  • Astro Component có phần mở rộng .astro, chỉ chạy trên server hoặc tại thời điểm build, và có thể thực hiện những việc mà phía client không làm được như truy cập file system, truy vấn DB, hay gọi dịch vụ nội bộ
  • Client Island là component dành cho React, Vue... chạy trong trình duyệt và đảm nhiệm phần tương tác với người dùng
  • Có thể render Client Island bên trong Astro Component, nhưng không thể gọi Astro Component từ Client Island
  • Cấu trúc này đảm bảo tính một chiều khi dữ liệu luôn chỉ chảy từ server sang client

Ví dụ mã và phân chia vai trò

  • Trong ví dụ mã, PostPreview.astro đọc file trên server để lấy tiêu đề, sau đó truyền dữ liệu đó vào Client Island
  • LikeButton được viết bằng React, sau khi trình duyệt tải xong sẽ xử lý thay đổi trạng thái và sự kiện click của người dùng
  • Astro Component và Client Island hoạt động trong hai thế giới khác nhau, và việc truyền dữ liệu cũng chỉ diễn ra theo chiều đi xuống từ Astro Component

So sánh với React Server Components (RSC)

  • Trong RSC cũng giống Astro, có sự phân chia thành server component (Server Component) và client component (Client Component)
  • Trong React Server Component, server component được khai báo bằng hàm JavaScript, và dùng chỉ thị 'use client' để chỉ rõ nơi mã phía client bắt đầu
  • Trong RSC, cùng một file component có thể đảm nhiệm cả vai trò server lẫn client; không cần tách riêng bằng phần mở rộng file như Astro, mà có thể di chuyển ranh giới chỉ với khai báo 'use client' khi cần
  • Nếu component dùng tính năng chỉ dành cho client (ví dụ: useState) hoặc chỉ dành cho server (như truy cập DB), thì khi dùng sai môi trường sẽ phát sinh lỗi build, giúp nhận được phản hồi rõ ràng
Quảng cáo

Khác biệt về mặt trực quan và cấu trúc giữa Astro và RSC

  • Astro có ranh giới rõ ràng nhờ phân biệt file .astro và file JS/TS
  • RSC về cơ bản mọi thứ đều là React nên vượt trội hơn nhiều về khả năng chia sẻ mã và tính linh hoạt
  • Ví dụ, những component trung lập không dùng state hay chức năng phía server (như parser Markdown) có thể được dùng ở cả hai phía
  • Trong RSC, component sẽ tự động được quyết định chạy ở thế giới nào tùy theo đường dẫn import

Ưu điểm và giới hạn của mô hình RSC

  • Ưu điểm của RSC nằm ở khả năng tái sử dụng mã và sự linh hoạt trong việc chuyển vai trò
    • Bất kỳ component nào cũng có thể dễ dàng dịch chuyển ranh giới chỉ bằng khai báo 'use client' khi cần
    • Trong Astro, khi tính chất tĩnh/động của UI thay đổi, việc chuyển đổi mã có thể khá phiền phức; còn RSC giải quyết việc này một cách đơn giản
  • Nhược điểm của RSC là độ khó học cao hơn
    • Lập trình viên phải liên tục để ý mình đang ở “thế giới nào”, nhưng nếu mắc lỗi thì sẽ nhận được phản hồi nhanh thông qua lỗi build
  • Trong Astro, khi phần động của UI tăng lên thì cấu trúc trở nên phức tạp hơn, còn RSC có toàn bộ cây React được hợp nhất, nên việc truyền state và context (Context) diễn ra tự nhiên hơn

Astro lấy HTML làm trung tâm và RSC lấy cây React làm trung tâm

  • Kết quả đầu ra của Astro là HTML, nên mỗi lần chuyển trang sẽ tải lại toàn bộ và không mang đến trải nghiệm SPA hoàn chỉnh
  • Kết quả đầu ra của RSC là cây React (ban đầu là HTML, khi điều hướng thì được truyền dưới dạng JSON...)
    • Nhờ vậy, có thể kết hợp ưu điểm của SPA và MPA
    Quảng cáo
  • Có thể thực hiện làm mới từng phần khi chỉ cập nhật trực tiếp một phần UI từ server, nhờ đó cũng dễ nhận dữ liệu động và giữ nguyên state phía client hơn

Hỗ trợ các tính năng React nâng cao

  • Với cấu trúc cây pha trộn server-client, các tính năng nâng cao của React (ví dụ: <Suspense>, view transition...) được tích hợp hỗ trợ một cách tự nhiên
  • Cũng có thể quản lý trạng thái loading được xử lý theo kiểu declarative ở phía client, cũng như việc trì hoãn font/image/JavaScript/style
  • Mọi tính năng của React đều hoạt động end-to-end mà không bị ngắt quãng bởi ranh giới server-client

Vị thế của RSC và Astro

  • Astro là một framework hoàn chỉnh, còn RSC gần với khối xây dựng hoặc tiêu chuẩn dành cho framework hơn
  • Các triển khai RSC chính thức gồm có Next.js App Router và Parcel RSC

Kết luận và gợi ý

  • Trải nghiệm lập trình viên (DX) của RSC hiện vẫn còn khá thô, nhưng rất đáng để học
  • Nếu bạn chưa từng trải nghiệm Astro thì rất đáng thử; với những lập trình viên thấy RSC khó tiếp cận, Astro sẽ là con đường nhập môn nhẹ nhàng hơn
  • Ngay cả với các lập trình viên chỉ dùng React phía client từ trước đến nay, Astro cũng có thể mang lại trải nghiệm giải quyết vấn đề ngoài dự đoán

Bài viết liên quan

3 bình luận

 
hakoiko 2025-05-13

Hiện tôi đang refactor một ứng dụng React cũ sang Astro.
Trong bài viết, tác giả nhấn mạnh "ngữ cảnh tích hợp". Cần hiểu rằng "ngữ cảnh tích hợp" giúp xây dựng dịch vụ nhanh hơn, nhưng rồi đến lúc nào đó có thể trở thành nợ kỹ thuật.
Từ góc độ bảo trì dài hạn của dịch vụ, "liên kết lỏng giữa các mô-đun độc lập" tốt hơn "liên kết chặt tích hợp".
Và Astro chính là framework linh hoạt nhất cho điều đó.
 
GN⁺ 2025-05-10
Ý kiến trên Hacker News
  • Lý do duy nhất khiến tôi dùng RSC thay vì Astro là vì có thể chia sẻ context giữa các island, ngoài ra không có ưu điểm đặc biệt nào, và thêm một điểm nhỏ nữa là tôi ước bài này nhắc rõ và giải thích khái niệm "code fence" của Astro, ý tưởng này phân định ranh giới giữa server và client rõ ràng hơn rất nhiều so với use client của React
    • Tôi không nghĩ code fence thực sự biểu thị ranh giới đó, vì code bên dưới fence vẫn nhất thiết chạy trên server, nếu không thì bạn sẽ không thể tham chiếu Astro component ở đó, theo cách tôi hiểu thì fence chỉ có nghĩa là phân biệt "binding vs template" chứ không nói lên "server vs client"
    • Việc chia sẻ context giữa các island trong Astro thực sự rất dễ, xem liên kết này là được https://docs.astro.build/en/recipes/sharing-state-islands/
  • Astro là một web framework dành cho các website lấy nội dung làm trung tâm, https://github.com/withastro/astro
    • Những ai từng dùng Gatsby chắc sẽ nhớ suốt đời cái ngày họ thoát khỏi pipeline xử lý ảnh mong manh được nối với nhau qua GraphQL, (hôm đó họ đã ở trước máy tính), không có bằng chứng gì cả nhưng việc Astro có net promoter score gồm năm con số 9 là một sự thật khoa học
    • Astro cực kỳ tuyệt, từ vài năm nay đã là lựa chọn mặc định của tôi cho SSG, và giờ tôi cũng đang nghiêm túc cân nhắc Astro để làm app, có ai từng dùng Astro cho app chưa?, tôi định chỉ render HTML kiểu island bằng Astro rồi dùng backend non-JS
    • "Một web framework dành cho các website lấy nội dung làm trung tâm", vậy là cũng có những trang web không chạy bằng nội dung mà chạy bằng máy tạo số ngẫu nhiên sao?
  • Tôi cực kỳ cực kỳ yêu Astro, đã dùng từ lần phát hành đầu tiên, cả website cá nhân lẫn landing page của sản phẩm đầu tiên của tôi đều được làm bằng Astro, tốc độ build nhanh, có thể triển khai mà không cần JS, và dùng được bất kỳ frontend library nào, nên với tôi đây là framework tốt nhất