DEV Community: Phúc Nguyễn

Tôi đã bắt đầu dùng TurboRepo từ con số 0

Phúc Nguyễn — Thu, 26 Feb 2026 07:23:45 +0000

Làm thế nào để bắt đầu?

Trước tiên là cứ chạy một dự án mẫu lên để xem cấu trúc cái đã chứ tự cấu hình thì khó quá.
Chạy lệnh:

npx create-turbo@latest

Sau khi chạy lệnh này thì sẽ có dự án mẫu

Sau khi có dự án mẫu chúng ta bắt đầu tìm hiểu về các khái niệm cơ bản:

Cấu trúc của dự án này như nào ?

Đây là một dự án mono-repo với next js
Cấu trúc chính:
apps/ # Các ứng dụng và services
packages/ # Thư viện, tooling và các package khác
Lưu ý: Không hỗ trợ các package lồng nhau nhiều cấp

Quản lý các dependencies như nào ?

Có hai loại dependencies bao gồm:

External dependencies: Từ npm registry, giúp xây dựng ứng dụng và thư viện nhanh hơn
Internal dependencies: Chia sẻ chức năng trong repository, cải thiện khả năng khám phá và sử dụng code

Ví dụ cài một External dependencies chung cho các dự án
Nếu cả hai ứng dụng Next.js (ví dụ: apps/web và apps/docs) đều sử dụng lodash, bạn nên cài lodash ở cấp root của monorepo để dùng chung, giúp tiết kiệm dung lượng và đồng bộ phiên bản.
chạy lệnh:
pnpm add lodash -w
(-w hoặc --workspace-root để cài ở root)

Ví dụ cài đặt một Internal dependencies

https://turborepo.dev/docs/crafting-your-repository/creating-an-internal-package

Nếu bắt đầu với shadcn ui hãy làm theo hướng dẫn của tài liệu tại
https://ui.shadcn.com/docs/monorepo

React Scan - Best choise for FE dev

Phúc Nguyễn — Thu, 30 Jan 2025 14:50:22 +0000

Bạn đã bao giờ gặp khó khăn trong việc kiểm soát đoạn mã của mình để tránh re-render giao diện lại một cách liên tục ?

Đã không ít lần bạn phải đau đầu tìm cho mình những lỗi sai ngớ ngẩn hoặc bất lực trong việc tìm lỗi chưa ?

Vậy thì bài viết ngày hôm nay tôi sẽ giới thiệu cho bạn một công cụ kiểm tra và gỡ lỗi vô cùng hiệu quả, giúp bạn tối ưu hoá hiệu suất cho trang web của mình mà không gặp nhiều khó khăn trong việc cài đặt và sử dụng.

Đó chính là react-scan
Bài viết sẽ bao gồm những nội dung chính bao gồm:

React Scan là gì ?
Lợi ích gì khi sử dụng react-scan ?
React Scan hoạt động như nào ?
Áp dụng react-scan vào bài toán thực tế

Đầu tiên hãy cùng tìm hiểu

React-Scan là gì ?

Hãy nói lời tạm biệt với việc trang web của bạn bị render chậm bắt đầu từ giây phút này. React-Scan là một công cụ "giám sát" và "chuẩn đoán" dành cho react. Chúng được thiết kế nhằm mục đích phân tích các vấn đề về hiệu suất và xác định các lần render không cần thiết. Việc ghi lại thông tin chi tiết về các chu kỳ render và tạo bản báo cáo có thể giúp bạn giải quyết vấn đề một cách hiệu quả.

Lợi ích là gì ?

Việc phải ngồi hàng giờ console.log("re-render") chắc hẳn đã từng làm cho rất nhiều ae dev phải đau đầu mất ngủ. Vì thế có thể thấy ngay react-scan sẽ giúp ae tiết kiệm công sức của mình đi rất nhiều trong những lần fix-bug.

Cùng với đó, thay vì đoán và kiểm tra bug từng trang thì giờ đây ae không cần phải mất công như vậy. React-scan được tích hợp sẵn trên dự án và tự động thông báo trực tiếp lên trên giao diện cho anh em thấy những component nào đang có hiệu suất kém và cần cải thiện.

Ngoài ra react-scan còn mô tả chi tiết cấu trúc component dù cho có cồng kềnh đến đâu, giúp cho lập trình viên không cần phải mất thời gian quá nhiều để mò mẫm, giúp cho họ biết được chỗ nào cần callback, chỗ nào cần memo.

React-scan hoạt động như nào ?

Việc cài đặt thêm một công cụ vào project của mình nhằm nâng cao chất lượng code là tốt. Tuy nhiên chúng ta cùng cần phải nắm được rõ cách thức hoạt động của chúng như nào để đảm bảo tính bảo mật cho dự án.

React-Scan hoạt động bằng cách "quét" ứng dụng React của bạn và ghi lại các chu kỳ render của từng thành phần. Dựa trên các thông số hiệu suất, nó sẽ:

Xác định các thành phần bị ảnh hưởng. Những thành phần nào đang render quá thường xuyên hoặc không cần thiết sẽ được làm nổi bật.
Hiển thị trực quan. Bạn sẽ thấy trực tiếp các thành phần "có vấn đề" được đánh dấu trong giao diện người dùng.
Gợi ý cải thiện. Dựa trên thông tin thu thập được, bạn có thể xác định được khi nào cần tối ưu bằng các công cụ như React.memo, useCallback, hoặc các kỹ thuật quản lý state hiệu quả hơn.

Áp dụng react-scan vào bài toán thực tế

Ok, giới thiệu công cụ xịn là vậy nhưng ví dụ thực tế cần phải hiệu quả thì mới đáng dùng. Cùng đi vào ví dụ một với một dự án thực tế của tôi.

Ứng dụng này sử dụng Next.js để tạo ra một trang web tương tác với các tính năng chính:

Thay đổi giao diện (theme): Người dùng có thể nhập các giá trị như "blue", "green", "dark" để thay đổi giao diện.
Nút tăng số đếm: Khi bấm vào nút, số đếm được cập nhật ngay lập tức.
Phát hiện sự kiện nhấn vào vùng chính: Khi người dùng nhấn vào khu vực nội dung, hệ thống sẽ hiển thị thông báo tương tác.
Tương tác với footer: Khi nhấn vào footer, một dòng thông báo sẽ xuất hiện.

Và bạn có thể thấy react scan hoạt động như ở trên hình. Tôi đã bật chức năng giám sát cho Footer và bạn có thể thấy tôi đã cố tình code lỗi để mỗi lần nhập vào input thì toàn bộ giao diện sẽ bị re-render lại và Footer cũng vậy.
Theo nguyên tắc Footer là một component tĩnh và nó phải được memo để tránh các lần re-render không cần thiết như vậy.

Tiếp theo hãy đến với một ví dụ khác:
Ở ví dụ này tôi sẽ setup để react scan có thể ghi chép lại các thao tác của người dùng trên trang web cùng các số liệu để admin có thể phân tích hiệu năng thao tác.

Đầu tiên hãy đăng nhập vào trang web https://dashboard.react-scan.com/login

Tiếp theo đó tạo một project

Sau đó làm theo các bước hướng dẫn để tích hợp React Scan Monitoring vào dự án của mình.
Sau đó quay trở lại trang web và thao tác khiến trang web re-render lại nhiều lần.

Truy cập lại trang dashboard monitor bạn sẽ thấy log của thao tác:

Click chọn một thao tác và ta có bảng phân tích như sau:

Như vậy qua hai ví dụ chúng ta có thể thấy react-scan có thể tích hợp và sử dụng dễ dàng một cách hiệu quả trong project của chúng ta.
Mong rằng bài viết của tôi sẽ giúp các bạn biết thêm được một công cụ mới mạnh mẽ trong việc tối ưu hoá cho trang web của mình. Chúc các bạn cài đặt và sử dụng thành công.

Toán tử ?= trong java script

Phúc Nguyễn — Thu, 16 Jan 2025 15:49:39 +0000

JavaScript giới thiệu một toán tử mới, ?= được gọi là toán tử gán an toàn. Toán tử này được thiết kế để đơn giản hóa việc xử lý lỗi trong đoạn mã của bạn, giúp bạn có đoạn mã dễ đọc và dễ xử lý hơn, đặc biệt là khi xử lý các hàm bắt lỗi try-catch.

Toán tử ?= có tác dụng gì ?

Khi bạn sử dụng ?=toán tử, nó sẽ kiểm tra xem một hàm hoặc thao tác có thành công hay không. Nếu thành công nó sẽ trả về kết quả. Nếu thất bại, nó sẽ trả về lỗi mà không làm sập chương trình của bạn.

Sau đây là cách thức hoạt động của nó:

const [error, result] ?= await fetch("https://dev.to/nddev_18/toan-tu-trong-java-script-1fl-temp-slug-9804469/edit")

Nếu như fetch thành công dữ liệu, error sẽ mang giá trị null và result sẽ là data
Nếu như fetch lỗi thì error sẽ là chi tiết lỗi còn result sẽ là null.

Qua ví dụ bạn sẽ thấy được những lợi ích cụ thế:

Xử lý lỗi đơn giản: Bạn sẽ không còn cần những cú pháp try-catch dài ngoằng khi gọi api nữa.
Clean Code: Đoạn mã của bạn sẽ dễ dàng để đọc và hiểu.
Hành vi nhất quán: Cung cấp một cách xử lý lỗi một cách nhất quán trong đoạn mã của bạn

Ví dụ cụ thể hơn nữa trong việc xử lý lỗi khi call API

async function getData() {
  const [fetchError, response] ?= await fetch("https://api.example.com/data");

  if (fetchError) {
    console.error("Fetch error:", fetchError);
    return;
  }

  const [jsonError, jsonData] ?= await response.json();

  if (jsonError) {
    console.error("JSON error:", jsonError);
    return;
  }

  return jsonData;
}

Đó chính là cách đơn giản để dùng toán tử ?= để xử lý lỗi như một bước tiếp theo của đoạn code tuần tự giúp đoạn mã trở nên đơn giản và dễ đọc hơn rất nhiều.

Cuối cùng tổng kết lại:
Toán tử gán an toàn ?= là một công cụ mạnh mẽ dành cho các nhà phát triển JavaScript, đặc biệt là những người muốn viết mã rõ ràng, đáng tin cậy và có thể bảo trì. Bằng cách đơn giản hóa việc xử lý lỗi, nó giúp ngăn ngừa các sự cố không mong muốn và làm cho mã của bạn mạnh mẽ hơn. Nếu bạn đang làm việc với các lời hứa, hàm không đồng bộ hoặc bất kỳ thứ gì có thể gây ra lỗi, hãy thử toán tử ?=!

Cảm ơn các bạn và chúc các bạn một ngày năng lượng !

37 Tip dành cho sự nghiệp của Frontend Develop (P2)

Phúc Nguyễn — Wed, 15 Jan 2025 15:56:40 +0000

Cre: _ndeyefatoudiop

Kết thúc phần 1 với 20 mẹo, mình xin được tóm tắt lại:

Hãy nắm chắc những thứ cơ bản
Hiểu được website hoạt động như nào
Hãy làm quen với cấu trúc dữ liệu và thuật toán
Hãy học bằng cách thực hành thay vì chỉ đọc và xem
Hãy hỏi khi gặp vấn đề
Tuy nhiên không phải lúc nào cũng đi hỏi người khác
Dừng ngay việc copy paste những đoạn mã mà bạn thực sự không hiểu rõ
Đừng vội tin vào những lời khuyên từ trên mạng
Tư duy tích cực thay vì giấu đi sai lầm của bản thân
Làm nó chạy trước khi tối ưu nó hoàn hảo
Hãy học cách chia nhỏ công việc và quản lý chúng
Luôn hoàn thành nhiệm vụ để có được sự tin tưởng tuyệt đối
Hãy đam mê, hãy nhiệt tình với những thứ mình làm
Luôn sẵn sàng học hỏi những điều mới.
Master công cụ phát triển của bạn
Tập trung phát triển ra sản phẩm giá trị
Hãy học cách quảng bá sản phẩm của mình ?
Thích viết mã thể hiện thông minh ?
Người quản lý của bạn là đồng minh tốt nhất của bạn
Hãy giúp đỡ quản lý của bạn

Các bạn có thể xem lại cụ thể hơn qua bài viết:
https://dev.to/nddev_18/37-tip-danh-cho-su-nghiep-cua-frontend-develop-p1-4off

Còn bây giờ cùng nhau tiếp tục phần 2 với 17 mẹo còn lại:

21. Hãy hiểu bức tranh toàn cảnh đằng sau nhiệm vụ được giao

Đừng chỉ chăm chăm vào code như một cái máy mà không suy nghĩ sâu xa
Cụ thể hơn:

Hiểu tại sao công việc đó có giá trị: Công việc bạn đang làm có đóng góp gì cho mục tiêu chung ?
Hiểu tại sao bạn lại được giao nhiệm vụ đó: Bạn được chọn do năng lực, kỹ năng hay vai trò gì ?
Hiểu công việc đó phù hợp như thế nào trong công ty: Công việc bạn đang làm hỗ trợ mục tiêu lớn hơn của tổ chức ra sao ? Việc nắm bắt được các khía cạnh này không chỉ giúp bạn làm việc hiệu quả hơn mà còn là chìa khoá để bạn phát triển và thăng tiến trong sự nghiệp

22. Hãy đóng góp team(doc, tech talk, demo, etc.)

Điều này không chỉ có lợi ích cho công ty mà còn cho bạn.
Bằng cách tiến hành các bản demo hoặc thuyết trình tài liệu, bạn sẽ thể hiện được kỹ năng của mình và nâng cao hiệu suất của nhóm.
Luôn đặt mục tiêu nâng cao hiệu suất của nhóm bạn nhiều nhất có thể: điều đó thật thú vị và bổ ích

23. Hãy trở thành người được tin tưởng nhất trong một lĩnh vực cụ thể

Thời gian đầu sự nghiệp bạn có thể thử nghiệm khám phá các lĩnh vực khác nhau để khám phá sở thích và năng lực của mình.
Tuy nhiên để tiến xa hơn bạn cần tập trung chuyên môn sâu trong một lĩnh vực cụ thể. Điều này sẽ khiến bạn nổi bật và đáng giá hơn so với việc cái gì cũng biết một ít.
Mục tiêu của bạn là xây dựng kỹ năng hình chữ T
Ngang (broad knowledge): Có kiến thức cơ bản và nhiều lĩnh vực liên quan.
Dọc (deep expertise): Có chuyên môn sâu trong một lĩnh vực cụ thể

24. Phát triển kỹ năng giao tiếp của bạn

Thật không may đây là điều bắt buộc.
Giao tiếp là đặc biệt quan trọng với các nhà phát triển. Chúng ta thường phải làm như sau:

RFCs(Request for Comments)
Demos
Presentations

Vì vậy hãy chăc chắn bạn có trình độ giao tiếp cơ bản, thậm chí là nhiều ngôn ngữ khác nhau.

25. Nghỉ ngơi khi bạn gặp phải một vấn đề

Thật khó khi bạn chìm sâu vào một vấn đề. Một lập trình viên 5 năm đôi khi cũng chưa thể rèn luyện cho mình một thói quen hoàn toàn như vậy.
Tuy nhiên có một sự thật, sẽ luôn có những ý tưởng mới thông minh hơn sau mỗi lần nghỉ ngơi. Vì vậy hãy rời đi nếu như mắc kẹt quá lâu.

26. Tập trung vào điểm mạnh

Đừng cố lãng phí thời gian và năng lượng của mình vào điểm yếu mà bạn không giỏi.
Đừng cố sửa chữa những điểm yếu lớn:
Nếu bạn mất hơn 1 giờ để hoàn thành một nhiệm vụ mà đồng nghiệp chỉ cần 5' thì điều đó cho thấy đó không phải là lĩnh vực mà bạn tập trung.
Dù cho có cố gắng nhiều, bạn cũng khó trở nên xuất sắc ở đó.
Thay vào đó, hãy tối ưu hoá điểm mạnh của bạn. Làm tốt những thứ bạn giỏi và tự nhiên. Nếu điều bạn giỏi có giá trị với công việc và tổ chức, hãy dành nhiều thời gian cho nó hơn để tạo ra sự khác biệt.
Hãy làm những điều xuất sắc hơn, điều đó sẽ mang lại hiệu quả giá trị cao hơn cho sự nghiệp của bạn thay vì cố gắng "bơi ngược dòng".

27. Làm chủ con đường sự nghiệp của bạn.

Không ai sẽ lập kế hoạch cho sự nghiệp của bạn ngoài bạn.
Nếu không có kế hoạch làm việc, bạn sẽ phải làm việc theo kế hoạch của người khác.
Vì vậy hãy đảm bảo bạn sẽ có kế hoạch để đạt được những điều mà mình muốn trong 1/2/5 năm sau.

28. Kết giao cùng những đồng nghiệp

Có rất nhiều lập trình viên trên thế giới và họ đều mang đến những điều tốt đẹp dành cho bạn:
Bạn có thể học các thủ thuật và mẹo từ họ.
Bạn có thể thảo luận về những kinh nghiệm được chia sẻ
Bạn có thể nhờ giúp đỡ trong công việc

29. Hướng dẫn những người trẻ

Đây là lúc bạn nhận ra bạn thông minh hơn bạn nghĩ nhiều.
Việc hiểu và chia sẻ truyền đạt thành công cho một người khác giường như là một thành công.
Bạn sẽ trở thành một người biết nhiều và khẳng định vị thế của mình trong mắt người khác

30. Sẵn sàng đối mặt với tất cả các vấn đề

Việc giải quyết các vấn đề đa dạng khác nhau giúp cho bạn có được một cái nhìn trực quan hơn khi giải quyết các vấn đề khác. Bạn sẽ so sánh được nhiều cách giải cũng như buildup cho bản thân bộ kỹ năng fix bug hoàn hảo hơn.

31. Tìm kiếm cho bạn một người hướng dẫn

Có một người hướng dẫn tốt sẽ là điểm nhấn cho sự nghiệp của bạn hơn.
Mentor có thể giúp bạn phát triển hơn giống như việc họ hiểu về hành trình của bạn.
Họ sẽ hướng dẫn bạn tránh khỏi những cái sai lầm mà họ đã gặp phải.

Vậy làm thế nào để tìm được một mentor ?
Kết nối với nhiều lập trình viên mà bạn đã từng tương tác, hỏi họ những câu hỏi, chia sẻ về những trải nghiệm với họ,...

32. Học sâu vào một framework cụ thể và làm chủ nó

Framework là bộ công cụ hỗ trợ bạn đạt được mục tiêu một cách nhanh nhất.
Vì vậy hãy bỏ qua một số tranh luận vô nghĩa trên mạng.
Chọn một framework bạn cảm thấy thoải mái nhất để học, master nó, thế là đủ. Bằng việc nắm rõ các nguyên tắc cơ bản đề ra ở mẹo đầu tiên, việc chuyển sang sử dụng một framework nào đó là hoàn toàn dễ dàng.

33. Luôn đặt mình vào vị trí người dùng

Ngay khi bản thiết kế nhận được hoặc task được giao bởi PM, bạn hãy cứ đặt mình vào ví trí người dùng và hãy đảm bảo trải nghiệm thật tốt. Với các mẹo tối ưu về hiệu năng thu thập được trong quá trình code bạn sẽ ngày càng nâng cao khả năng này lên.

34. Hãy thoải mái nói không

Hãy biết chọn lựa và nói không với các nhiệm vụ không cần thiết để đảm bảo khối lượng công việc cho bản thân và hoàn thành các dự án một cách chất lượng nhất.

35. Liên tục học hỏi và trau dồi kỹ năng

Với bất kỳ ai trong lĩnh vực công nghệ thông tin việc này là hoàn toàn bình thường. Hãy đầu tư thời gian cho việc học để tồn tại được trong ngành này lâu dài hơn.

36. Khi phải đối mặt với rất nhiều công việc, hãy chọn giảm thiểu tính năng thay vì giảm chất lượng code.

Nhiều chức năng ư ? Điều đó có làm ứng dụng tốt hơn không ?
Ban đầu việc một ứng dụng có thể đáp ứng được nhiều tính năng để nâng cao trải nghiệm người dùng. Tuy nhiên hãy thử tưởng tượng những tính năng đó được xây dựng bằng những dòng mã bẩn và bạn sẽ phải maintain nó lại một lần nữa. Ôi trời thật kinh khủng !!!

37. Luôn tôn trọng những người phối hợp trong dự án cùng bạn

Luôn luôn dành sự tôn trọng tuyệt đối với nhiều ngành nghề khác nhau bởi vì không có họ sẽ không có thành quả tuyệt vời đó đâu. Phát triển ứng dụng là một nỗ lực của cả nhóm ! Hãy luôn nhớ như vậy.

Như vậy trên đây là những mẹo mà một lập trình viên nước ngoài chia sẻ lại trên diễn đàn mà mình đã thu thập và dịch lại. Cảm ơn các bạn đã đọc bài viết này và đừng quên cho mình một tym nhé.

37 Tip dành cho sự nghiệp của Frontend Develop (P1)

Phúc Nguyễn — Tue, 14 Jan 2025 16:02:26 +0000

Cre: _ndeyefatoudiop
Trong tuần vừa rồi mình có đọc được một bài chia sẻ khá hay trên devto của một programer nước ngoài. Nội dung có nói về 37 mẹo mà anh đó thu thập được trong quá trình phát triển trở thành một senior frontend. Mình xin phép được chia sẻ lại với anh/em bằng tiếng việt cũng như một lần nữa note lại những kinh nghiệm quý báu cho bản thân.

1. Hãy nắm chắc những thứ cơ bản

Một ngôi nhà được xây trên một nền móng không chắc chắc sẽ bị sụp đổ chỉ bởi những vấn đề nhỏ nhất. Điều tương tự sẽ xảy ra khi bạn không có kiến thức cơ bản chắc chắn:

Bạn sẽ gặp khó khăn với những nền tảng framework
Bạn sẽ mắc kẹt bởi những vấn đề lạ trong lần đầu tiên
Bạn sẽ không tìm được cách giải quyết chung giữa những vấn đề. Vì vậy bước đầu tiên để trở thành một Frontend Developer chuyên nghiệp, bạn phải master được HMTL, CSS, JS

2. Hiểu được website hoạt động như nào

Sự phát triển không ngừng của công nghệ đã làm cho frontend cũng trở nên phức tạp hơn trong vài năm qua.
Hàng ngàn tools, framework đã được ra đời và sử dụng rộng rãi
Nếu như không trang bị cho mình kiến thức về cách một website hoạt động bạn sẽ không thể hiểu được tại sao lại cần những công cụ hỗ trợ cho việc code web như vậy.

3. Hãy làm quen với cấu trúc dữ liệu và thuật toán

Thường thì cấu trúc dữ liệu và giải thuật thường ít được chú ý đến, tuy nhiên hiện nay đã có nhiều công ty đưa chúng vào phỏng vấn.
Vâng không sai đâu, để viết được những chương trình phức tạp bạn sẽ cần trang bị cho mình một bộ óc logic bằng cách nắm được các thuật toán cơ bản để xử lý vấn đề một cách thuần thục chủ động thay vì chỉ phụ thuộc vào AI.
Đây là danh sách cơ bản nhất:
Cấu trúc dữ liệu: Stack, Queue, Hashmap, Set, Graph, etc
Giải thuật: Dynamic programming, Greedy algorithm, Recursion, etc

4. Hãy học bằng cách thực hành thay vì chỉ đọc và xem

Các video hướng dẫn dường như đánh lừa bạn rằng bạn đang tiến bộ.
Hầu hết các nhà sản xuất video đều khiến bạn cảm thấy rằng bạn đang học và ngày một phát triển thêm, thế nhưng thực tế thì không hề. Việc học thật sự chỉ bắt đầu khi bạn gõ phím và chỉ lại cho người khác.
Vì vậy hãy thực hành thật nhiều và dành lấy cách danh hiệu trong các khoá học.

5. Hãy hỏi khi gặp vấn đề

Bạn không hề cô đơn đâu
Có rất nhiều người có trình độ cao hơn bạn đang ở xung quanh bạn.
Vì vậy đừng lãng phí thời gian cho những vấn đề vặt. Mục tiêu của bạn là cải thiện bản thân vì vậy đừng lãng phí thời gian cho những vấn đề mà người khác đã giải quyết nó.

6. Tuy nhiên không phải lúc nào cũng đi hỏi người khác

Hãy đảm bảo rằng bạn thực sự thực hiện những yêu cầu dưới đây trước khi đem vấn đề đi gặp người khác:
Search chưa ? Kĩ chưa ?
Hiểu được mục đích của mình và biết được tại sao nó không hoạt động chưa ?

Hãy cố ghi lại những vấn đề đã từng gặp và rồi hãy đem chúng đi hỏi nhé, và rồi hãy ghi nhớ lại câu trả lời giúp đỡ để không gặp phải vấn đề tương tự một lần nữa.

7. Dừng ngay việc copy paste những đoạn mã mà bạn thực sự không hiểu rõ

Điều này thực sự rất tệ vì nhiều lý do:

Bạn sẽ gặp phải những đoạn mã không an toàn.
Bạn sẽ không thể maintain chúng lần 2.
Bạn sẽ không thể trình bày nó cho mentor của mình. Điều này liên quan trực tiếp đến GPT vì đôi khi nó chỉ cung cấp câu trả lời chính xác đến 80%.

8. Đừng vội tin vào những lời khuyên từ trên mạng

Tôi đã gặp sai lầm khi tôi bắt đầu lập trình
Tôi đã từng hiểu rằng việc ghi nhớ lại các biến trong React là không tốt vì vậy tôi đã ngừng sử dụng chúng. Điều này là sai lầm và tôi đã ghi nhớ mãi trong cuộc đời của mình.
Vì vậy mỗi khi tôi thấy lời khuyên của ai đó trên mạng:
Lời khuyên này có dành cho tôi không ?
Tác giả có ở trong hoàn cảnh tương tự như tôi không ?

9. Tư duy tích cực thay vì giấu đi sai lầm của bản thân

Thông thường khi bạn là người mới, bạn thường nghĩ rằng mọi người đang chờ đợi sai lầm của bạn để chỉ trích bạn, sa thải bạn.
Thực tế nó ngược lại hoàn toàn, khi một người anh, một người sếp thuê tôi họ rất muốn tôi thành công nếu không họ sẽ cảm thấy lãng phí nguồn lực tài chính mà họ đã đầu tư vào tôi.

10. Làm nó chạy trước khi tối ưu nó hoàn hảo

Việc theo đuổi mọi thứ hoàn hảo dường như là không thể:

Sự trì hoãn
Lãng phí thời gian
Sự quá phức tạp

Vì vậy hãy xem xét kỹ nhé!

11. Hãy học cách chia nhỏ công việc và quản lý chúng

Điều này vô cùng quan trọng:
Chúng sẽ giúp bạn tránh cảm giác choáng ngợp
Cảm giác bạn luôn đi theo tiến độ của mình

12. Luôn hoàn thành nhiệm vụ để có được sự tin tưởng tuyệt đối

Hãy làm sao để chứng minh cho leader của bạn thấy được năng lực của bạn một cách rõ ràng để khi nhìn vào bạn họ có thể yên tâm và giao cho bạn những nhiệm vụ mà họ tin tưởng bạn có thể hoàn thành chúng tuyệt đối.
Đừng làm cho leader của bạn phải thêm một công việc đó chính là giám sát việc làm của bạn nhé.

13. Hãy đam mê, hãy nhiệt tình với những thứ mình làm

Bạn có tin không, bạn có thể bù đắp những khuyết điểm trong công việc của mình bằng sự nhiệt tình.
Đặc biệt là những người mới, hãy thể hiện cảm xúc hào hứng và háo hức.
Không ai muốn thúc ép ai làm việc. Việc kèm cặp đã khó khăn vô cùng rồi, việc phải động viên ai đó nữa thực sự là tồi tệ...

14. Luôn sẵn sàng học hỏi những điều mới.

Điều này chắc chắn sẽ là triết lý vì thời đại công nghệ này cái gì cũng update liên tục!

15. Master công cụ phát triển của bạn

Chia sẻ cho bạn ít bí quyết để cải thiện tốc độ phát triển phần mềm
Hãy hiểu và nắm rõ được:

IDE của bạn
Source code mà bạn đang gõ
Trình duyệt mà bạn đang sử dụng duyệt web

16. Tập trung phát triển ra sản phẩm giá trị

Đừng viết mã trong vô thức, hãy viết những đoạn mã thực sự có giá trị.
Mỗi dòng mã bạn viết ra phải cung cấp giá trị cho:
Khách hàng của bạn.
Công ty của bạn.
Các bên liên quan.
Yên tâm việc hoàn thành tốt những mục đích dự án sẽ giúp bạn nhận được những giá trị không hề nhỏ đâu.

17. Hãy học cách quảng bá sản phẩm của mình ?

Một sản phẩm tốt là một sản phẩm phải đến được tay nhiều người dùng.
Bạn nói bạn làm được một sản phẩm tốt ?
Vậy nó được ai dùng ? Không ai biết về nó haha...

18. Thích viết mã thể hiện thông minh ?

Một nguyên tắc rõ ràng khi làm việc nhóm được xây dựng như sau:
Khả năng đọc > Hiệu suất > Thông minh
Hạn chế viết các đoạn mã thông minh đến nỗi chỉ mình bạn đọc được.
Hãy viết những đoạn mã hiệu quả để đồng nghiệp còn có thể đảm nhiệm tốt đoạn mã của bạn.

19. Người quản lý của bạn là đồng minh tốt nhất của bạn

Điều này dường như rất ít các lập trình viên nhận ra, trừ khi bạn thực sự không may mắn.

20. Hãy giúp đỡ quản lý của bạn

Điều này dễ nhưng nó cũng giống như điều trên, các lập trình viên rất dễ bỏ qua điều đó.
Đôi khi quản lý của bạn bị quá tải công việc. Việc giúp đỡ quản lý làm việc cũng là học hỏi những kinh nghiệm từ những đầu việc mới. Thậm chí nó còn giúp bạn dễ dàng cho các lần cần hỗ trợ khác.

Nên sử dụng Promise hay Async/await ?

Phúc Nguyễn — Tue, 24 Dec 2024 03:56:15 +0000

Đã bao giờ bạn thắc mắc tại sao chúng ta đều có thể xử lý call API với Promise hoặc Async/await và call bằng cách nào thì thuận tiện hơn chưa ?
Trước kia mình hay call bằng Promise khi bắt đầu học về fetch trong javascript và sau đó mình chuyển sang dùng async await khi bắt đầu học trong các khoá học. Mình chỉ nghĩ đơn giản đó là phong cách code của mỗi người dạy khác nhau nên nếu mình quen call bằng cái gì thì mình call như vậy. Cho đến một ngày mình mày mò tối ưu những dòng code mà mình gõ, mình chợt đặt ra câu hỏi rằng "Dùng cách nào call thì sẽ tối ưu hơn nhỉ?"
Đó cũng chính là lý do mà mình viết bài viết ngày hôm nay nhằm chia sẻ cho bạn về câu trả lời của mình cho câu hỏi này.

