Learning to be a giant.

Tìm hiểu về Nextjs

17 Feb 2024 | NEXTJS DEV

NextJS là gì? Kiến thức NextJS cơ bản bạn cần biết

NextJS là framework mã nguồn mở được xây dựng trên nền tảng của React, cho phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện.

Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những công cụ mạnh mẽ và phổ biến trong việc phát triển ứng dụng web hiện đại - NextJS.

NextJS không chỉ đơn giản là một framework React. Nó là một môi trường phát triển mạnh mẽ, mang lại hiệu suất tuyệt vời và trải nghiệm người dùng vượt trội. Bằng cách tận dụng các tính năng quan tích hợp sẵn, NextJS cho phép chúng ta xây dựng các ứng dụng React một cách nhanh chóng và hiệu quả.

Hãy cùng nhau bắt đầu hành trình tìm hiểu sâu về NextJS - một công cụ không thể thiếu đối với các nhà phát triển web nhé.

1. NextJS là gì?

NextJS là framework mã nguồn mở được xây dựng trên nền tảng của React, cho phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện với người dùng, cũng như xây dựng các ứng dụng web React.

Nextjs

NextJS được ra đời vào năm 2016, thuộc sở hữu của Vercel. NextJS bắt đầu trở nên phổ biến vào năm 2018 và tiếp tục tăng trưởng mạnh mẽ trong cộng đồng phát triển web vào những năm sau đó. Sự kết hợp của các tính năng như Server-side Rendering (SSR) với Static Site Generation (SSG) đã giúp NextJS trở thành sự lựa chọn hấp dẫn cho nhiều dự án phát triển ứng dụng web.

2. Các tính năng chính của NextJS

2.1 Routing trong NextJS

2.1.1. Automatic Routing

NextJS sẽ tự động tạo các router dựa trên cấu trúc thư mục của chúng ta. Ví dụ, nếu bạn tạo một file có tên là about.js ở thư mục pages. NextJS sẽ tạo router là /about.

2.1.2. Nested Routing

Chúng ta có thể tạo các thư mục con để tạo các router lồng nhau. Ví dụ, nếu bạn tạo một folder có tên blog nằm trong folder pages, bên trong folder blog lại có file post.js, đường dẫn sẽ là pages/blog/post.js, thì router mà NextJS tạo ra sẽ là /blog/post.

2.1.3. Dynamic Routes

Bạn có thể tạo các router động bằng cách sử dụng cặp dấu [] trong tên file. Ví dụ nếu đường dẫn là pages/blog/[slug].js thì NextJS sẽ tạo ra các router như /blog/blog-dau-tien hoặc /blog/blog-thu-hai. Với slug là một giá trị bất kì do bạn truyền vào.

Để tạo liên kết giữa các trang, bạn sử dụng component Link được cung cấp sẵn bởi NextJS ở thư viện next/link. Sử dụng Link thay cho thẻ a giúp tránh việc tải lại trang và tối ưu hóa hiệu suất.

2.1.5. Query Parameters

Bạn có thể truyền dữ liệu giữa các trang sử dụng query parameters trong router bằng cách sử dụng ký tự dấu chấm hỏi ? trong tên file. Ví dụ, pages/product.js có thể có các router như /product?productId=0001.

Một ví dụ trực quan hơn là giả sử bạn có một file product.js có nội dung như sau:

// pages/product.js
import { useRouter } from 'next/router';

function ProductPage() {
  const router = useRouter();
  const { productId } = router.query;

  return (
    <div>
      <h1>Product Details</h1>
      <p>Product ID: {productId}</p>
    </div>
  );
}

export default ProductPage;

Khi người dùng truy cập vào địa chỉ /product?productId=123, NextJS sẽ định tuyến bạn đến trang /product, và ở trang này bạn sẽ nhận được giá trị cuả productId mà bạn truyền vào.

Các bạn có thể tạo một file để chuyển hướng sang trang /product như sau:

// pages/index.js
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Welcome to the Store</h1>
      <Link href="/product?productId=123">View Product 123</Link>
      <Link href="/product?productId=456">View Product 456</Link>
    </div>
  );
}

export default HomePage;

Hoặc sử dụng hook có tên là useRouter được cung cấp sẵn bởi next/router:

// pages/index.js
import { useRouter } from 'next/router';

function HomePage() {
  const router = useRouter();

  const goToProduct = (productId) => {
    router.push({
      pathname: '/product',
      query: { productId },
    });
  };

  return (
    <div>
      <h1>Welcome to the Store</h1>
      <button onClick={() => goToProduct(123)}>View Product 123</button>
      <button onClick={() => goToProduct(456)}>View Product 456</button>
    </div>
  );
}

export default HomePage;

2.2 Rendering trong NextJS

2.2.1. Server-side Rendering (SSR)

2.2.1.1. SSR là gì?

Từ những năm 2000, SSR đã được sử dụng rất phổ biến, gọi nó là SSR vì hầu hết các logic phức tạp trên trang web sẽ được xử lý ở phía server.

