Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

  53 Lượt xem

Tìm hiểu về Next.js

Next.jsReact

Tôi là một kỹ sư mới tốt nghiệp, được phân công vào dự án từ tháng 7 và bắt đầu sử dụng React trong công việc hàng ngày. Tôi đang tận hưởng việc học hỏi mỗi ngày và làm việc với React.

Trong quá trình đó, từ đàn anh, người luôn hỗ trợ tôi, tôi nhận được lời khuyên rằng “React đã trở nên dễ sử dụng hơn, có cái gọi là Next.js nữa đó”.

Thực tế, trong tài liệu chính thức của React, có giới thiệu như sau:

Khi xây dựng toàn bộ ứng dụng bằng React, chúng tôi đề xuất sử dụng các framework full-stack như Next.js hoặc Remix.

Do đó, lần này, tôi sẽ tổng hợp và so sánh tại sao nên chuyển từ React sang Next.js, cái gì có thể làm được trong Next.js, và tại sao nó được coi là xuất sắc.

Next.js và React là gì

Next.js

Next.js là một framework của React, cung cấp cấu trúc cơ bản để xây dựng ứng dụng web hiệu suất cao, với khả năng làm việc như một máy chủ, cho phép hiển thị trang web mà không cần máy chủ.

React

React là một thư viện JavaScript tập trung vào việc xây dựng giao diện người dùng (UI) cho ứng dụng web, cho phép tạo giao diện người dùng từ các thành phần.

Lý do Next.js ra đời

Với sự phổ biến của thiết bị di động, môi trường duyệt web đã thay đổi, đưa ra nhu cầu quan trọng về tốc độ hiển thị trang web và SEO. Trước đây, với client-side rendering, việc tạo HTML trên trình duyệt gây ra nhược điểm là trễ trong hiển thị. Do đó, server-side rendering (SSR) đã thu hút sự chú ý làm giải quyết những thách thức này, và Next.js đã ra đời.

Các tính năng thêm vào Next.js

  • Server-side rendering (SSR)
  • Static site generation (SSG)
  • Tối ưu hóa hình ảnh
  • Chức năng định tuyến và nhiều tính năng khác

CSR là gì

Là viết tắt của Client-side rendering (tạo ra trên phía máy khách).
Khi có yêu cầu, nhận phản hồi và thực hiện việc hiển thị trên phía trình duyệt.

NextJS1.png

Đặc điểm của CSR

  • Hỗ trợ nội dung động: Có thể tạo ra nội dung động phản ánh vào đầu vào của người dùng.
  • Trải nghiệm người dùng thời gian thực: Có thể cập nhật nội dung ngay lập tức.
  • Thời gian hiển thị lần đầu lớn: Bởi vì phải tạo HTML trên trình duyệt.

SSR là gì

Là viết tắt của Server-side rendering (tạo ra trên phía máy chủ).
Khi có yêu cầu, thực hiện việc hiển thị trên máy chủ và gửi phản hồi.

NextJS2.png

Đặc điểm của SSR

  • Thời gian hiển thị lần đầu nhanh: Vì tạo HTML trên máy chủ.
  • Hỗ trợ nội dung động: Có thể tạo ra nội dung động phản ánh vào đầu vào của người dùng.
  • Bất lợi cho SEO: Khó khăn khi nhúng thông tin cần thiết vào HTML.

SSG là gì

Là viết tắt của Static Site Generator (trình tạo trang tĩnh).
Tạo HTML trước và gửi phản hồi khi có yêu cầu.

NextJS3.png

Đặc điểm của SSG

  • Thời gian hiển thị lần đầu nhanh: Vì tạo HTML trước.
  • Đối với SEO có lợi: Có thể nhúng thông tin cần thiết vào HTML.
  • Không hỗ trợ nội dung động: Không thể tạo nội dung động phản ánh vào đầu vào của người dùng.

Kết luận

Next.js đã thêm vào nhiều tính năng mới không có trong React, và chúng được sử dụng một cách linh hoạt vì mục đích sử dụng khác nhau.

Tài liệu chính thức của Next.js cung cấp nhiều nội dung học tốt, vì vậy tôi sẽ tiếp tục học tại đây.

Tôi đã tạo bài viết này trong quá trình học tập, nếu có sai sót, tôi mong nhận được sự chỉ trích.

Cảm ơn bạn đã đọc đến cuối cùng.

dev_pro_it
Đang làm IT tại Japan

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Bắt đầu ngay với RồngVàngIT - nền tảng chia sẻ kiến thức lập trình tuyệt vời cho kỹ sư Việt Nam!

Hãy đăng nhập để sử dụng hàng loạt các chức năng tuyệt vời của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic