DEV Community: Việt Anh Trần Hữu

Một số tối ưu SEO cho Website (1)

Việt Anh Trần Hữu — Mon, 31 Mar 2025 10:14:12 +0000

Hello mọi người lại là Slao đây,
Bài viết này sẽ chủ yếu tâp trung vào phần technical của website nhé

🛠️ Hướng Dẫn Tối Ưu SEO Website Về Mặt Technical

SEO (Search Engine Optimization) không chỉ đơn giản là viết nội dung chất lượng hay xây dựng backlink, mà còn bao gồm việc tối ưu kỹ thuật (Technical SEO). Nếu website của bạn có cấu trúc kém hoặc gặp lỗi về hiệu suất, các công cụ tìm kiếm như Google sẽ khó có thể thu thập và hiểu nội dung của bạn. Trong bài viết này, mình sẽ hướng dẫn bạn các bước quan trọng để tối ưu Technical SEO giúp website của bạn thân thiện với các công cụ tìm kiếm và cải thiện thứ hạng.

✅ 1. Tối Ưu Crawlability và Indexability

🔎 Kiểm Tra Tệp Robots.txt

Robots.txt giúp kiểm soát những phần nào của website mà các công cụ tìm kiếm có thể hoặc không thể thu thập thông tin. Đảm bảo tệp robots.txt không vô tình chặn các trang quan trọng.

User-agent: *
Disallow: /admin/
Allow: /
Sitemap: https://www.example.com/sitemap.xml

📦 Tạo và Gửi Sitemap XML

Sitemap.xml giúp Google hiểu cấu trúc website và thu thập thông tin hiệu quả hơn.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/</loc>
    <lastmod>2024-03-30</lastmod>
    <priority>1.0</priority>
  </url>
</urlset>

✅ 2. Tối Ưu Hiệu Suất Website

🚀 Cải Thiện Tốc Độ Load Trang

Sử dụng công cụ như PageSpeed Insights hoặc GTmetrix để kiểm tra hiệu suất. Một số cách tối ưu:

Giảm kích thước ảnh bằng WebP hoặc AVIF.
Sử dụng CDN để phân phối nội dung nhanh hơn.
Kích hoạt caching bằng cách sử dụng Cache-Control.

Cache-Control: public, max-age=31536000

🧹 Giảm Lượng Code Không Cần Thiết

Minify HTML, CSS, JS bằng các công cụ như Terser (JS) hoặc CSSNano (CSS). Loại bỏ các thư viện không cần thiết hoặc sử dụng các thư viện nhẹ hơn.

🖼 Tối Ưu Hình Ảnh

Dùng các định dạng ảnh nhẹ như WebP thay vì PNG hoặc JPEG. Sử dụng Lazy Loading để trì hoãn tải hình ảnh không cần thiết.

<img src="image.webp" alt="Ảnh minh họa" loading="lazy">

✅ 3. Tối Ưu Cấu Trúc Website

🛣 Cấu Trúc URL Thân Thiện

URL nên ngắn gọn, dễ đọc và chứa từ khóa liên quan.

❌ /product?id=1234
✅ /product/balo-du-lich

🔗 Tối Ưu Internal Link

Xây dựng liên kết nội bộ để tăng khả năng thu thập dữ liệu của Google. Dùng anchor text tự nhiên, có chứa từ khóa liên quan.

🗺 Breadcrumbs

Sử dụng Breadcrumbs giúp người dùng và Google dễ dàng điều hướng.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Trang chủ",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Sản phẩm",
      "item": "https://example.com/san-pham"
    }
  ]
}

✅ 4. Mobile-First Optimization

Google ưu tiên đánh giá phiên bản mobile của website (Mobile-First Indexing). Đảm bảo website responsive và tối ưu cho các thiết bị di động.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

✅ 5. HTTPS và Bảo Mật Website

Cài đặt chứng chỉ SSL để đảm bảo website sử dụng HTTPS. Kiểm tra website bằng cách truy cập https://yourwebsite.com.

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

✅ 6. Kiểm Tra Và Theo Dõi

Sử dụng Google Search Console để theo dõi hiệu suất tìm kiếm và lỗi thu thập dữ liệu. Sử dụng Google Analytics để theo dõi hành vi người dùng. Cài đặt công cụ như Screaming Frog SEO Spider để quét và phân tích website.

🚀 Kết Luận

Tối ưu Technical SEO là một phần quan trọng trong chiến lược SEO tổng thể. Bằng cách:

Cải thiện crawlability và indexability.
Tăng tốc độ tải trang.
Tối ưu cấu trúc website.
Đảm bảo trải nghiệm tốt trên thiết bị di động.
Bảo vệ website bằng HTTPS.

Bạn sẽ giúp website của mình có thứ hạng cao hơn trên Google và mang lại trải nghiệm tốt hơn cho người dùng.

Chúc bạn thành công trong hành trình tối ưu SEO! 🚀

Partial Prerendering in Next.js

Việt Anh Trần Hữu — Mon, 31 Mar 2025 10:07:43 +0000

🚀 Xin chào mọi người, lại là Slao đây!

Hôm nay, mình sẽ giới thiệu về một chiến lược mới mang tên PPR (Partial Prerendering) vừa được ra mắt của Next.js. Cùng tìm hiểu xem nó hoạt động như thế nào nhé!

🔎 Vấn Đề Của Next.js Hiện Tại

Trong Next.js, mỗi tuyến đường có thể là:

Hoàn toàn tĩnh (Static): Tải nhanh do HTML được tạo sẵn khi build.
Hoàn toàn động (Dynamic): Chậm hơn do cần fetch dữ liệu từ server.

👉 Vấn đề xảy ra:

Nếu chỉ có một thành phần động (ví dụ như giỏ hàng), toàn bộ trang sẽ bị đánh dấu là động. Điều này khiến thời gian tải trang lâu hơn, dù phần lớn nội dung là tĩnh.

🧱 Giải Pháp: Partial Prerendering (PPR)

PPR giải quyết vấn đề này bằng cách:

Cho phép bạn kết hợp các phần tĩnh và động trong cùng một tuyến đường.
Tại thời điểm build, Next.js sẽ tạo HTML tĩnh cho các phần tĩnh.
Các phần động được bao bọc trong ranh giới React Suspense.
Nội dung tĩnh hiển thị ngay lập tức, trong khi các phần động được tải nền.

🛒 Ví Dụ Thực Tế

Hãy tưởng tượng một trang sản phẩm thương mại điện tử:

Phần Tĩnh:
- Điều hướng
- Hình ảnh sản phẩm
- Mô tả sản phẩm
Phần Động:
- Giỏ hàng
- Đề xuất sản phẩm được cá nhân hóa

❗ Không Có PPR

Mọi thứ đều chờ dữ liệu động tải xong.
Người dùng thấy trang trống trong thời gian dài.

✅ Với PPR

Nội dung tĩnh xuất hiện ngay lập tức.
Giỏ hàng và đề xuất được tải nền và hiển thị khi sẵn sàng.
Trải nghiệm người dùng tốt hơn.

🌟 Lợi Ích Của PPR

🚀 Tải trang nhanh hơn: Phần tĩnh được hiển thị ngay lập tức.
😊 Trải nghiệm tốt hơn: Người dùng không phải chờ đợi dữ liệu động.
⚡ Tăng hiệu suất: Không có thác nước, các phần động tải song song.
🌍 Tối ưu CDN: Phần tĩnh được lưu trên CDN, giảm thời gian tải trang.

🧑‍💻 Phân Tích Phần Tĩnh Và Động

Phần Tĩnh

Được lưu trữ hoàn toàn trên CDN.
Phân phối toàn cầu, không cần gọi đến máy chủ.
Hiển thị ngay lập tức cho người dùng.

Phần Động

