Đập đi xây lại

Đập đi xây lại

Vấn đề

Chào các độc giả của 2coffee.dev, cũng khá lâu rồi tôi mới được gặp lại các bạn. Sau khi hoàn thành và khởi chạy dự án OpenNotas vào những ngày đầu của tháng 6, một tuần sau đó là khoảng thời gian dành cho việc "fix bug", thì mới đây tôi đã có một chuyến du lịch ngắn ngày để "reset" lại bản thân sau cả nửa năm trời cày cuốc. Nhân tiện không biết mọi người đã có kế hoạch cho chuyến đi chơi ở đâu chưa? Hãy dành ít thời gian để nghỉ ngơi, tận hưởng cuộc sống chứ đừng nên lao vào công việc quá nhiều kẻo bị "quá tải".

Hiện tại công việc của tôi có phần bận bịu hơn trước, tôi đang phải làm nhiều việc với tuần suất cao hơn. Nhưng quan trọng là vẫn coi trọng việc viết, nó là một phần không thể thiếu trong cuộc sống của mình.

Mỗi khi "lặn" đi đâu đó một thời gian, hoặc là rất bận (như đi du lịch chẳng hạn :XD), hoặc là tôi đang làm một cái gì đó lớn. Đúng vậy, đi chơi chỉ là lý do phụ chứ chính ra thì tôi đang lên kế hoạch "refactor" lại trang blog này.

Tình hình blog hiện tại

Nhờ sự yêu mến của bạn đọc mà blog ngày càng có nhiều người đọc hơn, song song với đó là nhiều vấn đề mới cũng được phát hiện ra.

Chỉ còn vài ngày nữa thôi, tức đến hết ngày 30/06 - Nuxt 2 sẽ chính thức kết thúc vòng đời (End Of Life) và bị ngừng hỗ trợ, hay còn gọi là bị "khai tử". Thay vào đó là chỗ của Nuxt 3. Blog hiện tại đang sử dụng Nuxt 2 cùng với cơ chế Static Site Generator (SSG) để tạo ra các trang web cho bạn đọc sử dụng.

SSG là một kỹ thuật giúp tạo ra các trang web tĩnh từ dữ liệu động. Thay vì truy vấn liên tục vào cơ sở dữ liệu cho mỗi lần truy cập từ máy khách (SSR), thì SSG tạo ra các tệp HTML chứa nội dung của bài viết trong một lần "build" duy nhất. Lúc này máy chủ chỉ đơn thuần là chứa các tệp tin tĩnh (static), sẵn sàng trả về cho người dùng, từ đó tăng tốc độ xử lý.

Có một vấn đề không chỉ của riêng Nuxt mà cũng là vấn đề của rất nhiều khung thư viện trợ giúp xây dựng trang web dựa trên JavaScript đó là: chúng có quá nhiều mã JavaScript. Thế thì sao chứ? Thì thành thật mà nói cũng chẳng sao cả. Chúng ta ngày càng sỡ hữu nhiều thiết bị điện tử hiện đại thì bấy nhiêu mã JS có nhằm nhò gì? Điều đó là đúng nhưng cũng đáng lưu ý. Việc quá lợi dụng vào JS khiến cho nhiều trang web trở nên chậm chạp một cách không xứng đáng, bạn có sẵn sàng ngồi đợi 5 - 10s tải trang chỉ để đọc một bài viết ngắn, hay là sẵn sàng chi ra vài chục MB dữ liệu 4-5G để xem một mẩu tin nhanh? Đối với tôi chắc chắn là không!

Nếu đã quen với Nuxt, việc nâng cấp lên Nuxt 3 sẽ dễ dàng hơn. Thực tế tôi đã làm việc với Nuxt 3 trong nhiều dự án khác và nhận ra vấn đề dư thừa mã JavaScript vẫn còn tồn đọng. Sau đó tôi tìm đến các công cụ tạo trang tĩnh như 11ty, hugo với mong muốn tạo ra các trang web tĩnh hoàn toàn. Tưởng sau nhiều lần cân đo đong đếm, cái tên 11ty được chốt nhưng nghĩ lại là một người thích tăng trải của người dùng, nhiều khi cần phải thêm mã JavaScript ở đâu đó. Điểm chung của các công cụ tạo tĩnh là không ưu tiên JS cho nên việc thêm JS vào sẽ có nhiều bất lợi, và dĩ nhiên là tôi không muốn mất nhiều thời gian cho việc đó.

Mới đây trong bài viết Angular, React, Vue, Svelte… rồi tiếp theo sẽ là gì?, tôi đề cập đến một cái tên mới Fresh. Đây là một khung giao diện rất mới dựa trên Deno. Fresh nổi bật với Interactive islands - tức là trang web của bạn là tĩnh, chỉ có những "hòn đảo tương tác" là có chứa mã JavaScript. Làm như thế, chúng ta sẽ không bị trả về mã JS một cách ồ ạt nữa mà nó chỉ nên được trả về ở những chỗ cần thiết.