Mình bắt đầu google search như sau "Có bất kỳ lợi ích nào về việc sử dụng Promise hơn async await?" và mình có đọc được một ví dụ rất hay như sau.
Hãy bắt đầu

const Y = (y) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(y)
        }, 1000)
    })
}

const X = (x) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(x)
        }, 2000)
    })
}

async function test() {
    console.time('TIME_PROCESS')
    const _y = await Y(10)
    const _x = await X(20)
    console.timeEnd('TIME_PROCESS')
    return _x + _y
}

test().then((result) => {
    console.log(result)
})

chạy file và kết quả trả về

Như vậy chúng ta phải mất 3s để hoàn thành việc tính toán cho phép cộng trên. Lý do là await sau đã bị phụ thuộc vào await trước.
Tuy nhiên theo logic thực tế chúng ta sẽ bị sai, x và y là hai phương thức độc lập khác nhau, chúng ta không thể bắt y chờ cho x cũng như không thể bắt x chờ cho y để thực hiện phép tính.
Đây chính là trường hợp chúng ta phải dùng Promise
sửa lại đoạn code một chút

Kết quả trả về chỉ còn

Hoặc chúng ta cũng có thể viết như này

Kết quả trả về cũng chỉ còn 2s

Như vậy các bạn đã tự rút ra được câu trả lời cho vấn đề mình đặt ra hồi đầu bài viết rồi chứ.
Không phải theo phong cách người code mà chúng ta cần phải đặt vào từng trường hợp khác nhau. Chúng ta chỉ có thể sử dụng async await cho các tác vụ tuần tự còn độc lập thì phải dùng Promise để tối ưu rồi.

Cuối cùng mình muốn bật mí cho các bạn thêm một phương thức rất hay có tên là Promise.allSettled, các bạn có thể tìm đọc thêm để có thêm kiến thức nhé.

promise.all tương đương với const X = await promiseA + await promiseB + await promiseC;

Chúc may mắn và thành công !

Tôi sẽ không muốn tạo Table bằng bất cứ cách khác ?

Phúc Nguyễn — Tue, 24 Dec 2024 03:10:56 +0000

Xin chào mọi người, hôm nay lại là một bài viết về một lib quen thuộc mà mình hay sử dụng trong khi lập trình frontend.
Có thể nói rằng Form và Table là hai thành phần con cực kỳ quan trọng và cũng không kém phần phức tạp trong lập trình giao diện Web. Với React JS chúng ta đã quá quen thuộc với ReactHookForm, vậy còn với Table chúng ta sẽ sử dụng lib nào ?

Nếu như bạn đã từng nghe đến Tanstack chắc hẳn bạn sẽ từng nghe đến bộ kit open source chất lượng cao từ nhà phát triển này. Tanstack Table là một trong số đó.

Tanstack Table là một Headless UI cho việc xây dựng và phát triển table một cách mạnh mẽ. Chính vì là Headless UI nên chúng vô cùng linh hoạt và nhẹ. Không có những thành phần UI cứng nhắc, thay vào đó chúng giúp ta xử lý các logic cốt lõi và thoả sức sáng tạo với giao diện mà chúng ta mong muốn. Đó cũng chính là lý do vì sao mà SHADCN UI khuyến khích user dùng Component Table của họ cùng với Tanstack Table.
Lợi ích thứ 2 phải kể đến việc chúng đem lại hiệu suất làm việc rất cao.Thử tưởng tượng một bảng table của bạn có hàng ngàn bản ghi như excel, vậy cây DOM sẽ mất bao lâu để có thể load toàn bộ các cột hàng trong bảng. Với cơ chế ảo hoá được tích hợp kèm react-vitualization chúng ta có thể hiển thị dữ liệu lớn mà không lo ứng dụng bị chậm.
Lợi ích thứ 3 đó chính là các chức năng phụ hỗ trợ đi kèm như: Sắp xếp, Phân trang, Lọc dữ liệu, Nhóm cột, Kéo thả. Thông thường các chức năng này nếu xử lý bằng mã thông thường, lập trình viên frontend phải mất hàng giờ để có thể hoàn tất.

Sự hỗ trợ đa dạng ngôn ngữ cùng framework chính là lợi thế lớn nhất của Tanstack Table.

Với một ví dụ đơn giản sau đây tôi có thể chỉ cho bạn cách làm quen và sử dụng với framework này.
Tôi sẽ bỏ qua bước cài đặt môi trường vì nó khá đơn giản và quen thuộc với các lập trình viên.
Giả dụ tôi đang có một bảng thống kê các hoạt động.
Chúng ta sẽ chia cấu trúc thư mục như sau:

File Column.tsx

export const columnsOverview: ColumnDef<any>[] = [
    {
        accessorKey: 'activity',
        header: '',
        cell: (info: any) => {
            const value = JSON.parse(info.getValue())
            return (
                <div className="flex items-end gap-2">
                    {getActionIcon(value.type)}
                    <div className="bg-gradient-to-r from-red-500 via-orange-300 to-yellow-200 size-[30px] border border-white p-2 rounded-full flex items-center justify-center">
                        <p className="text-[12px] text-white">{value.total}</p>
                    </div>
                </div>
            )
        },
    },
    ...Array.from({ length: 30 }, (_, i) => ({
        accessorKey: `day${i + 1}`,
        header: `${i + 1}`,
        cell: (info: any) => {
            const value = info.getValue()

            if (value === 0) return <div className={cn('size-[100px]')}></div>
            return <>{getChainFire(value)}</>
        },
    })),
]

File TableOverview.tsx

