Khám phá và so sánh 2 framework Fresh và Nextjs

GIỚI THIỆU NEXTJS VS FRESH:

• Fresh:
  • Deno Fresh xây dựng các trang web theo kết xuất phía máy chủ (SSR). Có cấu hình đơn giản và dựa trên các API Web.
  • Deno là Runtime Environment cho Javascript và TypeScript, sử dụng V8 Engine và ngôn ngữ lập trình Rust. Deno có một số điểm nổi bật như:
    • Bảo mật theo mặc định. Không thể truy cập các mô-đun khi chưa được enabled.
    • Hỗ trợ TypeScript.
    • Hệ thống mô-đun chuẩn hoá được đảm bảo hoạt động với Deno.
    • Chỉ gửi duy nhất một tập tin.
  • Cùng tìm hiểu một ít về Deno:
    • Theo tác giả, bảo mật là một trong những tính năng quan trọng nhất của Deno.
    • Trái ngược với Node, Deno mặc định thực thi trong môi trường ảo hoá (sandbox), điều đó có nghĩa là Runtime không có quyền truy cập vào:
      • Các file hệ thống
      • Hệ thống mạng
      • Các kịch bản khác nhau
      • Các biến môi trường
• Nextjs:
  • Next.js là một framework được phát triển trên nền của React. Chính vì dựa trên nền của React nên Next.js mang những cốt lõi tương tự như React. Next.js cung cấp cho chúng ta những ưu thế mới và vượt trội mà ở React không có được. Next.js giúp các nhà phát triển tạo ra các ứng dụng có hiệu suất tốt và web tĩnh siêu nhanh. Điều này được chứng minh khi các tên tuổi lớn đang sử dụng Next.js như: Netflix, Uber, GitHub, Twitch,…
  • Đặc điểm chính:
    • Image Optimization: Tự động tối ưu hóa hình ảnh, cho phép thay đổi kích thước. Chuyển hình ảnh lớn đến các thiết bị nhỏ hơn. Tối ưu hóa hình ảnh theo yêu cầu, điều này không làm giảm tốc độ tải cảu website.
    • Internationalization: Hỗ trợ đinh tuyến quốc tế từ bản v10.0.0 . Bạn có thể cung cấp các ngôn ngữ, ngôn ngữ mặc định và ngôn ngữ miền cụ thể. Nextjs sẽ tự động xử lí việc định tuyến.
    • NextJS Analytics: Với việc điều cần thiết cho sự phát triển khi kiểm tra xem người dùng đang trải nghiệm ứng dụng như thế nào. NextJS cung cấp tính năng với chế độ xem Analytics, giúp bạn có được thông tin về điểm số và dữ liệu thay đổi tổng quan.
    • Zero Config: Tự động thực hiện biên dịch và đóng gói tự động. Tối ưu hóa cho sản phẩm ngay từ đầu.
    • Hybrid SSG và SSR : Sử dụng cơ chế Pre-render để buil-time và request time ở (SSR) trong dự án Single.
    • Incremental Static Regeneration: Nextjs cho phép bạn tạo hoặc cập nhật các trang tĩnh sau khi xây dựng trang web của mình. Tái tạo tĩnh tăng dần cho phép bạn sử dụng tạo tĩnh trên nền mà không cần phải xây dựng lại toàn bộ trang web.
    • TypeScript Support: Tự động hỗ trợ cấu hình TypeScript và biên dịch.
    • Fast Refresh: Một tính năng cực kì hay và thú vị cho phép phản hồi tức thời về các chỉnh sửa được thực hiện đối với các thành phần trên dự án của bạn. Đỉnh điểm là chỉnh sửa các hiển thị nhanh trong vòng một đến hai giây mà không làm mất trạng thái hiện tại.
    • File-system Routing: Nextjs cung cấp cho chúng ta một bộ định tuyến dựa trên hệ thống các tệp được xây dựng về trang (pages). Khi tệp được thêm vào thư mục pages, nó sẽ được tạo dựng sẳn dưới dạng một tuyến. Các tệp bên trong có thể được sử dụng hầu hết phổ biến.
    • API Routes: Đây là một tính năng thú vị và mạnh mẽ, Nextjs cung cấp cho chúng ta để tạo điểm cuối API trong ứng dụng Nextjs. Các tuyến API hoạt động dưới dạng /pages/api/ trong thư mục và được hướng tới api điểm cuối thư mục.
    • Built-In CSS Support: Nextjs cho phép bạn nhập tệp CSS từ môt tệp Javascript. Bạn chỉ cần tạo 1 file CSS và import trực tiếp nó vào file Javascript. Và mọi thứ bắt đầu hoạt động như cách chúng ta muốn.
    • Code-splitting and Bundling: Hỗ trợ thuật toán tách gói được tối ưu hóa được tạo bởi nhóm Google Chrome.