Nói đến đây thì chắc bạn đọc cũng biết tôi đang định làm gì rồi đúng không.

Dự tính

Một lần nữa viết lại 2coffee.dev bằng cách sử dụng một "ngăn xếp công nghệ" mới hơn. 1-2 năm trở lại đây, bài viết The Future of the Web is on the Edge đã khơi mào cho nhiều công cuộc nghiên cứu mới của tôi. Thay vì tự triển khai mọi thứ trên một máy chủ tập trung và toát mồ hôi hột vận hành nó thì "Web is on the Edge" nhấn mạnh vào mọi thứ có thể trở thành services - và chúng ta - được hưởng lợi nhiều về tốc độ cũng như chi phí bảo trì máy chủ.

Fresh - chắc chắn rồi sẽ là khung giao diện cho blog. Fresh còn khá mới thế nhưng nó đủ để đáp ứng làm một trang blog đơn giản. Fresh không có SSG mà thay vào đó là cơ chế SSR, SSR có một điểm mạnh hơn đáng kể đó là dữ liệu được cập nhật nhanh chóng thay vì phải qua một bước "build" tốn kém. Fresh cần Deno Runtime để chạy.

Cơ sở dữ liệu là một thành phần không thể thiếu. Nếu như trước, Supabase - dựa trên Postgres là một sự lựa chọn thì giờ đây chúng ta đã có thêm nhiều dịch vụ mới hơn "ra lò". Lợi thế của Supabase đã rõ - có hầu hết triển khai của một máy chủ Postgres, nhưng lại có điểm yếu chí mạng là dung lượng lưu trữ khá thấp, chỉ 500MB miễn phí. Vì thế Turso đang là ứng cử viên hoàn hảo.

Turso là một cơ sở dữ liệu SQLite cũng thuộc dạng serverless. Không cần quan tâm đến dữ liệu ở đâu, chỉ cần viết các lệnh SQL là đã có thể tương tác được với dữ liệu của mình. Turso cũng chịu chơi khi "cho" dung lượng khá lớn, tới 9GB lưu trữ cùng 1 tỉ lượt đọc (read), 25 triệu lượt ghi (write) vào cơ sở dữ liệu hàng tháng. Ngoài ra, Turso thừa hưởng "Web is on the Edge" khi nó cho phép nhân bản cơ sở dữ liệu ở nhiều vị trí trên thế giới. Điều đó có nghĩa bạn sẽ được kết nối đến cơ sở dữ liệu gần nhất khi truy vấn dữ liệu.

Deno đã được ra mắt cách đây nhiều năm, mặc dù thể hiện ra rất nhiều ưu điểm hơn Node.js nhưng có vẻ như vẫn cần thêm nhiều thời gian để được cộng đồng đón nhận nồng nhiệt. Fresh cần Deno Runtime để chạy và đó cũng là một vấn đề vì cho đến thời điểm hiện tại, có rất ít các bên cung cấp một môi trường chạy Deno, kể cả Cloudflare.

2coffee.dev được triển khai hoàn toàn trên Cloudflare PagesCloudflare Worker, nếu tò mò bạn đọc có thể xem lại bài viết Hoàn tất chuyển đổi blog thành "Web is on the edge". Vì các services hiện tại như trang giao diện và máy chủ api đều được triển khai dựa trên JavaScript Runtime nên được Cloudflare hỗ trợ rất tốt, nhưng Deno thì không. Điều đó có nghĩa là Fresh chưa thể triển khai được lên trên này.

Chà, xem ra đang có nhiều vấn đề phát sinh thì phải.

Sự nhìn nhận

Giữa rừng của những vấn đề thì may mắn thay, Deno cũng có dịch vụ gọi là Deno Deploy cho phép triển khai nhanh chóng các ứng dụng cần Deno Runtime.

Nhìn sơ qua thì Deno Deploy khá tương đồng với Cloudflare Worker, đều cung cấp môi trường chạy Deno hoặc Node.js dưới dạng serverless. Chỉ cần có tài khoản, sử dụng cli để triển khai thông qua những dòng lệnh.

