Tôi đã chuyển Blog từ Next.js sang Astro

07 thg 12, 2024
- News

Vấn đề

Xin chào mọi người, tôi là Thành, một lập trình viên và cũng là chủ nhân của blog 2Techy. Ban đầu, tôi đã chọn Next.js để xây dựng blog vì đây là một framework mạnh mẽ, hỗ trợ tốt cho nhiều loại dự án web và có cộng đồng rất lớn. Tuy nhiên, khi duy trì blog trong một thời gian, tôi nhận ra rằng Next.js có thể hơi “nặng” so với nhu cầu thực tế của tôi.

Với một blog nhỏ và nội dung không quá phức tạp, tôi cảm thấy việc sử dụng một framework lớn như Next.js đôi khi dư thừa và làm tăng độ phức tạp không cần thiết. Chẳng hạn, tôi ít sử dụng các tính năng như server-side rendering hay API routes mà Next.js hỗ trợ. Điều này khiến tôi bắt đầu tìm kiếm một giải pháp đơn giản hơn, tập trung hơn vào các trang tĩnh và tối ưu hóa hiệu suất cho nhu cầu của một blog cá nhân.

Blog đã có gì?

Là một tay ngang, trong suốt thời gian sử dụng Next.js để xây dựng blog, tôi đã triển khai một số tính năng và quy trình đáng chú ý, giúp blog hoạt động hiệu quả:

1. Static Site Generation (SSG) với file Markdown

Một trong những ưu điểm lớn của Next.js là khả năng hỗ trợ Static Site Generation (SSG) rất tốt. Tôi sử dụng SSG kết hợp với file Markdown để quản lý nội dung bài viết. Phương pháp này giúp blog tải nhanh hơn vì tất cả các trang được build sẵn và chỉ cần phục vụ dưới dạng tệp tĩnh. Việc sử dụng Markdown cũng rất tiện lợi để viết nội dung, chỉnh sửa, và quản lý version control qua Git.

2. Deploy trên Vercel

Next.js hoạt động rất mượt mà khi deploy trên Vercel – nền tảng được thiết kế tối ưu cho các dự án Next.js. Quá trình deploy tự động sau mỗi lần push code lên GitHub thực sự tiện lợi. Vercel giúp tôi dễ dàng triển khai và cập nhật blog mà không cần phải lo lắng về việc quản lý máy chủ hay cấu hình phức tạp.

Vercel cung cấp các tính năng giúp tối ưu hóa trải nghiệm deploy:

Tự động deploy: Mỗi khi tôi cập nhật mã nguồn trên GitHub, Vercel tự động triển khai blog mà không cần thao tác thủ công, giúp tiết kiệm thời gian và giảm thiểu sai sót. Quá trình này nhanh chóng, dễ dàng và rất phù hợp với một blog cá nhân.
Hỗ trợ preview các thay đổi: Vercel cung cấp tính năng preview tự động cho mỗi pull request, giúp tôi xem trước các thay đổi trước khi chính thức deploy lên môi trường sản xuất. Điều này rất hữu ích để kiểm tra và đảm bảo mọi thứ hoạt động đúng như mong đợi trước khi triển khai chính thức.
Khả năng mở rộng linh hoạt: Mặc dù blog của tôi khá nhỏ, Vercel cung cấp khả năng mở rộng dễ dàng khi blog phát triển. Hệ thống tự động phân phối tải và mở rộng tài nguyên, đảm bảo hiệu suất ổn định dù lưu lượng truy cập có tăng cao.

3. Lưu trữ hình ảnh với Cloudflare R2

Để giảm tải cho Vercel, tôi đã sử dụng Cloudflare R2 làm dịch vụ lưu trữ hình ảnh.

Chi phí thấp: Cloudflare R2 cung cấp một gói miễn phí với dung lượng lưu trữ lên đến 10GB, giúp giảm đáng kể chi phí lưu trữ cho các dự án nhỏ. Điều này giúp tôi tiết kiệm được chi phí khi phát triển mà không cần phải nâng cấp tài khoản quá sớm.
Tốc độ và ổn định: Hình ảnh được phân phối qua mạng lưới CDN toàn cầu của Cloudflare, giúp tăng tốc độ tải trang cho người dùng ở bất kỳ đâu. Đồng thời, Cloudflare R2 cũng đảm bảo độ ổn định cao và tính sẵn sàng, giảm thiểu rủi ro gián đoạn dịch vụ.

4. Tối ưu hóa hình ảnh với Squoosh và Next Image