KHÁC NHAU CƠ BẢN:

• Fresh:
  • Sử dụng ESM như kiểu CDN kết nối nhanh chóng cho các gói NPM với định dạng ESM.

• • Quá trình hydrat hoá chỉ sảy ra ở những file trong thư mục island. Còn lại những file ở thư mục components sẽ được build thành file html. VD: Cùng một chức năng đếm Count:
    • Nếu đặt Count.tsx ở component thì chức năng không hoạt động

• • Nếu đặt Count.tsx ở islands thì chức năng mới hoạt động

• Nextjs:
  • Vẫn sử dụng kiểu import npm thông qua node_modules bằng cách dùng npm install

• • Quá trình hydrat hoá ở toàn file

GIỐNG NHAU CƠ BẢN:

• Fresh – Nextjs:
  • Đều dùng File-system routing
  • Đều được phát triển trên nền tảng React
  • Đều là những framework nhẹ và hỗ trợ SEO tốt

ƯU ĐIỂM:

• Fresh:
  • Các components kiểu island thì những page cần có tương tác ở phía máy khách thì sẽ được đặt ở thư mục island để quá trình Hydrat hoá chỉ sảy ra ở những thư mục này thôi, giúp giảm thời gian tải của trang web. Nhằm mục đích giảm khối lượng JavaScript được chuyển đến phía máy khách. Điều này làm tăng đáng kể hiệu suất vì máy chủ sẽ gửi càng ít mã càng tốt cho máy khách (trình duyệt).
  • Deno Fresh sử dụng just-in-time để kết xuất trên máy chủ, có nghĩa là mã được biên dịch khi cần.
  • Fresh không cung cấp bước xây dựng. Bất kỳ mã TypeScript hoặc JSX nào thành mã JavaScript đơn giản đều được thực hiện khi cần
  • Không có bước xây dựng
  • Không cần cấu hình
  • Kết xuất JIT trên máy chủ trước khi gởi yêu cầu đến máy khách
  • Nhỏ & nhanh (khung không yêu cầu JS ứng dụng khách)
  • Tùy chọn hydrat hóa phía khách hàng của các thành phần riêng lẻ
  • Khả năng phục hồi cao nhờ cải tiến liên tục và sử dụng các tính năng của trình duyệt gốc
  • TypeScript được tích hợp sẵn
  • File-system routing
• Nextjs:
  • Mạng lại khả năng SEO tốt
  • Trải nghiệm người dùng tốt hơn
  • Làm việc với cơ chế SSG (Static Site Generation) , SSR (Server Side Rendering) và cả CSR (Client Side Rendering)
  • Khởi tạo nhanh chóng
  • Hỗ trợ nền React cực kì tốt
  • Hỗ trợ cấu trúc và tổ hợp một cách tối ưu
  • Hỗ trợ phát triển tính năng nhanh chóng cho việc cấu hình như: Webpack, Babel,…
  • Bảo mật về dữ liệu
  • Khả năng thích ứng và đáp ứng thay đổi
  • Được ra đời lâu nên phù hợp với mọi dự án hơn, phù hợp để phát triển các dự án lớn hơn là framework Fresh.
  • Nextjs cung cấp khá nhiều tích hợp sẵn và giải pháp mặc định cho việc xây dựng ứng dụng web, giúp giảm thiểu việc phải tạo toàn bộ front-end từ đầu.

NHƯỢC ĐIỂM:

• Fresh:
  • Tuy là một framework nhỏ nhẹ nhanh nhưng để đáp ứng các dự án lớn và nặng thì vẫn chưa được kiểm chứng độ hiệu quả. Nếu trong trường hợp này thì dùng Nextjs vẫn tốt hơn.
• Nextjs:
  • Ít plug-in thích ứng
  • Next.js bị giới hạn bởi việc chỉ sử dụng bộ định tuyến trên tệp của nó, bạn không thể nào sửa đổi cách nó giao dịch với các tuyến. Vì vậy, để sử dụng tuyến động, bạn cần làm việc thêm với Node.js máy chủ.