Cơ chế của SSR như sau:

  • Khi user truy cập vào một trang web, trình duyệt sẽ gửi request tới server
  • Server sẽ nhận request, truy cập vào dữ liệu trong database, render ra HTML
  • Trả HTML kèm với CSS, JS về cho browser
  • Browser nhận được HTML thì tiến hành tải xuống và render ra UI nhưng lúc này chưa có JS
  • Browser tải xuống JS và thực thi các câu lệnh JS
  • Website load xong và có thể tương tác bình thường

Ưu điểm của SSR:

  • Load lần đầu nhanh vì toàn bộ dữ liệu đã được xử lý ở phía server, client chỉ cần nhận về và hiển thị ra cho user
  • Tốt cho SEO vì dữ liệu được render dưới dạng HTML (bạn ấn chuột phải chọn View Page Source một trang web bất kì là sẽ thấy điều này), giúp cho bot của Google khi quét sẽ thấy được toàn bộ dữ liệu
  • Lập trình viên chỉ cần code trên 1 project là đã có thể tạo ra trang web hoàn chỉnh có cả Frontend lẫn Backend, không cần tách ra làm 2 project.

Nhược điểm của SSR:

  • Server sẽ phải xử lý nhiều dữ liệu dẫn đến quá tải
  • Khi user chuyển trang thì cả trang sẽ phải load lại để lấy dữ liệu từ server, dẫn đến trải nghiệm không tốt
  • Hiện tại vẫn còn rất nhiều website đang sử dụng SSR như các website được xây dựng bằng Wordpress, các trang bán hàng lâu đời như thegioididong,…

Vì những nhược điểm nêu trên mà đến năm 2010, sự phát triển của JavaScript đã tiến thêm một bước nữa khi Client-side Rendering ra đời, nhằm khắc phục những nhược điểm của SSR.

2.2.1.2. Client-side Rendering (CSR)

Sở dĩ nó được gọi là CSR vì việc render HTML sẽ được thực thi ở phía client. Hay chúng ta còn gọi là Single Page App (SPA). Các ưu điểm của CSR:

-Chuyển việc xử lý dữ liệu sang cho client giúp server nhẹ việc hơn

  • Trang chỉ cần load một lần duy nhất, khi user muốn lấy dữ liệu mới từ server chỉ cần gọi đến server thông qua AJAX
  • Trang web không cần load lại nhiều khi user chuyển trang, đem đến trải nghiệm tốt hơn cho người dùng

Tuy nhiên, CSR vẫn còn một số nhược điểm như dưới đây:

  • Load trang lần đầu sẽ chậm hơn SSR nếu không tối ưu. Do browser phải tải toàn bộ HTML và JS ở lần đầu load trang, chạy JS và gọi API để lấy dữ liệu từ server rồi mới render lên UI cho user.
  • Lập trình viên phải chia ra làm 2 project: Backend để viết API và Frontend để hiển thị
  • Website không thể chạy nếu tắt JavaScript ở trình duyệt
  • Nếu user sử dụng thiết bị có cấu hình yếu thì sẽ bị load chậm
  • SEO không tốt bằng SSR do dữ liệu được render bởi JS là dữ liệu động

Bạn sẽ thấy CSR thường được sử dụng trong các ứng dụng web cần sự tương tác nhiều, các ứng dụng này chủ yếu được xây dựng bằng ReactJS hay VueJS, AngularJS.

Chính vì những nhược điểm của CSR mà NextJS ra đời, NextJS là sự kết hợp cả SSR lẫn CSR để tạo nên website có trải nghiệm tuyệt vời nhất.

2.2.1.3. SSR trong NextJS

Cách SSR hoạt động bên trong NextJS:

  • Khi user truy cập vào một trang sử dụng SSR của NextJS, browser sẽ gửi một request đến server
  • Trước khi gửi kết quả ra trình duyệt, NextJS chạy hàm getServerSideProps() để lấy dữ liệu cần thiết cho trang. Hàm này thường sẽ dùng để gọi API hoặc truy vấn vào cơ sở dữ liệu để lấy dữ liệu cần thiết.
  • Với dữ liệu cần thiết đã được lấy từ bước trước, NextJS tạo ra một phiên bản đã render đầy đủ cả nội dung và dữ liệu. Sau đó trả phiên bản này ra browser dưới dạng HTML
  • Browser nhận được code HTML từ server và hiển thị lên giao diện. Nội dung của trang sẽ được hiển thị ngay lập tức, sau đó JS được tải xuống và đổ lên để trang có thể tương tác được, ví dụ như hàm onClick().

2.2.2. Static Site Generation (SSG)

SSG là một phương pháp mà NextJS cung cấp sẵn cho chúng ta, cho phép bạn tạo các trang tĩnh và lưu chúng xuống dưới dạng file html tĩnh. Điều này giúp cải thiện hiệu suất tải trang và cung cấp trải nghiệm người dùng tốt hơn vì nội dung được lấy từ file html và hiển thị ngay lập tức mà không cần đợi việc tải về từ phía server.