Không thể lưu trữ đệm vì cần dữ liệu mới.
Phải được render trên máy chủ.
Được truyền phát sau khi phần tĩnh đã hiển thị.

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

Người dùng yêu cầu trang.
CDN ngay lập tức gửi shell tĩnh (bao gồm thanh điều hướng, bố cục, thông tin sản phẩm).
Song song, máy chủ bắt đầu tạo nội dung động.
Nội dung động được truyền phát và hiển thị mà không chặn các phần tĩnh.

🧑‍💻 Cách sử dụng

Follow Rendering: Partial Prerendering | Next.js

Install Next.js canary version
Enable in config

// next.config.js
{
  experimental: {
    ppr: "incremental";
  }
}

Đánh dấu các components động với Suspense

<Suspense fallback={<LoadingCart />}>
  <ShoppingCart /> {/* Dynamic component */}
</Suspense>

🚀 Tóm Lại

Partial Prerendering (PPR) là một giải pháp tối ưu giúp kết hợp giữa nội dung tĩnh và động.
Nó giúp giảm thời gian tải trang và cải thiện trải nghiệm người dùng.
PPR cũng tối ưu việc sử dụng CDN và tăng hiệu suất tổng thể.

Nếu bạn đang xây dựng một trang web có cả nội dung tĩnh và động, PPR trong Next.js chắc chắn sẽ là một công cụ hữu ích!

Chúc bạn thành công! 🚀

Cải Thiện Hiệu Suất Trong Next.js [2]

Việt Anh Trần Hữu — Fri, 28 Mar 2025 10:06:32 +0000

🚀 Cách Làm Cho App/Website Trở Nên Nhanh Và Mượt Mà Hơn

Hello mọi người lại là Slao đây!

Phần tiếp theo này chúng ta sẽ đến với cách làm cho chương trình của chúng ta có thể chạy nhanh hơn nhé.

🧑‍💻 1. Di Chuyển Code Tới Server Components

Nếu có thể, hãy di chuyển code đến Server Components để giảm tải công việc trên client.

Việc xử lý trên server giúp giảm lượng JavaScript tải xuống trình duyệt.

✂️ 2. Chia Tách (Split) Code

Nếu không thể di chuyển code đến server component, bạn vẫn có thể linh hoạt trong việc load code trên client bằng Code Splitting.

Next.js có built-in code splitting. Mỗi trang đều nhận được một đoạn mã chunk riêng và có thể chia sẻ các phần code chung.

🔎 Ví Dụ - Dynamic Import

const Modal = dynamic(() => import("./Modal"), {
  // Loading state to show while the code is loading
  // This is optional
  // If something takes a while, this is good to have!
  loading: () => <div>Loading...</div>,
});

export default function Page() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && <Modal />}
    </>
  );
}

Giờ đây mã chỉ được tải khi mà người dùng nhấp vào nút, đấy gọi là Dynamic import
Đôi khi component sử dụng browser API như window hoặc document. Trong trường hợp này bạn có thể set skip server rendering

const BrowserOnlyComponent = dynamic(() => import("./Heavy"), {
  ssr: false,
});

Thành phần này sẽ chỉ tải và kết xuất trên client

🛠️ Giảm Dung Lượng Phụ Thuộc Các Dependencies

🌿 Tree Shaking

Cho phép bạn chỉ nhập những gì bạn cần. Ví dụ:

// Bad: Imports everything
import * as Icons from '@react-icons/all-files'

// Good: Only imports what you use
import { FaGithub } from '@react-icons/all-files/fa/FaGithub'

Một số thư viện như Lodash yêu cầu những cách tiếp cận khác nhau bạn cần nhập trực tiếp từ những đường dẫn cụ thể

// With lodash, use direct paths
import map from 'lodash/map'

🌿 Loading on demand

Bạn chỉ cần tải thư viện khi bạn cần nó

// Instead of importing at the top
import fuse from "fuse.js";
import imageCompression from "browser-image-compression";

// Load libraries when needed
// Example 1
async function handleSearch(query) {
  const Fuse = (await import("fuse.js")).default;
  const fuse = new Fuse(items);
  return fuse.search(query);
}

// Example 2
async function handleImageUpload(file) {
  // Only load compression library when user uploads an image
  const imageCompression = (await import("browser-image-compression")).default;
  const compressedFile = await imageCompression(file, {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
  });
  // Upload compressedFile
}

🌿 Finding alternatives

Đôi khi có những gói, thư viện nhỏ hơn mà làm được điều tương tự:

moment.js (71KB) → date-fns (12KB)
lodash (71KB) → Chỉ import các hàm cần thiết
Thư viện biểu đồ nặng → Lựa chọn các thư viện nhẹ hơn

📚Tham Khảo Thêm

optimizePackageImports
Lựa chọn các chiến lược hợp lý như:
- Streaming and Partial Rendering
- Client-Side Rendering (CSR)
- Incremental Static Regeneration (ISR)
- Static Site Generation (SSG)
- Server-Side Rendering (SSR)

Cải Thiện Hiệu Suất Trong Next.js [1]

Việt Anh Trần Hữu — Fri, 28 Mar 2025 08:50:41 +0000

Hello mọi người lại là Slao đây!

🌿 Cải Thiện Hiệu Suất Trong Next.js

Khi nói về cải thiện hiệu suất, chúng ta thường xét đến 2 khía cạnh chính:

Perceived Performance (Hiệu Suất Cảm Nhận):

Cảm giác trải nghiệm ứng dụng của người dùng. Điều này bị ảnh hưởng bởi các yếu tố như thời gian tải trang, animation, và trải nghiệm tổng thể.
Actual Performance (Hiệu Suất Thực Tế):

Tốc độ mà ứng dụng thực sự hoạt động. Để cải thiện phần này, chúng ta cần giảm tải công việc không cần thiết cho ứng dụng.

🚀 Hiểu Rõ Next.js Bundles Hoạt Động Như Thế Nào

Khi bạn build một ứng dụng Next.js, nó sẽ tạo ra:

Server Bundle: Chạy trên server để render các trang (SSR).
Client Bundle: Là JavaScript cần thiết để chạy trên trình duyệt của người dùng.

📦 Client Bundle

Chia nhỏ thành các khối (Chunks): Next.js tự động phân tách code thành các khối nhỏ để tối ưu tải trang.
Mỗi trang có một khối riêng: Code chỉ được tải xuống nếu cần thiết.
Shared Code (Code Dùng Chung): Nếu nhiều trang dùng chung code, Next.js sẽ tạo các khối riêng để tái sử dụng.
Third-party Libraries: Các thư viện bên thứ 3 cũng được tạo thành các khối riêng.

⚡ JavaScript Ảnh Hưởng Tới Hiệu Suất Như Thế Nào?

Khi JavaScript được tải về trình duyệt, nó trải qua 3 bước chính:

Tải Xuống (Download):
- JS được nén để giảm kích thước.
- Browser sẽ giải nén trước khi sử dụng.
Phân Tích Cú Pháp (Parse):
- Trình duyệt phân tích code để hiểu và thực thi.
- Quá trình này có thể chậm trên các thiết bị yếu.
Thực Thi (Execute):
- JS thực sự được chạy và thực hiện công việc của nó.

⛔ Vấn Đề Chính:

Toàn bộ quá trình này diễn ra trên Main Thread. Khi Main Thread bận xử lý JS, các tác vụ như cập nhật UI và xử lý tương tác người dùng có thể bị chậm hoặc giật lag.

✅ Giải Pháp:

Giảm lượng JavaScript tải xuống.
Tối ưu hóa quá trình phân tích và thực thi code.
Tải JS hiệu quả bằng lazy loading hoặc dynamic import.

🔎 Cách Tìm Kiếm Vấn Đề Về Hiệu Suất

1. Sử Dụng PageSpeed Insights (Lighthouse)

Lighthouse cung cấp các chỉ số quan trọng như:

Performance Score: Điểm hiệu suất, nên đạt trên 80.
Total Blocking Time (TBT): Tổng thời gian Main Thread bị chặn, nên dưới 300ms.
JavaScript Execution Time: Thời gian thực thi JS, nên dưới 2.5s.
Unused JavaScript: Loại bỏ code không sử dụng để tối ưu kích thước.

Một điều thường thấy trong Next.js apps là mọi người thường đơn giản sử dụng Image Component dựa vào Lazy Loading và Async Decoding mọi lúc. Điều quan trọng là phải xem nơi hình ảnh của bạn có đang được sử dụng và liệu nó có nằm trong Viewport hay không
👉

👉
👉
👉

2. Tối Ưu Hình Ảnh

Next.js Image Component: Sử dụng <Image /> với Lazy Loading và Async Decoding.
Kiểm Tra Viewport: Chỉ tải hình ảnh nếu nó nằm trong Viewport.
Responsive Images: Sử dụng các kích thước ảnh phù hợp với từng thiết bị.

3. Chrome DevTools

Performance Tab: Giúp bạn phân tích thời gian thực thi JS. Mục tiêu là giữ thời gian thực thi dưới 500ms.

👉

Coverage Tab: Xem phần trăm code không sử dụng trong các chunks. Nếu hơn 30% code không được sử dụng, xem xét tối ưu. 👉 ---

4. Sử Dụng Bundle Analyzer

Next.js cung cấp Bundle Analyzer để kiểm tra kích thước bundle.

👉

Kích thước càng to thì càng chiếm nhiều dung lượng

Dưới đây là những mục mà bạn có thể phát hiện ra nếu code mình bị chậm, hãy cùng đón xem phần 2 nhé

Cài Đặt


bash
npm install @next/bundle-analyzer

SEO And SiteMap in NextJs

Việt Anh Trần Hữu — Fri, 28 Feb 2025 15:13:14 +0000

Tại sao SiteMap lại quan trọng?

Các công cụ tìm kiếm sử dụng trình thu thập dữ liệu web, còn gọi là bot hoặc spiders, để tìm và lập chỉ mục các trang web. Các trình thu thập dữ liệu này theo các liên kết từ trang này sang trang khác để khám phá nội dung mới. Nếu không có sơ đồ trang web, trình thu thập dữ liệu chỉ phải dựa vào việc tìm liên kết đến các trang mới hoặc đã cập nhật thông qua các liên kết hiện có trên trang web.

Điều này có thể gây ra vấn đề vì một số lý do:

Orphaned Page

Các trang không được liên kết từ các trang khác trên trang web (Orphaned Page) có thể không bao giờ được trình thu thập dữ liệu tìm thấy nếu không có liên kết trực tiếp đến chúng.

Deep Hierarchies

Trong các trang web có phân cấp sâu, các trang quan trọng có thể bị chôn vùi ở nhiều cấp độ sâu, khiến trình thu thập dữ liệu khó có thể tiếp cận chúng một cách nhanh chóng.

Complex Navigation

Các trang web có cấu trúc điều hướng phức tạp có thể khiến trình thu thập dữ liệu khó tìm thấy tất cả các trang một cách hiệu quả, đặc biệt là nếu liên kết nội bộ không được tối ưu hóa tốt.

Sitemap cung cấp cho công cụ tìm kiếm danh sách URL trực tiếp, đảm bảo tất cả các trang, ngay cả những trang khó tìm thấy thông qua quá trình thu thập dữ liệu thông thường, đều được phát hiện và lập chỉ mục nhanh hơn.

Ví dụ về điều hướng phức tạp

Một trang web thương mại điện tử có Deep Hierarchies:

Homepage: Điểm khởi đầu.
Main Categories: Electronics, Clothing, Home & Garden.
Subcategories: Trong mục Electronics, bạn có Phones, Laptops, Accessories.
Product Pages: Mỗi danh mục phụ chứa nhiều trang sản phẩm.

Trong ví dụ này, trang sản phẩm cho một mẫu điện thoại cụ thể có thể có nhiều cấp độ sâu (Trang chủ > Điện tử > Điện thoại > Mẫu điện thoại cụ thể). Nếu không có sơ đồ trang web, công cụ tìm kiếm có thể mất nhiều thời gian hơn để tìm và lập chỉ mục các trang sâu này. Sơ đồ trang web đảm bảo rằng ngay cả những trang sâu nhất cũng được liệt kê và có thể được công cụ tìm kiếm tìm thấy nhanh chóng.

Site Map trong Next.js

Next.js có hỗ trợ tích hợp để tạo sơ đồ trang web bằng quy ước tệp sitemap.(js|ts). Tạo một tệp trong thư mục ứng dụng và xuất một hàm mặc định trả về một mảng URL.

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://acme.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://acme.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: "https://acme.com/blog",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
  ];
}

Có hai thuộc tính chính cần lưu ý: priority và changeFrequency.

Priority

Thuộc tính ưu tiên trong sơ đồ trang web cho biết mức độ quan trọng của một trang so với các trang khác trên cùng một trang web. Thuộc tính này dao động từ 0.0 đến 1.0, trong đó 1.0 là quan trọng nhất. Điều này giúp các công cụ tìm kiếm biết được chủ sở hữu trang web cho rằng những trang nào là quan trọng nhất.

Ưu tiên cao (0.8 - 1.0): Trang chủ, các trang danh mục chính, các trang đích chính.
Ưu tiên trung bình (0.4 - 0.7): Các bài đăng blog thường xuyên, các trang danh mục phụ.
Ưu tiên thấp (0.0 - 0.3): Các bài viết tin tức cũ, các trang tiện ích ít quan trọng hơn.

Change Frequency

Thuộc tính changeFrequency cho biết tần suất nội dung của một trang có khả năng thay đổi. Các giá trị có thể có: "always", "hourly", "daily", "weekly", "monthly", "yearly", "never".

"always": Các trang thay đổi liên tục, như dữ liệu thị trường chứng khoán.
"hourly": Các trang tin tức được cập nhật thường xuyên.
"daily": Các blog có bài đăng hàng ngày.
"weekly": Các trang sản phẩm có bản cập nhật hàng tuần.
"monthly": Các trang FAQ được cập nhật hàng tháng.
"yearly": Các trang liên hệ hoặc trang giới thiệu.
"never": Nội dung được lưu trữ không bao giờ thay đổi. Sitemap thường là một tệp XML trông giống như sau:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2023-06-21</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/about</loc>
    <lastmod>2023-06-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Trang web này sẽ được triển khai tới https://example.com/sitemap.xml.

Chúng ta không muốn trình thu thập dữ liệu web (crawler) lập chỉ mục tất cả các trang

Một số trang của chúng tôi là riêng tư, ví dụ như sau khi xác thực. Chúng tôi không muốn trình thu thập dữ liệu web lập chỉ mục các trang đó. Ngay từ đầu, các công cụ tìm kiếm sẽ không thể phát hiện ra chúng.

Bạn có thể truyền đạt điều này tới trình thu thập dữ liệu web bằng cách thêm tệp robots.txt vào gốc trang web của bạn.

Trong Next.js, bạn có thể tạo tệp robots.txt bằng cách thêm tệp robots.ts vào thư mục app/.

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: "/private/",
      },
    ],
    sitemap: "https://example.com/sitemap.xml",
  };
}

Tối ưu Package Imports Nextjs

Việt Anh Trần Hữu — Fri, 28 Feb 2025 14:50:29 +0000

Hello mọi người lại là Slao đây !
Sau đây vấn đề chúng ta sẽ giải quyết là hiểu tại sao lại dẫn đến sự ảnh hưởng khi import Package một cách bừa bãi và cách giải quyết nó

Vấn đề về Barrel File

Nhiều thư viện (đặc biệt là các thư viện biểu tượng/thành phần) sử dụng "tệp Barrel", các tệp xuất lại nhiều mô-đun từ một điểm nhập duy nhất.