export default function TableOverview<TData, TValue>({ columns, month, filter }: TableOverviewProps<TData, TValue>) {
    const [data, setData] = useState<TData[]>([])

    const parentRef = useRef(null)

    useEffect(() => {
        const data = getChainFireData(1, month, filter, 30)

        setData(transformChainData(data, month) as TData[])
    }, [])

    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    })

    const columnVirtualizer = useVirtualizer({
        horizontal: true,
        count: columns.length - 1,
        getScrollElement: () => parentRef.current,
        estimateSize: () => 100,
        overscan: 5,
    })

    return (
        <div>
            <div className="flex">
                <div>
                    <Table>
                        <TableHeader className="">
                            {table.getHeaderGroups().map((headerGroup) => (
                                <TableRow key={headerGroup.id} className="h-[100px] border-none">
                                    <TableHead></TableHead>
                                </TableRow>
                            ))}
                        </TableHeader>
                        <TableBody className=" border-r border-[#4d86ab] ">
                            {table.getRowModel().rows.map((row, index) => (
                                <TableRow key={row.id} className="h-[100px] border-t-0">
                                    <TableCell
                                        className={cn(
                                            'px-6 text-sm text-gray-700',
                                            index < table.getRowModel().rows.length - 1
                                                ? 'border-b  border-[#4d86ab]'
                                                : ''
                                        )}
                                    >
                                        {flexRender(
                                            row.getVisibleCells()[0].column.columnDef.cell,
                                            row.getVisibleCells()[0].getContext()
                                        )}
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>

                <div ref={parentRef} className="overflow-x-auto overflow-y-hidden scroll-ct w-full">
                    <div
                        style={{
                            width: `${columnVirtualizer.getTotalSize()}px`,
                            height: 'auto',
                            position: 'relative',
                        }}
                    >
                        <Table>
                            <TableHeader>
                                {table.getHeaderGroups().map((headerGroup) => (
                                    <TableRow key={headerGroup.id} className="h-[100px] border-none">
                                        {columnVirtualizer.getVirtualItems().map((virtualColumn) => {
                                            const header = headerGroup.headers[virtualColumn.index + 1]
                                            return (
                                                <TableHead
                                                    key={header.id}
                                                    style={{
                                                        transform: `translateX(${virtualColumn.start}px)`,
                                                        width: `${virtualColumn.size}px`,
                                                        position: 'absolute',
                                                    }}
                                                    className="p-0 text-left text-sm font-semibold text-gray-600 justify-center"
                                                >
                                                    {header.column.columnDef.header !== '' && (
                                                        <div className="flex items-center justify-center flex-col gap-1">
                                                            <div className="text-[20px] font-normal text-[#4d86ab]">
                                                                {getDayOfWeek(
                                                                    parseInt(
                                                                        header.column.columnDef.header?.toString() ??
                                                                            '12'
                                                                    ),
                                                                    parseInt(month),
                                                                    today.getFullYear()
                                                                )}
                                                            </div>
                                                            <div
                                                                className={cn(
                                                                    'size-[60px] rounded-full bg-[#cb8989] items-center justify-center flex text-[30px] font-normal text-white'
                                                                )}
                                                            >
                                                                {header.isPlaceholder
                                                                    ? null
                                                                    : flexRender(
                                                                          header.column.columnDef.header,
                                                                          header.getContext()
                                                                      )}
                                                            </div>
                                                        </div>
                                                    )}
                                                </TableHead>
                                            )
                                        })}
                                    </TableRow>
                                ))}
                            </TableHeader>

                            <TableBody>
                                {table.getRowModel().rows.length ? (
                                    table.getRowModel().rows.map((row) => (
                                        <TableRow key={row.id} className="h-[100px] border-b border-[#4d86ab]">
                                            {columnVirtualizer.getVirtualItems().map((virtualColumn) => {
                                                const cell = row.getVisibleCells()[virtualColumn.index + 1]
                                                return (
                                                    <TableCell
                                                        className="p-0 w-[100px]"
                                                        key={cell.id}
                                                        onClick={() => console.log('Clicky')}
                                                        style={{
                                                            transform: `translate(${virtualColumn.start}px, ${0 * 90}px)`,
                                                            width: `${virtualColumn.size}px`,
                                                            position: 'absolute',
                                                        }}
                                                    >
                                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                                    </TableCell>
                                                )
                                            })}
                                        </TableRow>
                                    ))
                                ) : (
                                    <TableRow>
                                        <TableCell
                                            colSpan={columns.length}
                                            className="px-4 py-4 text-center text-sm text-gray-500"
                                        >
                                            No data available
                                        </TableCell>
                                    </TableRow>
                                )}
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </div>
        </div>
    )
}

Giải thích cho hai file code trên

Định nghĩa cột trong bảng

Cột đầu tiên: Là cột tiêu đề, không hiển thị dữ liệu mà chứa thông tin tiêu đề.
Các cột còn lại: Hiển thị dữ liệu trong 30 ngày (từ day1 đến day30).

Các thành phần chính:

accessorKey: Xác định dữ liệu từ activity trong mảng dữ liệu.
cell: Render nội dung của ô cột, bao gồm biểu tượng (icon) và số liệu tổng (value.total).
JSON.parse: Giải mã chuỗi JSON để hiển thị dữ liệu chi tiết.
getActionIcon(value.type): Hàm tạo biểu tượng phù hợp với loại hoạt động.

Xây dựng bảng và truyền dữ liệu

useReactTable: Khởi tạo bảng từ dữ liệu và cột.
getCoreRowModel: Quản lý mô hình hàng (row model).

Ảo hóa cột với `useVirtualizer`

horizontal: true: Ảo hóa cột theo chiều ngang.
count: Số lượng cột (trừ cột activity).
estimateSize: Kích thước cột khoảng 100px.
overscan: Render thêm 5 cột ngoài vùng nhìn thấy để tránh lag khi cuộn.

Đây chỉ là một ví dụ đơn giản trong việc tạo bảng với tanstack table. Trong thực tế chúng ta còn có thể kết hợp rất nhiều các kỹ thuật khác nhau như đã liệt kê tại phần lợi ích bên trên. Chúng ta có thể sáng tạo rất nhiều trên lib này, nó là lib mà mình rất yêu thích. Chúc tất cả các bạn thành công.

Bạn đã biết đến Web-Vital ?😣

Phúc Nguyễn — Sat, 30 Nov 2024 14:34:05 +0000

Web Vitals là gì và tại sao bạn nên quan tâm?

Là một lập trình viên, bạn đã từng nghe đến Web Vitals chưa?

Nếu chưa, đây là một bài viết ngắn gọn mà mình sẽ chia sẻ lại cho bạn trên vai trò là một lập trình viên Frontend có chút kiến thức về tối ưu hoá nhé.

Let’s go!

Web Vitals là gì?

Web Vitals là một tập hợp các chỉ số của ông kẹ Google dùng để đo lường trải nghiệm người dùng (UX) trên các trang web. Các chỉ số này được thiết kế để phản ánh các yếu tố quan trọng của trải nghiệm người dùng chẳng hạn như tốc độ tải trang, sự tương tác và tính ổn định của giao diện.

Việc tối ưu các chỉ số này trên trang web của bạn sẽ giúp cải thiện trải nghiệm người dùng và khả năng hiển thị trang web của bạn trên Google.

Các chỉ số trên Web Vitals sẽ giúp các lập trình viên, đặc biệt là các lập trình viên frontend, đánh giá hiệu suất trang web của mình và đảm bảo rằng nó đáp ứng nhu cầu về tốc độ và trải nghiệm người dùng mượt mà.

Các chỉ số nào là quan trọng?

1. Largest Contentful Paint (LCP)

Định nghĩa: Đây là chỉ số đo lường thời gian mà phần tử có nội dung lớn nhất trên trang web được tải và hiển thị cho người dùng.

Mục tiêu: Thời gian LCP nên dưới 2.5s.

Các cách làm giảm chỉ số LCP:

Nén ảnh, nén video.
Lazy loading cho các hình ảnh và tài nguyên không quan trọng.
Tải các tài nguyên quan trọng (CSS, JS) ngay lập tức.
Tránh các chuyển hướng trang không cần thiết.

2. First Input Delay (FID)

Định nghĩa: Đây là chỉ số đo lường độ trễ giữa việc người dùng lần đầu tiên tương tác (chẳng hạn như nhấp chuột hoặc ấn phím) và trang web phản hồi lại hành động đó.

Mục tiêu: Dưới 100ms.

Các cách làm giảm chỉ số FID:

Chia nhỏ đoạn mã JS, tránh một hàm JS quá nặng làm chậm quá trình xử lý sự kiện.
Sử dụng kỹ thuật defer hoặc async cho các script không quan trọng để làm giảm thời gian xử lý.
Dùng Web Worker và tách các tác vụ nặng ra khỏi luồng chính để không làm chậm phản hồi của trang.

3. Cumulative Layout Shift (CLS)

Định nghĩa: CLS đo lường sự thay đổi vị trí các phần tử trên trang web trong quá trình tải. Nó phản ánh sự không ổn định bố cục của trang. Ví dụ khi người dùng nhấp chuột vào một phần tử và phần tử đó di chuyển đột ngột.

Mục tiêu: Điểm CLS nên dưới 0.1.

Các cách tối ưu:

Đặt kích thước cho hình ảnh hoặc video.
Áp dụng Skeleton Screens (màn hình xương sống) để giảm sự thay đổi bố cục khi trang tải.

Đo các chỉ số trên như thế nào?

Công cụ mình sử dụng chính để đo là DevTools trên tab Performance hoặc trên tab Lighthouse trong Google Chrome.

Tóm lại

Các chỉ số Web Vitals (LCP, FID, CLS) giúp bạn đánh giá chất lượng trải nghiệm người dùng và là yếu tố quan trọng trong SEO. Để đảm bảo trang web của bạn không chỉ nhanh mà còn mang lại trải nghiệm mượt mà cho người dùng, bạn cần liên tục tối ưu hóa các chỉ số này. Việc cải thiện LCP, FID và CLS sẽ giúp tăng cường khả năng tương tác của người dùng và nâng cao điểm số SEO của bạn, từ đó giúp website của bạn đạt hiệu suất tốt hơn và dễ dàng được Google xếp hạng cao hơn.

Tối ưu Render Danh Sách 🚀

Phúc Nguyễn — Sat, 30 Nov 2024 13:57:08 +0000

Chắc hẳn anh em làm frontend đã từng gặp rất nhiều bài toán render danh sách trong quá trình phát triển web. Đâu đó chúng ta có thể gặp trong các combo box, các scroll view, ... Nếu ít kinh nghiệm và xử lý thông thường, với một list data dài trung bình từ 2000 bản ghi, chúng ta sẽ phải mất 1s chờ đợi để cây DOM hiển thị đủ.

Với xu hướng nâng cao trải nghiệm người dùng hiện tại, chúng ta không thể để một trang web khiến cho người dùng chờ đợi lâu đến như vậy được. Cho nên ngày hôm nay mình sẽ chia sẻ cho ae cách tối ưu hiệu năng và nâng cao trải nghiệm người dùng bằng những kỹ thuật mà mình biết nhé. Let’s go!

Bài toán: Xử lý Data có 10000 bản ghi danh sách nhân viên

Mình sẽ chia các cách từ cơ bản đến phức tạp để giải bài toán trên như sau:

Kỹ thuật 1: Infinite Scroll

Kỹ thuật đầu tiên mình biết khi học JS đó chính là Infinite Scroll.

Giải thích về kỹ thuật này:
Thay vì load toàn bộ danh sách 10000 bản ghi ra cùng lúc thì chúng ta có thể load danh sách bản ghi tầm 20 người. Trong đó, có 10 người sẽ ở vùng nhìn thấy, còn 10 người sẽ ở vùng không nhìn thấy. Khi người dùng cuộn chuột đến người thứ 18 thì tiếp tục load thêm 20 người nữa.

Ưu điểm:

Kỹ thuật này sẽ làm tăng tốc độ tải trang.

Nhược điểm:

Cây DOM sau mỗi lần load sẽ ngày càng phình to dẫn đến quá tải.

Từ nhược điểm của phương pháp trên, chúng ta có thể nâng cao hơn một chút với kỹ thuật Virtual Scrolling.

Giải thích về kỹ thuật này:
Lúc này, thay vì trực tiếp thêm 20 phần tử vào cây DOM mỗi khi loading data, chúng ta sẽ giới hạn số lượng phần tử hiển thị trên cây DOM là 20. Khi người dùng cuộn, các phần tử ngoài vùng nhìn thấy sẽ bị loại bỏ và các phần tử mới sẽ được thêm vào, giúp giữ cho cây DOM luôn nhỏ gọn và hiệu quả.

Mình biết đến kỹ thuật này khi bắt đầu học React.

Giải thích kỹ thuật Virtual Scrolling với thư viện react-window:
Chúng ta sẽ sử dụng một thư viện có tên là react-window để triển khai virtual scrolling.

Đọc đoạn code ví dụ dưới đây:


import React from "react";
import { FixedSizeList as List } from "react-window";

const App = () => {
  // Giả sử chúng ta có một danh sách dài 10.000 mục
  const data = Array.from({ length: 10000 }, (_, index) => `Item ${index + 1}`);

  // Hàm render mỗi item trong danh sách
  const renderRow = ({ index, style }) => (
    <div style={style}>{data[index]}</div>
  );

  return (
    <div style={{ height: 400, width: "100%" }}>
      {/* Sử dụng List component để render danh sách */}
      <List
        height={400}        // Chiều cao của vùng hiển thị
        itemCount={data.length}   // Số lượng phần tử trong danh sách
        itemSize={35}        // Chiều cao của mỗi item
        width={300}          // Chiều rộng của vùng hiển thị
      >
        {renderRow}
      </List>
    </div>
  );
};

export default App;

FixedSizeList: Là một component trong thư viện react-window giúp render các danh sách có chiều cao và chiều rộng cố định. Khi sử dụng FixedSizeList, bạn không cần phải lo lắng về việc tính toán lại kích thước của các phần tử trong danh sách, vì các phần tử này có kích thước cố định.
itemCount: Xác định số lượng phần tử có trong danh sách. Đây là thuộc tính quan trọng để react-window biết cần phải render bao nhiêu mục trong danh sách, mặc dù chỉ có một số lượng nhỏ mục được hiển thị tại một thời điểm.
itemSize: Chiều cao của mỗi item trong danh sách, tính bằng pixel (px). Điều này cần được chỉ định khi sử dụng FixedSizeList, vì react-window cần biết kích thước của từng mục để tính toán số lượng phần tử có thể hiển thị trong một khu vực nhất định.
height và width: Là kích thước của vùng hiển thị danh sách. Chỉ các phần tử nằm trong vùng này mới được render. Các phần tử bên ngoài vùng hiển thị sẽ không được render, giúp giảm tải cho bộ nhớ và tăng hiệu suất render.
renderRow: Là hàm để render ra các phần tử trong danh sách. Hàm này nhận vào đối tượng chứa index (vị trí của phần tử trong danh sách) và style (chứa các kiểu cần thiết để áp dụng cho phần tử, như vị trí, chiều cao, chiều rộng, v.v.). Hàm này chịu trách nhiệm hiển thị nội dung của mỗi mục trong danh sách.

Kết quả sau khi chạy mặc dù danh sách có tận 10000 phần tử, tuy nhiên chỉ có khoảng từ 10 đến 20 phần tử được render tại thời điểm hiện tại tuỳ theo kích thước của vùng nhìn thấy. Khi chúng ta cuộn xuống thư viện sẽ xử lý thay thế các phần tử cho nhau một cách mượt mà, mà không làm chậm ứng dụng.

Với những kỹ thuật như Infinite Scroll và Virtual Scrolling, chúng ta đã có thể giải quyết vấn đề hiệu suất khi render các danh sách dài, đặc biệt là với những ứng dụng web yêu cầu xử lý dữ liệu lớn. Nhờ việc chỉ render các phần tử cần thiết trong tầm nhìn, chúng ta không chỉ giảm thiểu tải cho trình duyệt mà còn nâng cao trải nghiệm người dùng với giao diện mượt mà, không bị giật lag.

Tuy nhiên, mỗi kỹ thuật đều có ưu điểm và nhược điểm riêng, và việc lựa chọn giải pháp nào phù hợp còn tùy thuộc vào nhu cầu cụ thể của dự án. Nếu bạn cần một giải pháp nhanh chóng và đơn giản, Infinite Scroll có thể là lựa chọn tốt. Nhưng nếu bạn cần tối ưu hơn nữa với danh sách lớn, Virtual Scrolling là một bước tiến quan trọng. Chắc chắn, những kỹ thuật này sẽ giúp ứng dụng của bạn không chỉ hiệu quả hơn mà còn trở nên thân thiện với người dùng hơn.

Chúc các bạn áp dụng thành công các kỹ thuật này trong các dự án của mình, và đừng quên thử nghiệm thêm các thư viện như react-window hoặc react-virtualized để cải thiện hơn nữa trải nghiệm người dùng!

Tối ưu Frontend - Độ phức tạp của Style CSS ?🚀

Phúc Nguyễn — Sat, 30 Nov 2024 13:01:38 +0000

Xin chào tất cả mọi người. Hôm nay mình sẽ chia sẻ cho mọi người một chủ đề rất là thú vị liên quan đến tối ưu hoá về độ phức tạp của STYLE.
CSS là một ngôn ngữ lập trình quá quen thuộc với tất cả các lập trình viên web chúng ta, về cơ bản chúng ta đều có thể CSS thuần thục các layout không qua phức tạp. Tuy nhiên khi nói đến việc tối ưu hoá code giao diện, chúng ta lại thường bỏ qua CSS vì cho rằng chúng không ảnh hưởng nhiều đến hiệu năng.

Cho đến tuần làm việc vừa rồi khi ngồi fix bug trên giao diện dự án Thần Số Học của công ty mình, mình mới thấy có cái bug là lặp CSS. Lúc này mình mới chợt nhớ ra là, à lâu quá rồi mình không còn thói quen kiểm tra lại render CSS vì toàn code thư viện bundle ăn sẵn. Đến khi cần phải code thuần HTML và CSS cho các task cụ thể thì mình lại bỏ quên và lãng phí đi kiến thức, kinh nghiệm và trải nghiệm của bản thân về tối ưu hoá cơ bản.

Về cơ bản, nhiều anh em mới code sẽ chủ quan hoặc quên đi kiến thức về việc viết style. Chúng ta cần nhớ rằng có các trường hợp viết style làm ảnh hưởng đến hiệu năng như sau

1. Style Inline Quá Nhiều

Ảnh hưởng hiệu năng là do mỗi lần chuyển trang, trình duyệt không những phải render HTML mà còn phải render lại CSS. Thay vì thế, chúng ta nên để các style được load trong một file CSS duy nhất từ lần đầu để có thể tăng tốc độ load trang cho trình duyệt. Việc này vừa tối ưu hoá file HTML, vừa tận dụng được việc cache file tĩnh từ trình duyệt.

Hướng giải quyết: Mình khuyên các bạn nên viết ra một file CSS riêng và hạn chế sử dụng inline CSS, vì inline CSS vừa khó maintain, vừa khó fix bug.

2. CSS Không Tối Ưu và Quá Phức Tạp

Việc viết CSS với nhiều cấp selector cũng ảnh hưởng đến hiệu năng load trang.

Giải thích: Ví dụ khi viết CSS, có những người sẽ viết kiểu này:

div#container .row > p.someClass { ... }

Khi đó, trình duyệt sẽ phải load từ phải qua trái. Đầu tiên, nó sẽ tìm xem có bao nhiêu class tên là someClass, sau đó lại phải tìm xem trong đống đó có bao nhiêu thẻ p, rồi tiếp tục lại phải tìm xem số vừa tìm được có bao nhiêu thẻ có thẻ cha có class là row. Nghe hết sức mệt mỏi đúng không? Việc đi loằng ngoằng selector như vậy dễ làm cho trình duyệt phải mất thời gian tìm và tính toán, dẫn đến việc render CSS lâu hơn và ảnh hưởng đến hiệu suất tải trang.

Hướng giải quyết
Người ta đã sinh ra một quy chuẩn đặt tên class gọi là BEM (Block Element Modifier), thay vì phải chọc từ thằng cha tít tít ngoài vào, mục đích của BEM là giúp tránh bị trùng lặp CSS giữa các phần không mong muốn. Với quy tắc BEM, bạn có thể đặt tên class theo cách dễ hiểu và dễ quản lý mà không cần phải lo việc viết CSS phức tạp từ các thẻ ngoài vào.

Ví dụ: Giả sử bạn có hai list là card và phone, bên trong mỗi list lại có các item. Lúc này, bạn có thể đặt tên hai khối cha là .card và .phone, và các item bên trong mỗi khối sẽ được mang class riêng là .card__item và .phone__item.

Với cách đặt tên này, bạn có thể chọc thẳng vào tên class và viết CSS mà không cần phải lo việc đụng chạm giữa các item trong các list khác nhau nữa.

3. Font Import Quá Nhiều

Chúng ta đều biết rằng một tệp font TTF thường khá cồng kềnh. Nếu một trang web có quá nhiều font và các font này tải chậm thì liệu text có hiển thị kịp không? Câu trả lời là không, khi đó sẽ có một khoảng trắng trên trang web, điều này trông rất khó chịu và ảnh hưởng đến trải nghiệm người dùng.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
  font-display: swap;  /* Sử dụng swap cho font */
}

Kinh nghiệm xử lý

Cách mình xử lý vấn đề này là sử dụng thuộc tính font-display: swap. Thông thường, các framework hiện nay đã tích hợp kỹ thuật này vào trong framework của họ. Giải thích đơn giản, kỹ thuật này có nghĩa là khi bạn đang load một font cần để hiển thị, text sẽ hiển thị dưới dạng một font khác (font mặc định đã được load từ trước) cho đến khi font chính được tải xong.

Các vấn đề khác

Ngoài vấn đề về font, còn một số trường hợp khác cần lưu ý như:

Không sử dụng file min (chưa tối ưu hoá CSS).
Viết CSS bị lặp lại quá nhiều.
Chồng chéo CSS do đặt trùng tên class.

Kết Luận

Như vậy, việc tối ưu hoá CSS không chỉ giúp cải thiện hiệu năng của trang web mà còn giúp bạn dễ dàng quản lý và bảo trì mã nguồn trong dự án. Dù là những thay đổi nhỏ, nhưng nếu được áp dụng đúng cách, chúng có thể mang lại những cải thiện đáng kể trong tốc độ tải trang và trải nghiệm người dùng.

Hy vọng qua bài viết này, các bạn sẽ có thêm những kiến thức bổ ích để tối ưu hoá mã CSS trong các dự án của mình. Đừng quên chia sẻ những mẹo hay của bạn về việc tối ưu hoá CSS nhé!

Chúc các bạn coding vui vẻ và hiệu quả! 😊

Có thể bạn chưa biết (Phần 1)

Phúc Nguyễn — Fri, 08 Nov 2024 14:19:46 +0000

Trong những năm tháng gần đây xu hướng của lập trình frontend thường nghiêng về phía lập trình viên ReactJS. Với sự ra đời cải tiến của NextJS 13, xu hướng này càng trở nên phổ biến hơn bao giờ hết. Với những tính năng mở rộng đặc biệt về SSR, SSG giúp tối ưu hoá SEO, hiệu suất và trải nghiệm người dùng. Một loạt những tính năng mới đó giúp các lập trình viên dễ dàng triển khai các ứng dụng web phức tạp với ít công sức hơn.

Ngày tôi mới bước chân vào Framework này, tôi tự hỏi liệu nó có gì đặc biệt hơn ReactJS mà lại thu hút các lập trình viên chuyển đổi xu hướng đến vậy. Tôi bắt đầu mày mò tìm hiểu, nhiều người nói rằng NextJS khác gì ReactJS đâu, code ReactJS là code được NextJS mà, nhưng càng tìm hiểu sâu vào nó tôi càng nhận ra Next không chỉ là một Framework đơn giản để chạy trên ứng dụng React.

Ngày hôm nay tôi viết bài viết này để chia sẻ cho mọi người thấy được những sự khác biệt đôi khi đến từ những điều rất đơn giản mà vô tình mọi người không để ý.

Phần 1 - Những thẻ đặc biệt trong NextJS

1 `<Head>`

Thẻ Head trong NextJS cho phép bạn chèn các metadata vào phần <head> của trang html, bao gồm tiêu đề, mô tả. liên kết đến các file CSS/JS và các thẻ metadata khác. Điều này rất hữu ích với SEO và trải nghiệm người dùng, đặc biệt trong các case điều chỉnh cụ thể cho từng trang.

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

2. `<Link>`

Có thể bạn đã quá quen với việc sử dụng thẻ <a> để tạo liên kết nội bộ giữa các trang trong ứng dụng. Tuy nhiên, khi làm việc với NextJS, bạn nên sử dụng thẻ <Link>. Thẻ này có một điểm đặc biệt, được đội ngũ Next phát triển để tối ưu hóa tính năng client-side navigation. Điều này giúp người dùng điều hướng nhanh chóng giữa các trang mà không cần tải lại toàn bộ trang.

Khi bạn sử dụng thẻ <Link> để liên kết đến trang B trong khi đang ở trang A, mặc định thẻ <Link> sẽ sử dụng cơ chế prefetching, tự động tải trước nội dung của trang B. Khi người dùng click vào liên kết, trang B đã gần như sẵn sàng để hiển thị. Tuy nhiên, cơ chế này cũng có những hạn chế đối với hiệu suất của trang web.

Khi một trang có nhiều thẻ <Link>, điều này có thể dẫn đến việc tải trước quá nhiều trang không cần thiết, gây ra hiệu ứng làm chậm tốc độ tải trang, ảnh hưởng đến trải nghiệm người dùng.

May mắn thay, chúng ta có thể tùy chỉnh cơ chế prefetching này một cách thủ công bằng cách sử dụng thuộc tính prefetch={false} trong thẻ <Link>:

<Link href="/about" prefetch={false}>
  <a>Go to About Page</a>
</Link>

Ngoài ra, có một số tùy chọn rất hay mà bạn có thể sử dụng với thẻ <Link> trong NextJS:

scroll: Tùy chọn này cho phép bạn quyết định liệu trang có tự động cuộn lên đầu khi người dùng điều hướng sang trang mới hay không. Điều này hữu ích khi bạn muốn giữ nguyên vị trí hiện tại của người dùng tại trang cũ, thay vì bắt đầu lại từ đầu trang mới.
shallow: Tùy chọn này giúp bạn điều hướng giữa các trang mà không cần tải lại dữ liệu hoặc làm mới hoàn toàn toàn bộ trang. Khi sử dụng shallow={true}, NextJS chỉ thay đổi URL mà không làm ảnh hưởng đến toàn bộ UI của trang web. Điều này giúp cải thiện hiệu suất, đặc biệt trong các ứng dụng có trạng thái người dùng cần được giữ nguyên khi điều hướng giữa các trang.

Ví dụ cụ thể về `shallow`

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

function BlogPage() {
  const router = useRouter();
  const { category } = router.query; // Lấy giá trị query từ URL
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Giả sử bạn gọi API hoặc tải dữ liệu bài viết theo danh mục
    if (category) {
      console.log(`Fetching posts for category: ${category}`);
      // Gọi API để lấy các bài viết theo danh mục
      fetch(`/api/posts?category=${category}`)
        .then((res) => res.json())
        .then((data) => setPosts(data));
    }
  }, [category]); // Chạy lại khi 'category' thay đổi

  return (
    <div>
      <h1>Blog - {category}</h1>
      <div>
        {posts.length > 0 ? (
          posts.map((post) => <div key={post.id}>{post.title}</div>)
        ) : (
          <p>No posts available.</p>
        )}
      </div>
    </div>
  );
}