Khi bạn chạy lệnh next build, NextJS sẽ chạy hàm getStaticProps để lấy dữ liệu cần thiết. Với dữ liệu lấy được, NextJS sẽ tạo ra các phiên bản đã được render, lưu chúng trong thư mục .next, và hiển thị lên khi user truy cập.

3. Tại sao nên sử dụng NextJS? Ưu điểm của NextJS

NextJS hiện tại đang được sử dụng ở rất nhiều dự án khác nhau, sở dĩ NextJS được tin dùng như vậy là vì một số lý do sau:

  • Sử dụng SSR và SSG: Giúp cải thiện tốc độ tải trang và khả năng SEO.
  • Có nhiều tính năng giúp tối ưu hoá hiệu suất như Code Splitting, Lazy Loading, Image Optimization,…
  • Fast Refresh: Tính năng giúp tự động làm mới giao diện mà không cần load lại toàn bộ trang.
  • Tự động tạo file CSS dành riêng cho mỗi trang, giúp tránh xung đột trong việc sử dụng và quản lý các file CSS.
  • Hỗ trợ TypeScript: NextJS cũng hỗ trợ sử dụng Typescript giúp cải thiện tính rõ ràng cho code và thuận tiện cho việc debug về sau.
  • Cộng đồng lớn: NextJS có một cộng đồng sử dụng đông đảo, điều này được chứng minh ở trên chính trang Github của NextJS khi nó đang đạt khoảng hơn 100k sao. Điều này giúp cho NextJS có thêm nhiều nguồn tài liệu phong phú và các plugin hữu ích.
  • Hệ sinh thái mạnh mẽ: NextJS kết hợp tốt với các thư viện và công cụ như Redux, React Query, Apollo - Client và nhiều thư viện khác nằm trong hệ sinh thái của React.
  • Tích hợp tốt với React: Nếu bạn đã quen với việc sử dụng React trước đó thì việc làm quen với NextJS sẽ đơn giản hơn rất nhiều.

    4. Nhược điểm của NextJS

    Mặc dù có nhiều ưu điểm nêu trên, NextJS vẫn có những khuyết điểm nên chúng ta cần xem xét trước khi sử dụng nó:

  • Khó học cho người mới: Nếu bạn chưa có hiểu biết cơ bản về Web Fundamentals, JavaScript và React thì việc học NextJS sẽ hơi khó khăn. Nhất là khi bạn gặp các khái niệm như SSR hay SSG.
  • Khó khăn trong việc tích hợp với một số thư viện bên ngoài: Một số thư viện và plugin có thể cần phải điều chỉnh hoặc tùy chỉnh để hoạt động tốt với Next.js. Ví dụ như để sử dụng Redux trong ứng dụng NextJS, các bạn cần cài thêm thư viện next-redux-wrapper để quản lý state trên cả server và client.
  • Phụ thuộc vào hệ sinh thái của React: Next.js phụ thuộc vào React, vì vậy nếu bạn không quen thuộc với React hoặc không muốn sử dụng React thì NextJS không phải là lựa chọn tốt.
  • Đòi hỏi chạy trên server NodeJS: Để deploy ứng dụng NextJS, bạn cần có một máy chủ NodeJS, việc này có thể làm tăng chi phí và quá trình triển khai sẽ trở nên phức tạp hơn.
  • Cấu trúc dự án phức tạp: Với các dự án lớn, việc quản lý cấu trúc dự án không cẩn thận lúc ban đầu sẽ dẫn đến việc khó quản lý sau này. Tuỳ vào tính chất của dự án và yêu cầu mà các bạn có thể cân nhắc có nên sử dụng NextJS trong dự án của mình hay không. Một số dự án thường được sử dụng NextJS để triển khai như: Trang tin tức, Blog, Landing Page,…

Nhìn chung thì website nào cần khả năng SEO tốt nhưng vẫn đem lại trải nghiệm mượt mà cho người dùng thì sẽ được cân nhắc sử dụng NextJS.

5. Kết luận về NextJS

Qua bài viết này đã giúp các bạn hình dung được phần nào về NextJS. NextJS là một React framework phù hợp với nhiều kiểu dự án khác nhau, tuy nhiên cần phải dựa vào tính chất của dự án để quyết định xem có nên sử dụng NextJS hay không.

Chúng ta đã có cái nhìn tổng quan về sức mạnh và tính linh hoạt của NextJS trong việc phát triển ứng dụng web. NextJS không chỉ đơn giản là một công cụ, mà là một trợ thủ đắc lực mang đến sự thuận lợi và tăng cường hiệu suất cho các dự án.

Với khả năng tối ưu hóa và tích hợp linh hoạt, NextJS giúp tối đa hóa trải nghiệm người dùng và giảm thời gian phát triển. Đồng thời, nó cũng cung cấp sự hỗ trợ đáng kể, tạo nền tảng vững chắc để khám phá và tiến xa hơn trong thế giới phức tạp của phát triển web.

Related Posts

Comments