Ví dụ, nếu bạn nhập { AlertIcon } từ 'lucide-react', thì thực ra bạn đang nhập thông qua tệp Barrel có thể chứa hàng nghìn biểu tượng xuất khác. Mặc dù bạn chỉ muốn một biểu tượng, thời gian chạy JavaScript phải xử lý TẤT CẢ các lần xuất, có thể mất 200-800ms hoặc thậm chí vài giây.

Tại sao đây là vấn đề về hiệu suất?

Mỗi require() hoặc import đều có chi phí phát sinh trong JavaScript.

Trong quá trình phát triển: Làm chậm quá trình khởi động ban đầu và tải lại mô-đun nóng.
Trong quá trình sản xuất: Đặc biệt ảnh hưởng đến môi trường không có máy chủ (serverless), nơi thường xuyên khởi động nguội.

Một số thư viện có tới 10.000 lần xuất lại trong các tệp barrel của chúng!

optimizePackageImports trong Next.js

Cách hoạt động

Bạn có thể bật optimizePackageImports trong next.config.js cho các gói cụ thể để tối ưu hóa quá trình nhập.

module.exports = {
  experimental: {
    optimizePackageImports: ["lucide-react", "my-lib"],
  },
};

Next.js phân tích tệp barrel của các gói này. Khi nó thấy import { AlertIcon } from 'lucide-react', nó tự động chuyển đổi tệp đó để import trực tiếp từ tệp module cụ thể. Giống như thay đổi import { AlertIcon } from 'lucide-react' thành import AlertIcon from 'lucide-react/dist/icons/alert' ở bên trong.

Khi nào nên sử dụng

Nên cân nhắc sử dụng optimizePackageImports khi:

Đang sử dụng các thư viện biểu tượng lớn (lucide-react, @tabler/icons-react).
Đang sử dụng các thư viện thành phần có nhiều exports (@mui/material).
Nhận thấy thời gian khởi động development server chậm.
Lo ngại về thời gian khởi động nguội trong production.
Việc tải lại mô-đun nóng có cảm giác chậm chạp.

Cải thiện hiệu suất

Môi trường	Cải thiện hiệu suất
Development	Thời gian khởi động nhanh hơn 15-70%
Build time	Bản dựng nhanh hơn khoảng 28%
Cold Start	Nhanh hơn tới 40%

Ví dụ: Khi sử dụng @material-ui/icons, thời gian phát triển giảm từ 10,2 giây xuống còn 2,9 giây.

Cách phát hiện khi cần tối ưu hóa

Bạn có thể kiểm tra các dấu hiệu sau:

node_modules chứa các gói có tệp index.js lớn với nhiều lần export (sử dụng trình phân tích gói).
Sử dụng các thư viện UI component hoặc thư viện biểu tượng phổ biến.
Máy chủ development khởi động chậm (mất vài giây).
Quá trình build chậm hơn mong đợi.
Nhận thấy vấn đề về hiệu suất khi nhập từ các thư viện lớn.
Có thể kiểm tra thời gian nhập bằng cách thêm console.time() trước và sau khi nhập.

Console time :

console.time("import");
import { AlertIcon } from "lucide-react";
console.timeEnd("import");

Ưu điểm của optimizePackageImports

Điều hay ho là Next.js tự động xử lý mọi thứ. Bạn chỉ cần chọn các gói cần tối ưu hóa, và Next.js sẽ lo phần còn lại.

Không dành cho các tệp barrel của riêng bạn

optimizePackageImports chỉ áp dụng cho các gói trong node_modules, không phải cho các tệp barrel trong dự án của bạn.

// Using a barrel file
import { Button, Card, TextField } from "@/components";

Đây là sự nhầm lẫn mà nhiều người gặp phải.
Đối với các tệp barrel của riêng, nên tránh hoàn toàn.

// Direct imports - better performance
import Button from "@/components/Button";
import Card from "@/components/Card";
import TextField from "@/components/TextField";

Giải pháp: Cấu trúc lại mã để sử dụng import trực tiếp thay vì tối ưu hóa các tệp barrel.

Khi nào `optimizePackageImports` thực sự hữu ích?

optimizePackageImports hỗ trợ các gói bên thứ ba có cấu trúc phức tạp mà bạn không thể kiểm soát, đặc biệt là:

Thư viện biểu tượng (lucide-react, @tabler/icons).
Thư viện UI component (@mui/material).
Thư viện tiện ích lớn.

Nếu gặp vấn đề về hiệu suất với các tệp barrel của riêng bạn, hãy cấu trúc lại mã thay vì tìm cách tối ưu hóa chúng.

Server Component và Client Component Patterns Nextjs

Việt Anh Trần Hữu — Fri, 28 Feb 2025 14:11:46 +0000

Hello mọi người lại là Slao đây !

Sự khác biệt giữa Client và Server Component và những điều bạn chưa biết

Server Component có thể

Truy xuất dữ liệu trực tiếp: Server Components có thể lấy dữ liệu trực tiếp từ các nguồn dữ liệu mà không cần thông qua client. Điều này giúp tối ưu hóa hiệu suất vì dữ liệu được xử lý trực tiếp trên máy chủ trước khi gửi đến client.
Truy cập tài nguyên backend (cơ sở dữ liệu, API nội bộ): Chúng có thể tương tác trực tiếp với các tài nguyên backend như cơ sở dữ liệu hoặc các API nội bộ, giúp đơn giản hóa quy trình phát triển và bảo mật hơn.
Bảo mật thông tin nhạy cảm (token, API keys): Vì các thành phần này chạy trên máy chủ, các thông tin nhạy cảm như token hay API keys không bao giờ được gửi đến client, giảm thiểu rủi ro bị lộ thông tin.
Chứa các dependencies lớn không cần gửi đến client: Server Components có thể chứa các thư viện hoặc dependencies lớn mà không cần gửi chúng đến client, giúp giảm tải cho trình duyệt và cải thiện hiệu suất tổng thể.

Client Component có thể

Thêm tính tương tác với các sự kiện (onClick, onChange): Client Components có thể xử lý các sự kiện như nhấp chuột (onClick) hoặc thay đổi giá trị (onChange), giúp tạo ra các tương tác động trên giao diện người dùng.
Sử dụng React state và lifecycle effects (useState, useEffect): Chúng có thể sử dụng các hook như useState để quản lý trạng thái và useEffect để thực hiện các tác vụ phụ khi component được render hoặc cập nhật.
Truy cập các API chỉ có trên trình duyệt (window, localStorage): Client Components có thể truy cập các API đặc thù của trình duyệt như window hoặc localStorage, điều mà Server Components không thể làm được.
Sử dụng custom hooks phụ thuộc vào state hoặc browser APIs: Chúng có thể sử dụng các custom hooks mà phụ thuộc vào trạng thái hoặc các API của trình duyệt, giúp tái sử dụng logic một cách hiệu quả.
Sử dụng React class components: Client Components cũng có thể sử dụng các class components của React, mặc dù functional components với hooks đã trở nên phổ biến hơn.

Lưu ý: Các Client Components cần có chỉ thị "use client" ở đầu file để báo cho Next.js biết rằng chúng nên được chạy trên client. Điều này giúp phân biệt giữa các thành phần chạy trên máy chủ và các thành phần chạy trên trình duyệt.

Chia sẻ dữ liệu giữa các Components

Khi nhiều Server Components cần cùng một dữ liệu, bạn không cần phải truyền dữ liệu thông qua props hoặc sử dụng React Context. Thay vào đó, mỗi component có thể tự fetch dữ liệu mà nó cần một cách độc lập.