export default BlogPage;

Giải thích về cách hoạt động trong ví dụ trên

Cập nhật URL mà không reload trang:

Khi người dùng nhấp vào "Tech" hoặc "Design" trong thành phần MyComponent, URL sẽ thay đổi thành /blog?category=tech hoặc /blog?category=design. Tuy nhiên, vì chúng ta sử dụng tùy chọn shallow={true} trong thẻ <Link>, trang không bị tải lại, chỉ có URL trong thanh địa chỉ thay đổi.

Điều này có nghĩa là NextJS sẽ cập nhật URL mà không reload lại toàn bộ trang. Mặc dù URL thay đổi và có thể người dùng đang ở một "trang" khác, nhưng trang hiện tại vẫn giữ nguyên mà không phải tải lại từ đầu. Điều này giúp cải thiện hiệu suất và mang lại trải nghiệm người dùng mượt mà hơn.

Cập nhật nội dung theo danh mục:

Trong ví dụ trên, chúng ta sử dụng useEffect để theo dõi sự thay đổi của category trong URL, giá trị của category được lấy thông qua router.query từ NextJS Router.

Khi URL thay đổi, cụ thể là khi category thay đổi (ví dụ: từ tech sang design), useEffect sẽ gọi lại API để tải lại dữ liệu mới theo danh mục hiện tại. API sẽ trả về danh sách các bài viết liên quan đến danh mục đó, và chúng ta sẽ cập nhật state posts với các bài viết mới.