Để đảm bảo blog của mình luôn tải nhanh và mượt mà, tôi đã kết hợp sử dụng Squoosh và tính năng Next Image của Next.js để tối ưu hóa hình ảnh.

Tối ưu hóa với Squoosh: Trước khi upload ảnh lên Cloudflare R2, tôi sử dụng Squoosh để nén và tối ưu hóa hình ảnh. Squoosh giúp giảm dung lượng tệp ảnh mà không làm ảnh hưởng quá nhiều đến chất lượng, đồng thời hỗ trợ nhiều định dạng hiện đại như WebP và AVIF. Điều này giúp giảm thời gian tải trang, tiết kiệm băng thông, và cải thiện trải nghiệm người dùng.
Tính năng tự động tối ưu của Next Image: Next.js có tính năng Image giúp tự động điều chỉnh kích thước và định dạng ảnh tùy thuộc vào thiết bị người dùng. Bên cạnh đó, tính năng lazy loading của Next Image giúp chỉ tải ảnh khi người dùng cuộn đến chúng, từ đó cải thiện tốc độ tải trang tổng thể.
Sự kết hợp hoàn hảo: Sử dụng Squoosh để tối ưu ảnh trước khi upload, và Next Image để tự động tối ưu hóa khi hiển thị trên website, tôi có thể đảm bảo rằng mỗi hình ảnh đều được tải nhanh và sắc nét trên mọi thiết bị, mà không làm ảnh hưởng đến hiệu suất của blog.

Cách kết hợp này giúp tôi giảm đáng kể thời gian tải trang và cải thiện hiệu suất chung của blog mà không phải hy sinh chất lượng hình ảnh.

5. Quản lý domain với Cloudflare

Khi trỏ domain của blog về Cloudflare, tôi đã nhận được một số lợi ích đáng kể:

Bảo mật mạnh mẽ: Cloudflare cung cấp các tính năng bảo mật như bảo vệ chống DDoS, tự động bảo mật SSL, và WAF (Web Application Firewall). Những tính năng này giúp bảo vệ blog khỏi các cuộc tấn công và mối đe dọa mạng, đảm bảo an toàn cho dữ liệu và người dùng.
CDN và tối ưu hóa hiệu suất: Cloudflare cung cấp một mạng lưới CDN toàn cầu giúp phân phối nội dung nhanh chóng đến người dùng từ mọi nơi trên thế giới. Bằng cách cache tài nguyên tĩnh (như hình ảnh, CSS, JavaScript) tại các server gần người dùng, Cloudflare giảm độ trễ và tăng tốc độ tải trang. Điều này giúp tối ưu hóa trải nghiệm người đọc và làm cho trang web của tôi mượt mà hơn, bất kể họ ở đâu.
Cache thông minh: Cloudflare tự động cache các tài nguyên tĩnh và các trang của website, giúp giảm tải cho máy chủ gốc và tăng tốc độ tải trang. Khi có thay đổi nội dung, Cloudflare sẽ tự động làm mới cache một cách thông minh, đảm bảo nội dung được cập nhật nhanh chóng mà không làm giảm hiệu suất.
Analytics và phân tích lưu lượng: Cloudflare cung cấp các công cụ phân tích lưu lượng chi tiết, giúp tôi theo dõi và đánh giá hiệu suất website. Các chỉ số về lưu lượng, vị trí người dùng, và các sự kiện bảo mật giúp tôi hiểu rõ hơn về hành vi người truy cập và tối ưu hóa blog hiệu quả hơn.

Tại sao tôi chọn Astro cho blog của mình?

1. Mong muốn học hỏi và mở rộng kỹ năng frontend

Mặc dù tôi đã có kinh nghiệm làm backend, nhưng tôi luôn muốn thử thách bản thân trong mảng frontend. Việc chọn Astro là cơ hội tuyệt vời để học hỏi và cải thiện kỹ năng lập trình web của mình. Astro không chỉ cung cấp một công cụ mạnh mẽ mà còn giúp tôi tiếp cận một phương pháp phát triển web mới mẻ, cho phép tôi xây dựng những trang web đẹp và hiệu quả mà không cần phải lo lắng về quá nhiều chi tiết kỹ thuật.

2. Astro Island: Cải thiện hiệu suất vượt trội cho blog của tôi

Khi tìm hiểu về Astro, tôi đã bị ấn tượng mạnh với tính năng Astro Island, nơi mà chỉ các phần cần thiết mới được tải JavaScript, giúp cải thiện hiệu suất của trang web. Cách tiếp cận này giúp giảm dung lượng tải xuống và làm cho các trang của tôi tải nhanh hơn, đặc biệt là trong trường hợp blog có nhiều hình ảnh hoặc nội dung tĩnh. Astro Island mang đến một phương pháp tối ưu mới cho frontend mà tôi thấy rất phù hợp với mục tiêu của blog cá nhân.