Next.js tự động memoize các lệnh fetch: Nếu nhiều component yêu cầu cùng một dữ liệu, Next.js sẽ đảm bảo rằng lệnh fetch thực tế chỉ được thực hiện một lần. Điều này giúp tối ưu hiệu suất và tránh lãng phí tài nguyên.
Đối với các hàm không phải fetch: Bạn có thể sử dụng hàm cache của React để đạt được hiệu quả tương tự (memoization).

Giữ mã Server Code tránh xa Client

Đôi khi, các đoạn mã chỉ dành cho server (như truy cập biến môi trường riêng tư) có thể vô tình được đưa vào các gói client (client bundles). Để ngăn chặn điều này, bạn có thể sử dụng gói server-only.

// In your server-only module
import "server-only";

export async function getData() {
  // Code that should only run on the server
  const res = await fetch("https://api.example.com", {
    headers: { authorization: process.env.API_KEY },
  });
  return res.json();
}

Nếu bất kỳ Client Component nào cố gắng import module này, bạn sẽ nhận được lỗi build-time error, giúp đảm bảo rằng mã server không bao giờ bị rò rỉ vào client.

Sử dụng Third-Party Components (Các thành phần từ bên thứ ba)

Nhiều thư viện bên thứ ba chưa thêm chỉ thị "use client" mặc dù chúng sử dụng các tính năng chỉ dành cho client. Điều này khiến chúng hoạt động trong Client Components nhưng sẽ gây lỗi trong Server Components.

Giải pháp: Bọc các thành phần bên thứ ba trong một Client Component của riêng bạn. Bây giờ, bạn có thể sử dụng thành phần đã bọc này trong Server Components.

// carousel.tsx
"use client";
import { Carousel } from "acme-carousel";
export default Carousel;

Sử dụng Context Providers

React Context không hoạt động trong Server Components. Để sử dụng context, bạn cần tạo provider trong một Client Component. Sau đó, sử dụng provider này trong layout của Server Component.

// theme-provider.tsx
"use client";
import { createContext } from "react";
export const ThemeContext = createContext({});

export default function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

Sau đó sử dụng ở Server Component Layout

// layout.tsx
import ThemeProvider from "./theme-provider";

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Client Component Patterns

1. Di chuyển Client Components xuống dưới cây component

Để giảm lượng JavaScript gửi đến trình duyệt, hãy di chuyển các phần tương tác vào các Client Components riêng biệt thay vì biến toàn bộ layout hoặc trang thành Client Components.

Ví dụ: Giữ layout là một Server Component, nhưng biến thanh tìm kiếm tương tác thành một Client Component.

2. Truyền Props từ Server Components sang Client Components

Bạn có thể truyền dữ liệu từ Server Components sang Client Components, nhưng các props phải có thể serializable (có thể chuyển đổi thành JSON). Các đối tượng phức tạp như hàm, ngày tháng hoặc lớp sẽ không hoạt động.

Nếu bạn cần dữ liệu không thể serializable, hãy fetch trực tiếp trong Client Component hoặc sử dụng Route Handler.

Interleaving Server and Client Components

Bạn có thể hình dung giao diện người dùng của mình như một cây bắt đầu từ layout gốc (một Server Component). Một số nhánh cây có thể được render trên client bằng cách thêm "use client".

Trong các nhánh client, bạn vẫn có thể bao gồm Server Components, nhưng cần tuân theo các quy tắc quan trọng.

Pattern to Avoid: Importing Server Components vào Client Components

Điều này không hoạt động: Bạn không thể import một Server Component vào Client Component. Thay vào đó, hãy sử dụng pattern truyền Server Components dưới dạng props.

"use client";
// ❌ Error: You cannot import a Server Component into a Client Component
import ServerComponent from "./server-component";

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ServerComponent />
    </>
  );
}

Supported Pattern: Truyền Server Components dưới dạng Props

// In client-component.tsx
'use client'
export default function ClientComponent({ children }) {
  const [count, setCount] = useState(0)
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

// In page.tsx (a Server Component)
import ClientComponent from './client-component'
import ServerComponent from './server-component'

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

Đây là cách làm đúng: Bạn có thể truyền Server Components vào Client Components thông qua props như children. Cách tiếp cận này cho phép cả hai component render độc lập: Server Component render trên server trước, và Client Component render trên client sau.

Bạn không bị giới hạn ở prop children. Bạn có thể sử dụng bất kỳ prop nào để truyền nội dung Server Component vào Client Component.

Caching trong NextJS hoạt động như thế nào

Việt Anh Trần Hữu — Fri, 28 Feb 2025 10:27:10 +0000

Chào mọi người, lại là Slao đây!

Bài viết này sẽ giúp chúng ta hiểu rõ hơn về cơ chế cached của Next.js.

🔥 Có 4 cơ chế caching trong Next.js

1️⃣ Request Memoization

Request Memoization là cơ chế phổ biến nhất. Trong một trang web, có thể có nhiều component cần sử dụng cùng một dữ liệu, Next.js sẽ chỉ fetch một lần duy nhất.

📌 Ví dụ:

Một component hiển thị thông tin người dùng.
Một component khác hiển thị số lượng bài viết của người dùng đó.
Một component khác nữa hiển thị avatar của người dùng.

Thay vì mỗi component tự fetch dữ liệu từ server một cách độc lập, bạn có thể tối ưu bằng cách fetch dữ liệu một lần và chia sẻ kết quả cho tất cả các component cần dùng.

⚙️ Cách hoạt động:

Khi sử dụng React Query, SWR, hoặc fetch API trong Next.js, dữ liệu chỉ fetch một lần và lưu vào bộ nhớ đệm (cache).
Các component khác nhau sẽ sử dụng cùng một bản sao dữ liệu từ cache thay vì gọi API nhiều lần.

✅ Lợi ích của Request Memoization:

✔ Giảm số lượng request đến server.

✔ Tăng tốc độ tải trang.

✔ Đảm bảo tính nhất quán của dữ liệu giữa các component.

Cache này chỉ tồn tại trong phạm vi của một request (một lần tải trang). Khi người dùng tải lại trang hoặc chuyển sang trang khác, cache sẽ bị xóa.

2️⃣ Data Cached

🔹 Data Cache là gì?

Data Cache là một bộ nhớ đệm (cache) trên server, lưu trữ kết quả của các yêu cầu fetch.

⚙️ Cách hoạt động:

Khi gọi fetch(), Next.js kiểm tra xem dữ liệu có trong Data Cache chưa.
Nếu có, nó sẽ sử dụng dữ liệu từ cache thay vì fetch lại từ nguồn dữ liệu.
Nếu chưa có, Next.js sẽ fetch từ nguồn, lưu vào cache và sử dụng nó.

✅ Lợi ích của Data Cache:

✔ Tăng tốc độ ứng dụng: Giảm thời gian fetch dữ liệu.

✔ Giảm tải cho database hoặc API: Ít request hơn.

✔ Tiết kiệm tài nguyên: Dữ liệu chia sẻ giữa nhiều người dùng.

🔧 Kiểm soát Data Cache:

Theo mặc định, Data Cache vô thời hạn.
Có thể kiểm soát bằng cách thiết lập revalidation hoặc tắt cache hoàn toàn.

// Cache the data, but revalidate it after one hour
fetch('https://api.example.com/data', { next: { revalidate: 3600 } })

// Don't cache this data at all
fetch('https://api.example.com/data', { cache: 'no-store' })

3️⃣ Full Route Cache

Next.js không chỉ cache data, mà còn cache toàn bộ trang đã được render, bao gồm:

HTML của trang (tạo từ quá trình render).
React Server Component Payload (biểu diễn nhỏ gọn của các Server Component trong trang).

🚀 Khi một trang được cache, Next.js không cần phải render lại trang đó mỗi lần truy cập, giúp tải trang nhanh hơn.

4️⃣ Route Cache

Khi người dùng điều hướng giữa các trang, Next.js lưu các trang đã truy cập trước đó vào cache trên trình duyệt.
Cache này tồn tại trong suốt session của người dùng và bị xóa khi họ refresh trang.

📌 Ví dụ cách hoạt động của Cache

🛠 Bước 1 (Build): Next.js render tĩnh trang blog và lưu vào Full Route Cache.

🔍 Bước 2 (Fetch dữ liệu): Khi người dùng truy cập trang blog, Next.js fetch dữ liệu bài viết và lưu vào Data Cache.

🎨 Bước 3 (Render): Nếu nhiều component cần cùng một dữ liệu, Next.js sử dụng Request Memoization để fetch chỉ một lần.

🔄 Bước 4 (Điều hướng): Khi người dùng chuyển trang, Next.js lưu nội dung trang vào Router Cache, giúp người dùng quay lại trang nhanh hơn.

📢 Tóm lại:

Request Memoization: Fetch một lần trong request, dùng chung giữa các component.
Data Cache: Lưu cache dữ liệu fetch trên server, dùng lại cho nhiều request.
Full Route Cache: Cache toàn bộ trang đã render.
Route Cache: Cache trang trên trình duyệt khi người dùng điều hướng.

Hy vọng bài viết giúp bạn hiểu rõ hơn về caching trong Next.js! 🚀🔥

Trả lời một số câu hỏi về Nextjs (2)

Việt Anh Trần Hữu — Fri, 31 Jan 2025 12:19:11 +0000

Xin chào mọi người lại là Slao đây
Sau đây chúng ta sẽ tiếp tục những gì còn dang dở ở bài viết trước nhé

Dưới đây là 1 số topic chúng ta thảo luận

How Can I Skip the Root Layout for Some Pages in Next.js?
How To Set Metadata Tags in App Router?
How To Set Metadata Dynamically for an App Router Page?
Can I Set Metadata in a Layout File?
Can I Use Contexts with App Router?

How Can I Skip the Root Layout for Some Pages in Next.js?

Một dự án Nextjs với rất nhiều layout files, về mặt kĩ thuật thì mỗi trang đều có thể có layout riêng. Tệp layout cao nhất bao bọc toàn bộ ứng dụng gọi là Root Layout.

Các Layout file cho phép bạn tái sử dụng lại component như là một phần bao bọc các Page. Thông thường nhất mỗi ứng dụng Nextjs sẽ có Root Layout bao gồm ứng dụng chính, menu, tiêu đề, hero image....

Giờ chúng ta sẽ đến với vấn đề chính. How Can I Skip the Root Layout for Some Pages in Next.js? Nextjs có một tính năng gọi là Route Groups cho phép bạn có nhiều Root layout. Có nghĩa là các thành phần khác nhau có bố cục khác nhau, điều này cũng có thể bỏ qua bất kỳ thành phần nào trong bố cục cho một số page nhất định

Một điều cần lưu ý là khi sử dụng route group bạn sẽ trigger tải toàn bộ trang. Đó là điều bạn sẽ gặp phải khi thay thế thành phần cao nhất của server component trong ứng dụng. Nó đơn giản nghĩa là bạn render một phần hoàn toàn mới trong ứng dụng đọc lập với thành phần còn lại của tất cả các trang

How To Set Metadata Tags in App Router?

Nextjs dễ dàng đặt metadataa cho ứng dụng và page. Điều duy nhất phải làm là xuất một đối tượng metadata từ bất kì layout hoặc page file nào của bnaj để đặt metadata cho layout/page đó

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js Metadata Example',
  description: 'Example of metadata in Next.js',
}