Điều này có nghĩa là nội dung của trang sẽ được cập nhật mà không cần phải tải lại toàn bộ trang. Các bài viết sẽ được tải và hiển thị lại chỉ với phần dữ liệu mới mà không làm tải lại toàn bộ giao diện trang. Điều này mang lại hiệu suất tối ưu và cải thiện trải nghiệm người dùng, vì người dùng không phải chờ đợi trang tải lại hoàn toàn mỗi khi điều hướng giữa các danh mục.

Tóm tắt:

Cập nhật URL mà không reload trang: Với shallow={true}, NextJS thay đổi URL trong thanh địa chỉ mà không tải lại toàn bộ trang.
Cập nhật nội dung theo danh mục: useEffect theo dõi sự thay đổi của category trong URL, gọi lại API và cập nhật dữ liệu mới mà không làm reload trang.

locale

Tùy chọn locale trong thẻ <Link> cho phép bạn chỉ định một locale cụ thể cho liên kết. Điều này cực kỳ hữu ích khi bạn phát triển một ứng dụng đa ngôn ngữ và muốn cho phép người dùng điều hướng đến các phiên bản ngôn ngữ khác nhau của cùng một trang.

Khi bạn có một ứng dụng NextJS hỗ trợ nhiều ngôn ngữ, bạn có thể sử dụng thuộc tính locale để điều hướng đến phiên bản ngôn ngữ tương ứng của trang hiện tại. Ví dụ, bạn có thể tạo một liên kết đến trang "About" nhưng với ngôn ngữ khác, như tiếng Pháp hoặc tiếng Tây Ban Nha, thay vì tiếng Anh mặc định.

Ví dụ:

Giả sử bạn có một trang "About" và muốn tạo một liên kết dẫn đến phiên bản tiếng Pháp của trang này, bạn có thể sử dụng locale="fr" trong thẻ <Link> như sau:

<Link href="/about" locale="fr">
  <a>Go to About Page (French)</a>
</Link>

3. `<Image>`

Thẻ <Image> trong Next.js được thiết kế để tối ưu hóa việc hiển thị hình ảnh. Thay vì sử dụng thẻ <img> thông thường, bạn có thể sử dụng <Image> để Next.js tự động xử lý việc tải ảnh một cách thông minh, giảm thiểu dung lượng tải về, tối ưu hóa kích thước hình ảnh theo từng thiết bị, và hỗ trợ lazy loading.

Next JS hỗ trợ cache ảnh rất thông minh. Khi ảnh của bạn được yêu cầu lần đầu tiên, nó sẽ load ảnh và lưu vào bộ nhớ cache, vì vậy các lần yêu cầu tải ảnh tiếp theo sẽ nhanh hơn rất nhiều.

Ví dụ ảnh của mình trong public có tên là:

Tuy nhiên, sau khi được load thì nó sẽ có thêm một cái đuôi:

Đuôi c1575e8a là một mã hash được sinh ra khi Next.js tối ưu hóa ảnh (hoặc các tài nguyên tĩnh khác như CSS, JS). Mã hash này là duy nhất cho mỗi ảnh và thay đổi nếu ảnh thay đổi.
Mã hash này giúp ngăn ngừa vấn đề cache cũ trong trình duyệt: nếu ảnh thay đổi (ví dụ: bạn cập nhật hoặc thay đổi ảnh), mã hash sẽ thay đổi và trình duyệt sẽ tải lại ảnh mới thay vì sử dụng ảnh cũ từ bộ nhớ cache.
Thư mục /_next/static/ là nơi Next.js lưu trữ các tệp static sau khi chúng đã được tối ưu hóa. Khi bạn sử dụng Next.js để tối ưu hóa hình ảnh, ảnh đó sẽ được di chuyển vào thư mục này sau khi được xử lý.

Ngoài ra còn có một số props hay dùng:

priority: Đánh dấu ảnh là ưu tiên tải trước các ảnh khác. Cái này có thể ảnh hưởng đến việc cache, vì Next.js sẽ chắc chắn tải ảnh đó đầu tiên.
quality: Đặt chất lượng ảnh từ 1-100. Giá trị mặc định là 75, và bạn có thể giảm chất lượng để tiết kiệm băng thông, nhưng vẫn giữ ảnh ở độ phân giải đủ tốt.
placeholder và blurDataURL: Những tính năng này giúp tạo hiệu ứng placeholder khi ảnh chưa được tải hoàn toàn. Tuy nhiên, ảnh thực tế sẽ được cache và tải nhanh hơn sau khi đã được tối ưu. Lưu ý thuộc tính này chỉ áp dụng được với những ảnh có đuôi .jpg, .png, hoặc .webp.
fill: Khi sử dụng fill={true}, Next.js sẽ tự động tính toán kích thước ảnh dựa trên không gian có sẵn và làm cho ảnh phù hợp với bố cục. Điều này vẫn hoạt động với tính năng cache ảnh của Next.js.
unoptimized: Trong Next.js, thuộc tính unoptimized không phải là một thuộc tính bắt buộc trong mọi trường hợp, và bạn không phải lúc nào cũng cần phải thêm nó vào thẻ <Image>. Tuy nhiên, có một số trường hợp mà bạn có thể cần phải sử dụng unoptimized={true} hoặc có thể gặp phải yêu cầu thêm thuộc tính này khi tải ảnh.

Hai thẻ cuối này thì ít dùng hơn nhưng mình cũng thấy nó đặc biệt nên thêm vào

4. `<Script>`

Thẻ <Script> không chỉ giúp bạn chèn các script vào trang mà còn hỗ trợ tối ưu hóa tải và thực thi các script bên ngoài. Điều này giúp bạn kiểm soát tốt hơn việc tải tài nguyên bên ngoài, giảm thiểu thời gian chờ đợi và cải thiện hiệu suất tổng thể.

5. `<ErrorBoundary>`