3. Mê mẩn với View Transitions trong Astro

Một tính năng tuyệt vời mà tôi thích ở Astro là View Transitions. Với tính năng này, việc điều hướng giữa các trang trở nên mượt mà hơn, không cần tải lại trang đầy đủ. Thay vào đó, chỉ có nội dung cần thiết được cập nhật, tạo cảm giác chuyển cảnh liền mạch.

Astro sử dụng API View Transitions mới của trình duyệt, hỗ trợ hiệu ứng chuyển cảnh như fade, slide, và tùy chỉnh riêng. Bạn chỉ cần thêm một vài dòng mã vào <ClientRouter /> trong phần <head> để kích hoạt tính năng này.

Các lợi ích nổi bật:

Hiệu ứng chuyển cảnh mượt mà: Fade, slide và nhiều tùy chỉnh khác.
Hỗ trợ chuyển cảnh cho cả điều hướng tới và lùi.
Tự động hỗ trợ prefers-reduced-motion.
Tương thích với trình duyệt không hỗ trợ API.

Tính năng này giúp trang web của tôi trở nên hấp dẫn và dễ sử dụng hơn.

Công việc cần thực hiện

1. Chuyển đổi dữ liệu từ Next.js sang Astro

Cả Next.js và Astro đều hỗ trợ định dạng MD và MDX, giúp việc chuyển đổi nội dung giữa hai nền tảng trở nên dễ dàng và nhanh chóng. Việc duy trì cấu trúc và nội dung gốc cũng không gặp vấn đề gì lớn, giúp quá trình chuyển đổi trở nên mượt mà mà không cần phải làm lại quá nhiều công đoạn.

2. Xây lại giao diện với Tailwind và SCSS

Mặc dù Astro hỗ trợ tích hợp với React, Vue và các framework khác, tôi đã quyết định xây dựng giao diện hoàn toàn bằng Astro. Điều này không chỉ giúp tôi học hỏi thêm về các phương pháp tối giản, mà còn mang lại khả năng kiểm soát giao diện tốt hơn. Tôi sử dụng Tailwind CSS để tạo kiểu nhanh chóng và linh hoạt, cùng với SCSS để quản lý, giúp dễ dàng tối ưu hóa mã nguồn. Việc này giúp tôi học được cách phát triển website hiệu quả mà không phụ thuộc vào các thư viện nặng.

3. Quản lý và tối ưu hóa hình ảnh

Trong quá trình tối ưu hóa hình ảnh, tôi vẫn sử dụng Squoosh để giảm dung lượng ảnh mà không làm ảnh hưởng đến chất lượng. Tuy nhiên, tôi cũng cần tìm hiểu thêm về cách tối ưu hóa hình ảnh trực tiếp trong Astro, đặc biệt là việc sử dụng các tính năng sẵn có để nâng cao hiệu suất và tốc độ tải trang cho website.

4. Tối ưu hóa quy trình build và triển khai

Khi sử dụng Vercel, tôi gặp phải các vấn đề về chi phí scale và giới hạn tài nguyên. Cụ thể, Vercel có chi phí tăng lên khi blog cần mở rộng, đồng thời có những hạn chế về cấu hình và tài nguyên mà tôi không thể kiểm soát tốt. Vì vậy, tôi quyết định chuyển sang Cloudflare Pages kết hợp với Cloudflare Workers. Điều này giúp tôi tối ưu chi phí triển khai và đạt được hiệu suất tốt hơn, đặc biệt khi blog cần mở rộng mà không gặp phải các giới hạn hay chi phí cao như với Vercel.

Kết luận

Chuyển từ Next.js sang Astro không chỉ mang lại những cải tiến về mặt công nghệ mà còn giúp tôi học hỏi và tối ưu hóa hiệu suất trang web một cách hiệu quả hơn. Mặc dù còn một số thách thức, quá trình chuyển đổi hiện diễn ra thuận lợi và mang lại những kết quả tích cực.

Trong bài viết tiếp theo, tôi sẽ chia sẻ chi tiết hơn về quá trình này, từ di chuyển dữ liệu đến việc tái cấu trúc giao diện và tối ưu hóa hiệu suất. Hy vọng rằng những thông tin này sẽ hữu ích và giúp bạn trong các dự án của mình. Cảm ơn các bạn đã theo dõi!