export default function MyPage() { ... }

How To Set Metadata Dynamically for an App Router Page?

Để tối ưu nhất cho SEO việc thiết lập metadata tĩnh không bao giờ là đủ. Vì dữ liệu sẽ là duy nhất cho hầu hết mọi trang và thậm chí được tải trong thời gian chạy từ server. Để đặt metadata động trong nextjs, có thể sử dụng chức năng generateMetadata

import type { Metadata } from 'next'

export async function generateMetadata(): Promise<Metadata> {
  const data = await fetch('someUrl').then((res) => res.json())

  return {
    title: 'Next.js Dynamic Metadata Example',
    description: data.pageDescription,
  }
}

export default function MyPage() { ... }

Điều cần biết là chức năng tìm nạp trong nextjs theo mặc định bộ nhớ cache là duplicated requests. Đây là một hành vi chung không cụ thể cho metadata. Ngay cả các yêu cầu Server Component cũng bị cache khi mà fetch. Mặc dù nó có thể từ chối và thậm chí vô hiệu hóa tự động một số tính năng khi chức năng của nextjs được sử dụng

Can I Set Metadata in a Layout File?

Bạn có thể đặt metadata trong layout file, cả static và dynamically.

Can I Use Contexts with App Router?

Có thể sử dụng React Contexts với App Route trong Next. Bạn có thể đặt bối cảnh ở trong root Layout để có thể cung cấp cho các thành phần của Client Component. Context sẽ không available để sử dụng trong Server Component và sẽ không làm hỏng hành vi kết xuất (render) của Server Component

Trả lời một số câu hỏi về Nextjs

Việt Anh Trần Hữu — Fri, 31 Jan 2025 12:17:15 +0000

Xin chào mọi người lại là Slao đây
Sau đây mình sẽ trả lời một số câu hỏi có liên quan về Nextjs

How To Read URL Params in a Client Component?
How To Read URL Params in a Page File?
Is it Possible to Render a Client Component in a Server Component?
How To Read URL Params in a Server Component?
Why Doesn't searchParams Exist in Next.js Layout Files?

How To Read URL Params in a Client Component?

Nếu bạn cần đọc pathname hoặc query params từ URL trong Client Component thì bạn có thể sử dụng usePathname hoặc là useSearchParams như sau

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

const ClientComponent({ children, href }) {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const search = searchParams.get('search')

  return (
    <div>Next.js usePathname and useSearchParams example</div>
    <div>{pathname}</div>
    <div>{search}</div>
  )
}

export default ClientComponent

để điều hướng thì có thể dùng useRouter

'use client'

import { useRouter } from 'next/navigation'

const ClientComponent({ children }) {
  const router = useRouter()

  const handleClick = () => {
    router.push('someUrl')
  }

  return (
    <div onClick={handleClick}>Click me</div>
  )
}

export default ClientComponent

How To Read URL Params in a Page File?

Các tham số thường được truyền tự động như là props ở các page component. Bạn có thể đơn giản cung cấp prop cho nó

const PageComponent({ params, searchParams }) {
  const { slug } = params

  return <div>Next.js URL params in page.tsx file</div>
}

export default PageComponent

Is it Possible to Render a Client Component in a Server Component?

Hoàn toàn có thể render Client component trong Server component. Tất cả Props truyền từ Client component phải được xử lí được.Thay vào đó dữ liệu mà không thể xử lí được từ bên trong Client component

How To Read URL Params in a Server Component?

Trong Server Component, không phải là Page Component, bạn có thể lấy URL params bằng cách truyền dới dạng props.

Quan trọng là phải nhớ rằng Server Component không phải là thành phần page file component và không được làm mới trong quá trình điều hướng. Vì lí do đó phải cần thận khi sử dụng thông tin từ URL ở Server Component vì các thông só URL sẽ outdated khi điều hướng

Why Doesn't searchParams Exist in Next.js Layout Files?

SearchParams chỉ có sẵn trong các Page Files. Page Files sẽ luôn re-render khi mà người dùng điều hướng giữa 2 trang. Vì component re-renders khi url thay đổi, chúng ta có thể biết chắc rằng URL Params được truyền đã được cập nhật.

Mục đích của Layout Component là tránh render không cần thiết và chứa các thành phần static của giao điện người dùng không được cập nhật khi mà người dùng điều hướng giữa các trang. Do đó thành phần Layout Component chỉ re-render khi người dùng điều hướng đến một thành phần khác của màn hình nơi nó không hiển thị. Ở trong code thì nó có nghĩa là điều hướng giữa 2 trang không chia sẻ chung Layout File