Bạn có thể sử dụng một Error Boundary trong React để bắt lỗi JavaScript trong ứng dụng của bạn và hiển thị một giao diện thay thế hoặc thông báo lỗi cho người dùng khi xảy ra sự cố.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để render giao diện lỗi thay vì giao diện bình thường
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Ghi lại lỗi vào một dịch vụ log lỗi (như Sentry, LogRocket, v.v.)
    console.log('Error caught:', error, info);
    this.setState({ errorInfo: info });
  }

  render() {
    if (this.state.hasError) {
      // Bạn có thể render bất kỳ giao diện thay thế nào khi gặp lỗi
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Như vậy tôi vừa giới thiệu cho bạn những thẻ đặc biệt trong NextJS mà tôi đã tìm hiểu. Hi vọng bài viết sẽ bổ sung cho bạn thêm kiến thức về lập trình. Mong rằng những phần tiếp theo sẽ vẫn được các bạn ủng hộ, chúng ta sẽ cùng nhau khám phá thêm những điều mới mẻ hơn nữa. Hẹn gặp lại

NEXTJS-15 BREAKING CHANGE

Phúc Nguyễn — Sun, 27 Oct 2024 18:24:03 +0000

NextJS Version 15 Chính Thức Phát Hành

Vào Thứ Hai ngày 21 tháng 10 năm 2024, sau rất nhiều phiên bản RC được phát hành trước đó, NextJS chính thức cho phát hành phiên bản version 15 của mình.

Không có gì bất ngờ khi những thay đổi được đưa ra tại các phiên bản thử nghiệm trước đó được phát triển trong version mới này của NextJS. Bài viết này là quan điểm của mình về những thay đổi mà mình cảm thấy đáng chú ý.

Trước tiên hãy cùng dạo qua một vòng những thay đổi trong phiên bản lần này. Mình sẽ tóm tắt lại thành các ý chính, còn cụ thể hơn chúng ta có thể vào trang chủ của Vercel để tìm kiếm thông tin chi tiết hơn.

NextJS Blog - Next 15

Như đã hứa trước đó, team phát triển NextJS mỗi năm đều tung ra một lần upgrade version lớn và trong lần gần nhất, họ có nói về một công cụ mới sẽ xuất hiện và thay thế Webpack. Và trong lần release này, nó đã được chính thức đưa vào hoạt động với cam kết tốc độ build nhanh hơn phiên bản trước rất nhiều lần.

TurboPack

Trong phiên bản 15 của Next.js, công cụ TurboPack được giới thiệu với tốc độ đáng kinh ngạc so với các phiên bản trước. TurboPack được thiết kế nhằm tối ưu hóa thời gian build và phát triển ứng dụng với khả năng xử lý nhanh gấp nhiều lần so với Webpack, vốn là công cụ phổ biến trước đây.

Theo các thử nghiệm do nhóm phát triển Vercel công bố, TurboPack có thể tăng tốc độ build gấp 700 lần so với Webpack trong các dự án lớn, nhờ khả năng tận dụng tối đa tài nguyên phần cứng và kiến trúc mới. So với các phiên bản cũ, sự cải tiến này giúp tăng hiệu suất build, giảm thời gian chờ đợi khi thực hiện thay đổi mã nguồn, từ đó cải thiện trải nghiệm cho các anh mắt thâm =)).

Khi khởi tạo dự án mới NextJS 15, đội ngũ phát triển cũng đã tự động thêm flag --turbopack vào script trên môi trường dev cho chúng ta tại file package.json.

Dependencies

Thay đổi thứ hai đó chính là về dependencies. Chúng ta có thể thấy version mới nhất của React (v.19) tại file package.json.

Hiện tại, React vẫn chưa đưa ra version 19 chính thức, tuy nhiên version RC cũng là version ổn định để test thử trên product một cách ngon lành :3. Nhưng mà lỗi thì chưa có ai support đâu hehe :]

Hook Xử Lý Form

Mặc dù các hook xử lý form được React đưa ra thử nghiệm như useActionState, useFormStatus, ... tuy nhiên đã được NextJs đem vào chính thức. Các bạn có thể search các keyword trên để tìm đọc thêm. Cá nhân mình thì không ấn tượng về những thằng này lắm vì react-hook-form đã hỗ trợ mình tất cả những case này rất là lâu rồi. Sau này nếu có cần optimize code, giảm bớt thư viện bên ngoài lại thì có lẽ mình sẽ cần sau.

React-Compiler

Một thay đổi khác là về react-compiler. Trên version 15 này, chúng ta có thể sử dụng thử nghiệm react-compiler cho dự án của mình. Để sử dụng cụ thể, các bạn có thể cài theo các bước. Mình sẽ để đường link hướng dẫn cụ thể tại đây và các bạn có thể làm theo:

NextJS Docs - React Compiler

Cá nhân mình thấy react-compiler khá tiện. Nó giúp mình không cần phải đau đầu về các case sử dụng useMemo, useCallback, ReactMemo. Công việc tối ưu này sẽ được giao lại cho React, nó sẽ tự nhận biết khi nào cần rerender lại để tránh các lần lặp mất kiểm soát. Tuy nhiên, chúng ta vẫn cần phải chờ thông báo hỗ trợ chính thức từ NextJS trước khi quyết định đưa vào production nha =)). Tránh nghịch dại đưa vào rồi méo biết chỗ nào mà sửa vì nó mới chỉ thử nghiệm thôi.

Breaking Change: Chuyển Các Dynamic Function Thành Async Function

Các function dưới đây là cái mình hay sử dụng. Nó cần được chuyển thành async function và sử dụng await. Ngoài ra có một số cái khác nữa nhưng mình ít dùng đến:

cookies
headers
params
searchParams

Trước đây, chúng ta import thẳng các thư viện hỗ trợ kèm theo vào function component và gọi trực tiếp ra dùng. Tuy nhiên, lần này chúng ta phải chuyển function component thành async function và sử dụng await để có thể gọi hàm hoặc có thể sử dụng một hook mới có tên là use (đang được thử nghiệm).

Caching

Tiếp tục, thêm một thay đổi mà có lẽ là mình cùng các anh em dev frontend thích nhất trong version lần này đó là về phần CACHE.

Caching của Fetch

NextJS chính thức bỏ cache mặc định. Nếu bây giờ chúng ta muốn cache khi gọi API thì phải cần thêm flag cache: "force-cache" vào trong tùy chọn của fetch. Trước kia mình đã nhiều lần khó chịu khi xử lý các case cache mặc định và thường tắt luôn để tránh bực mình, sau đó chuyển sang dùng thư viện như tanstack-query vô cùng xịn xò.

Caching của Route Handler

Khi fetch method GET được gọi, chúng ta sẽ không cần phải lo về việc nó chỉ được gọi một lần đầu tiên dẫn đến kết quả trả về không như mong muốn trong các lần cập nhật tiếp theo.

Client-side Router Caching

Trước kia khi bắn API thêm sửa một cái gì đó trên trang, mình có dùng router.push để chuyển hướng đến trang kết quả hoặc dùng thẻ Link. Tuy nhiên, mình không tìm thấy sản phẩm thêm mới đó nếu không gọi thêm router.refresh. Lý do chính là NextJS mặc định cache những trang tĩnh đã được build xong. Ở version lần này mình sẽ không cần phải làm vậy nữa, mặc định cache đã được gỡ bỏ rồi. Tuyệt vời luôn =)).

Tính Năng Mới: PPR (Partial Page Rendering)

Một tính năng thử nghiệm đáng chú ý khác trong NextJS 15 là PPR (Partial Page Rendering), giúp cải thiện hiệu suất tải trang bằng cách chỉ render một phần của trang thay vì toàn bộ. Thay vì reload toàn bộ các components trên một trang khi có sự thay đổi, PPR chỉ re-render các thành phần bị tác động, giúp tiết kiệm tài nguyên và giảm thiểu thời gian phản hồi.

Cách Hoạt Động của PPR

Với PPR, các phần trang được chia thành các phần nhỏ hơn, có thể cập nhật một cách độc lập dựa trên những thay đổi nhỏ mà không làm ảnh hưởng đến các thành phần khác trên cùng một trang. Điều này đặc biệt hữu ích cho các ứng dụng có nhiều thành phần tương tác, giúp tăng tốc độ phản hồi và nâng cao trải nghiệm người dùng.

Ưu Điểm của PPR

Tối ưu hóa tài nguyên: Giảm thiểu số lượng mã cần render lại, tránh render không cần thiết.
Cải thiện hiệu suất: Giảm thời gian tải trang khi có thay đổi nhỏ, đặc biệt hữu ích cho các ứng dụng có nhiều dữ liệu động.
Tương thích với các tính năng NextJS khác: PPR có thể kết hợp với các tính năng như getServerSideProps hoặc getStaticProps, giúp chúng ta xây dựng các ứng dụng mạnh mẽ và hiệu suất cao hơn.

Lưu Ý Khi Sử Dụng PPR

Vì tính năng PPR hiện đang trong giai đoạn thử nghiệm, NextJS khuyến cáo chỉ nên sử dụng nó trong môi trường phát triển hoặc thử nghiệm. Trước khi đưa vào production, hãy đảm bảo rằng PPR hoạt động ổn định và tương thích với toàn bộ ứng dụng của bạn.

Để kích hoạt PPR trong dự án của bạn, hãy tham khảo hướng dẫn chi tiết trên trang tài liệu chính thức của NextJS.

Một Số Thay Đổi Nhỏ Khác

Static Route Indicator: Có icon nhỏ dưới màn hình môi trường dev để dễ nhận biết router static và dynamic.
Sharp: Không cần phải run install để optimize nữa, tự động cài sẵn trong project.
next.config.ts: Cuối cùng thì cái chữ j nó cũng thành chữ t rồi, chắc là chơi thân với TypeScript hơn rồi đấy.
ESLint 9 Support: Hỗ trợ version 9 rồi nha, không biết có đấm nhau với prettier nữa không chứ mấy lần setup là hơi mệt =)).

Ý Kiến Của Mình

Kết thúc lại bài viết, mình sẽ nêu lên ý kiến riêng của cá nhân mình về lần cập nhật này.
Phiên bản lần này mình ấn tượng nhất là phần cache, ngoài ra nó cũng không có gì làm mình phải đáng lo sợ. Mình nghĩ, mình cũng như các lập trình viên frontend khác ngoài kia, đều có thể tiếp tục sử dụng nextjs14 một cách bình thường mà không nhất thiết cần phải lên ngay nextjs15 bởi có lẽ reactjs 19 vẫn chưa ra mắt hoàn toàn. Cũng không cần phải quá vội vàng update dự án vì vercel cũng có công cụ @next/codemode giúp chúng ta nâng cấp dự án một cách vô cùng dễ dàng. Chúng ta đều có thể chờ cho đến khi version mới nhất của react ra mắt chính thức để có thể yên tâm chạy trên production.
Ok, hi vọng rằng bài viết của mình có thể tóm tắt được thay cho mấy chục trang docs cập nhật của nextjs. Cảm ơn bạn đã đọc bài viết, chúc bạn một ngày tốt lành.