Cũng giống như Cloudflare Worker, Deno Deploy đi kèm với các dịch vụ như Deno KV (cơ sở dữ liệu dạng key-value, Deno Cron (chạy cron) và Deno Queue cho bài toán xử lý lần lượt. Tuy vậy các dịch vụ của Deno Deploy còn tương đối đơn giản và chưa thể so sánh ngang hàng với Cloudflare.

Điểm trừ rất lớn là dung lượng miễn phí khá thấp. Nếu như Cloudflare cho số lượng không giới hạn khi sử dụng Pages và 100.000 lượt gọi vào Wokers (có thể hiểu đơn giản là lượt gọi API) hàng ngày thì Deno Deploy chỉ duy nhất có 1 triệu lượt truy vấn vào API endpoints hàng tháng. Kèm theo đó là giới hạn cho KV chỉ ở mức 450.000/300.000 đọc/ghi dữ liệu.

Nhìn chung, không phải tất cả tính năng sẽ được bê sang phiên bản mới nhưng tôi sẽ cố gắng để không phải thay đổi nhiều về giao diện vốn đã quá quen thuộc. Bật mí cho bạn đọc trong phiên bản tiếp theo sẽ có thêm một tính năng gọi là "A Cup", nó tương thự như một bài Tweet hoặc Threads. Bằng việc chia sẻ những suy nghĩ của mình thông qua một chủ đề ngắn với mong muốn được trao đổi với bạn đọc nhiều hơn nữa.

Cuối cùng vẫn là vừa học vừa làm, làm đến đâu thì đọc và nghiên cứu tài liệu đến đó. Fresh là một cái tên mới, Deno thì chưa có nhiều kinh nghiệm thực tế. Tuy nhiên không vì thế mà nản lòng, hy vọng tôi sẽ rút ra được thêm nhiều kinh nghiệm trong lần triển khai này.

Tổng kết

Với tất cả những điều ở trên, rõ ràng chúng ta đang có rất nhiều thách thức. Thay vì lựa chọn một cách làm an toàn, theo lối cũ thì hãy thử nghiệm một công cụ mới sẽ như thế nào. Chúng ta thường nghe nhiều đến câu nói "thoát khỏi vùng an toàn" để làm được nhiều thứ hơn thì đây là lúc để chiêm nghiệm xem liệu điều đó có đúng!

Hãy quay lại với mục đích ban đầu của trang blog này, đó là để vừa học vừa làm. Không chỉ thông qua những bài viết mà còn là cả quá trình xây dựng và phát triển trang blog. Vì thế tôi không ngại khi phải áp dụng những công nghệ mới, dù thành công hay thất bại đó cũng sẽ là một bài học dành cho mình cũng như nhiều người khác.

Hy vọng rằng trong một đến hai tuần tới tôi sẽ giới thiệu được một phiên bản 2coffee hoàn toàn mới đến tất cả bạn đọc. Một lần nữa cảm ơn tất cả đã dành thời gian theo dõi tôi. Nếu có bất kỳ thắc mắc nào hãy để lại bình luận phía dưới bài viết nhé.

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.
Author

Xin chào, tôi tên là Hoài - một anh Dev kể chuyện bằng cách viết ✍️ và làm sản phẩm 🚀. Với nhiều năm kinh nghiệm lập trình, tôi đã đóng góp một phần công sức cho nhiều sản phẩm mang lại giá trị cho người dùng tại nơi đang làm việc, cũng như cho chính bản thân. Sở thích của tôi là đọc, viết, nghiên cứu... Tôi tạo ra trang Blog này với sứ mệnh mang đến những bài viết chất lượng cho độc giả của 2coffee.dev.Hãy theo dõi tôi qua các kênh LinkedIn, Facebook, Instagram, Telegram.

Bạn thấy bài viết này có ích?
Không

Bình luận (1)

Avatar
Ẩn danh2 tháng trước
interactive island thì cũng khá same same khái niệm với Astro, mà Astro thì cho phép anh tái sử dụng lại code Vue trước đây, sao anh vẫn chọn Fresh, anh giải đáp giúp em được không?
Trả lời
Avatar
Xuân Hoài Tống2 tháng trước
Chào e, một câu hỏi khá thú vị vì trước khi viết bài a đã nghĩ sẽ có người thắc mắc hoặc thậm chí đến mình củng phải thắc mắc. Việc chọn một thứ gì đó phụ thuộc rất nhiều vào hoàn cảnh của mỗi người, kiểu như là về kiến thức lẫn những công cụ mà họ đang tiếp xúc hàng ngày ý, đôi khi là cả thiên kiến cá nhân nữa. Thực tế a đã biết đến Fresh từ khá lâu rồi, từ hồi nó còn là beta và thi thoảng vẫn theo dõi nó, và ngày càng thấy nó được đầu tư nghiêm túc, tài liệu khá đơn giản nhưng "sạch sẽ", dễ hiểu. Còn thành thật mà nói a mới biết đến Astro cũng có kiến trúc đảo tương tự như Fresh cách đây ít hôm thôi, khi vô tình đọc được một bài viết của người khác. Có thể Astro tốt, nhiều lợi thế nhưng Fresh cũng rất tiềm năng, qua đó a cũng muốn tìm hiểu xem Deno liệu có tốt như lời đồn để còn đi loan tin 😅.