Thực tế điều này có nghĩa là URl sẽ thay đổi thường xuyên hơn so với Layout File Renders, và nếu chúng ta đọc các thông số URL trong Layout Component thì compoennt sẽ không biết khi nào thông số url được cập nhật. Nhớ rằng Layout File là server component và được renđẻ thành HTML khi nạp lần đầu tiên và sau đó lưu trong bộ nhớ cache trên client nên nó sẽ không bao giờ phải re-render lại

Top 5 Custom Hook For React

Việt Anh Trần Hữu — Fri, 31 Jan 2025 12:13:26 +0000

Chào mọi người lại là Slao đây,
Sau đây sẽ là top 5 Custom Hook thuận tiện và mới lạ để mọi người có thể sử dụng

useMediaQuery

useMediaQuery lắng nghe các truy vấn media, cho phép bạn áp dụng các kiểu hoặc hành vi cụ thể dựa trên kích thước thiết bị

import { useEffect, useState } from 'react';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    setMatches(mediaQuery.matches);

    const handler = event => setMatches(event.matches);
    mediaQuery.addEventListener('change', handler);

    return () => mediaQuery.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

Cách dùng

const isLargeScreen = useMediaQuery('(min-width: 1024px)');

useWebSocket

useWebSocket hook kết nối ứng dụng của bạn với WebSocket server, dễ dàng gửi và nhận real-time dữ liệu. Nó xử lí các kết nối lại, message buffering, và event-base handling, làm cho dễ dàng cập nhập thời gian thực

Ví dụ này trình bày một hook WebSocket có thể tái sử dụng với các tính năng quản lý kết nối, xử lý sự kiện và dọn dẹp gọn gàng.

import { useState, useEffect, useRef, useCallback } from 'react';

function useWebSocket(url, options = {}) {
  const { reconnect = true, reconnectInterval = 5000, onOpen, onMessage, onError, onClose } = options;
  const [isConnected, setIsConnected] = useState(false);
  const [lastMessage, setLastMessage] = useState(null);
  const websocketRef = useRef(null);
  const reconnectTimeout = useRef(null);

  const connect = useCallback(() => {
    websocketRef.current = new WebSocket(url);

    websocketRef.current.onopen = (event) => {
      setIsConnected(true);
      onOpen && onOpen(event);
    };

    websocketRef.current.onmessage = (event) => {
      setLastMessage(event.data);
      onMessage && onMessage(event);
    };

    websocketRef.current.onerror = (event) => {
      onError && onError(event);
    };

    websocketRef.current.onclose = (event) => {
      setIsConnected(false);
      onClose && onClose(event);
      if (reconnect) {
        reconnectTimeout.current = setTimeout(connect, reconnectInterval);
      }
    };
  }, [url, reconnect, reconnectInterval, onOpen, onMessage, onError, onClose]);

  const sendMessage = useCallback((message) => {
    if (isConnected && websocketRef.current) {
      websocketRef.current.send(message);
    }
  }, [isConnected]);

  useEffect(() => {
    connect();

    return () => {
      if (websocketRef.current) {
        websocketRef.current.close();
      }
      clearTimeout(reconnectTimeout.current);
    };
  }, [connect]);

  return { isConnected, sendMessage, lastMessage };
}

Các tính năng của useWebSocket

Reconnection Handling: nếu kết nối đóng, nó sẽ tự động kết nối lại sau 1 khoảng thời gian nhất định
Event Handling: chấp nhận các thuộc tính gọi lại onOpen, onMessage, onError, and onClose events để xử lí khi cần thiết
Message Sending: cung cấp chúc năng sendMessage cái mà chỉ gửi message khi websocket mở
Last Message Storage: lưu dữ liệu mới nhất nhận được , chấp nhận các dữ liệu gần nhất mà không cần đăng kí.

Cách dùng

function ChatApp() {
  const { isConnected, sendMessage, lastMessage } = useWebSocket('ws://localhost:4000/chat', {
    reconnect: true,
    reconnectInterval: 3000,
    onOpen: () => console.log('Connected to WebSocket'),
    onMessage: (event) => console.log('New message received:', event.data),
    onClose: () => console.log('Disconnected from WebSocket'),
  });

  const [inputValue, setInputValue] = useState('');

  const handleSend = () => {
    sendMessage(inputValue);
    setInputValue('');
  };

  return (
    <div>
      <h3>WebSocket Chat</h3>
      <div>
        <p>{isConnected ? 'Connected' : 'Disconnected'}</p>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Type your message..."
        />
        <button onClick={handleSend} disabled={!isConnected}>
          Send
        </button>
      </div>
      <div>
        <h4>Last Message:</h4>
        <p>{lastMessage}</p>
      </div>
    </div>
  );
}

useHover

Phát hiện di chuột qua 1 phần tử để xử lí cho các công cụ, hình ảnh động hoặc bất kì phản hồi UI nào trên trạng thái di chuột

import { useState, useRef, useEffect } from 'react';

function useHover() {
  const [hovered, setHovered] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const handleMouseOver = () => setHovered(true);
    const handleMouseOut = () => setHovered(false);
    const node = ref.current;
    if (node) {
      node.addEventListener('mouseover', handleMouseOver);
      node.addEventListener('mouseout', handleMouseOut);
    }
    return () => {
      if (node) {
        node.removeEventListener('mouseover', handleMouseOver);
        node.removeEventListener('mouseout', handleMouseOut);
      }
    };
  }, [ref]);

  return [ref, hovered];
}

const [hoverRef, isHovered] = useHover();

useDebounce

Ngăn chặn sự kích hoạt nhanh chóng của các sự kiện, đã sử dụng có thể hữu ích cho các trường đầu vào hoặc thanh tìm kiếm

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

const debouncedSearchTerm = useDebounce(searchTerm, 500);

useInfiniteScroll

useInfiniteScroll hook rất hữu ích để tìm nạp dữ liệu khi người dùng scroll xuống. Nó có thể xử líu các state phúc tạp như loading, error handling, pagination...

import { useState, useEffect, useRef, useCallback } from 'react';

function useInfiniteScroll(fetchData, options = {}) {
  const { threshold = 0.8, hasMore = true } = options;
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const observerRef = useRef();

  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    setError(null);
    try {
      const newData = await fetchData();
      setData((prevData) => [...prevData, ...newData]);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [fetchData, loading, hasMore]);

  useEffect(() => {
    if (!hasMore) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          loadMore();
        }
      },
      { threshold }
    );

    if (observerRef.current) observer.observe(observerRef.current);

    return () => {
      if (observerRef.current) observer.unobserve(observerRef.current);
    };
  }, [loadMore, hasMore, threshold]);

  return { data, loading, error, observerRef };
}

function InfiniteScrollList() {
  const fetchMoreData = async () => {
    const response = await fetch('/api/data'); // Example API
    return response.json();
  };

  const { data, loading, error, observerRef } = useInfiniteScroll(fetchMoreData, {
    threshold: 0.9,
    hasMore: true
  });

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      <div ref={observerRef} style={{ height: '1px' }} />
      {loading && <p>Loading...</p>}
      {error && <p>Error loading data...</p>}
    </div>
  );
}

How to Use DeepSeek R1 for Free in Visual Studio Code with Cline or Roo Code

Việt Anh Trần Hữu — Fri, 31 Jan 2025 11:43:07 +0000

Xin chào mọi người lại là Slao đây
Dạo gần đây DeepSeek đang khuấy đẩo thị trường AI, làm cho các ông lớn phải đau đầu
Chúng ta sẽ đi qua một chút về DeepSeek và cách sử dụng nó nhé

Nếu bạn đang tìm kiếm một AI vượt trội trong lý luận và cũng như miễn phí thì DeepSeek R1 là lựa chọn tuyệt vời vì nó là mã nguồn mở cạnh tranh vượt trội với GPT-4, o1-mini, Claude 3.5 ....

Bài viết này sẽ hướng dẫn bạn tích hợp DeepSeek vào visual studio code tương tự như github copilot

Tại sao DeepSeek R1 lại được nhắc đến nhiều như vậy trong thời gian gần đây?
Miễn phí và mã nguồn mở: Không giống như nhiều mô hình tính phí rất cao, bạn có thể sử dụng mà không phải trả bất kỳ khoản phí nào. Thậm chí còn có thể trò chuyện tại https://chat.deepseek.com.
Hiệu suất: Nó cạnh tranh và vượt trội hơn các mô hình khác trong các tác vụ liên quan đến logic, toán học và thậm chí là tạo mã (đây là phần tôi thích nhất).
Nhiều phiên bản: Để chạy cục bộ (LLM), có các mô hình có tham số từ 1,5B đến 70B, vì vậy bạn có thể chọn mô hình nào hoạt động tốt nhất trên PC của mình tùy thuộc vào phần cứng của bạn.
Dễ tích hợp: Bạn có thể kết nối nó với VSCode bằng các tiện ích mở rộng như Cline hoặc Roo Code.
Không mất phí: Nếu bạn chạy cục bộ, bạn không phải trả tiền cho các mã thông báo hoặc API. Nên sử dụng card đồ họa vì chạy chỉ trên CPU sẽ chậm hơn.

How to Run DeepSeek R1 Locally

Dươi đây mình sẽ viết tiếng anh lấy từ các trang chính thống nhé :)))

1. Using LM Studio

Download and install LM Studio: Just go to the LM Studio website and download the version for your system.
Download the DeepSeek R1 model: In LM Studio, go to the Discover tab, search for "DeepSeek R1," and select the version most compatible with your system. If you're using a MacBook with Apple processors, keep the MLX option selected next to the search bar (these versions are optimized for Apple hardware). For Windows or Linux, choose the GGUF option.
Load the model: After downloading, go to Local Models, select DeepSeek R1, and click Load.
Start the local server: In the Developer tab, enable Start Server. It will start running the model at http://localhost:1234.
Proceed to step 4 Integrating with VSCode!

2. Using Ollama

Install Ollama: Download it from the Ollama website and install it.
Download the model: In the terminal, run*:

   ollama pull deepseek-r1

*This is the main model; if you want smaller models, go to https://ollama.com/library/deepseek-r1 and see which command to run in the terminal.

Start the server: In the terminal, execute:

   ollama serve

The command will start running the model at http://localhost:11434.

Proceed to step 4 Integrating with VSCode!

3. Using Jan

Download and install Jan: Choose the version for your system on the Jan website.
Download the model: I couldn't find DeepSeek R1 directly in Jan. So, I went to the Hugging Face website and manually searched for "unsloth gguf deepseek r1." I found the desired version, clicked the "Use this model" button, and selected Jan as the option. The model automatically opened in Jan, and I then downloaded it.
Load the model: After downloading, select the model and click Load.
Start the server: Jan automatically starts the server, usually at http://localhost:1337.
Proceed to step 4 Integrating with VSCode!

4. Integrating with VSCode

Install the extension: In VSCode, open the Extensions tab and install Cline or Roo Code.
Configure the extension for Jan or LM Studio: The configuration for both Cline and Roo Code is practically identical. Follow the steps below:
Click on the extension and access "Settings".
In API Provider, select "LM Studio".
In the Base URL field, enter the URL configured in Jan or LM Studio.
The Model ID field will be automatically filled if you only have one model available. Otherwise, manually select the DeepSeek model you downloaded.
Finish by clicking "Done".
Configure the extension for Ollama:
Click on the extension and access "Settings".
In API Provider, select "Ollama".
In the Base URL field, enter the URL configured in Ollama.
The Model ID field will be automatically filled if you only have one model available. Otherwise, manually select the DeepSeek model you downloaded.
Finish by clicking "Done".
Integration complete, now just enjoy the functionalities of Cline or Roo Code.

DEV Community: Việt Anh Trần Hữu

Một số tối ưu SEO cho Website (1)

🛠️ Hướng Dẫn Tối Ưu SEO Website Về Mặt Technical

✅ 1. Tối Ưu Crawlability và Indexability

🔎 Kiểm Tra Tệp Robots.txt

📦 Tạo và Gửi Sitemap XML

✅ 2. Tối Ưu Hiệu Suất Website

🚀 Cải Thiện Tốc Độ Load Trang

🧹 Giảm Lượng Code Không Cần Thiết

🖼 Tối Ưu Hình Ảnh

✅ 3. Tối Ưu Cấu Trúc Website

🛣 Cấu Trúc URL Thân Thiện

🔗 Tối Ưu Internal Link

🗺 Breadcrumbs

✅ 4. Mobile-First Optimization

✅ 5. HTTPS và Bảo Mật Website

✅ 6. Kiểm Tra Và Theo Dõi

🚀 Kết Luận

Partial Prerendering in Next.js

🚀 Xin chào mọi người, lại là Slao đây!

🔎 Vấn Đề Của Next.js Hiện Tại

🧱 Giải Pháp: Partial Prerendering (PPR)

🛒 Ví Dụ Thực Tế

❗ Không Có PPR

✅ Với PPR

🌟 Lợi Ích Của PPR

🧑‍💻 Phân Tích Phần Tĩnh Và Động

Phần Tĩnh

Phần Động

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

🧑‍💻 Cách sử dụng

🚀 Tóm Lại

Cải Thiện Hiệu Suất Trong Next.js [2]

🚀 Cách Làm Cho App/Website Trở Nên Nhanh Và Mượt Mà Hơn

🧑‍💻 1. Di Chuyển Code Tới Server Components

✂️ 2. Chia Tách (Split) Code

🔎 Ví Dụ - Dynamic Import

🛠️ Giảm Dung Lượng Phụ Thuộc Các Dependencies

🌿 Tree Shaking

🌿 Loading on demand

🌿 Finding alternatives

📚Tham Khảo Thêm

Cải Thiện Hiệu Suất Trong Next.js [1]

🌿 Cải Thiện Hiệu Suất Trong Next.js

🚀 Hiểu Rõ Next.js Bundles Hoạt Động Như Thế Nào

📦 Client Bundle

⚡ JavaScript Ảnh Hưởng Tới Hiệu Suất Như Thế Nào?

🔎 Cách Tìm Kiếm Vấn Đề Về Hiệu Suất

1. Sử Dụng PageSpeed Insights (Lighthouse)

2. Tối Ưu Hình Ảnh

3. Chrome DevTools

4. Sử Dụng Bundle Analyzer

Cài Đặt

SEO And SiteMap in NextJs

Tại sao SiteMap lại quan trọng?

Orphaned Page

Deep Hierarchies

Complex Navigation

Ví dụ về điều hướng phức tạp

Site Map trong Next.js

Priority

Change Frequency

Chúng ta không muốn trình thu thập dữ liệu web (crawler) lập chỉ mục tất cả các trang

Tối ưu Package Imports Nextjs

Vấn đề về Barrel File

Tại sao đây là vấn đề về hiệu suất?

optimizePackageImports trong Next.js

Cách hoạt động

Khi nào nên sử dụng

Cải thiện hiệu suất

Cách phát hiện khi cần tối ưu hóa

Ưu điểm của optimizePackageImports

Không dành cho các tệp barrel của riêng bạn

Khi nào optimizePackageImports thực sự hữu ích?

Server Component và Client Component Patterns Nextjs

Sự khác biệt giữa Client và Server Component và những điều bạn chưa biết

Server Component có thể

Client Component có thể

Chia sẻ dữ liệu giữa các Components

Giữ mã Server Code tránh xa Client

Khi nào `optimizePackageImports` thực sự hữu ích?