## Giới thiệu

React Server Components (RSC) là một tính năng mang tính đột phá giúp cải thiện hiệu suất bằng cách giảm lượng JavaScript tải xuống trình duyệt. Khác với các Component truyền thống, RSC chạy hoàn toàn trên server, giúp tối ưu hóa việc lấy dữ liệu và giảm tải cho frontend.

Bài viết này sẽ giúp bạn hiểu rõ về React Server Components, lợi ích của chúng, sự khác biệt so với Client Components truyền thống và cách sử dụng trong Next.js.

## React Server Components là gì?

Thông thường, React render component trên trình duyệt bằng JavaScript. Nhưng với RSC, một số component được render trên server và gửi HTML về client, giúp giảm đáng kể kích thước bundle JavaScript.

### Cách RSC hoạt động

RSC chạy trên server, thực hiện logic và gửi kết quả đã được serialize về client. Khác với Server-Side Rendering (SSR) gửi nguyên trang HTML đã render, RSC cho phép render từng phần và truyền dần xuống client.

Điều này giúp RSC có thể truy vấn dữ liệu trực tiếp từ database hoặc API mà không cần thêm request từ client, giảm độ trễ và tối ưu hiệu suất.

### Lợi ích của RSC

- **Giảm JavaScript tải xuống client**: Không gửi JavaScript thừa về trình duyệt, giúp trang tải nhanh hơn.
- **Cải thiện SEO**: Nội dung render sẵn trên server giúp công cụ tìm kiếm dễ dàng thu thập dữ liệu.
- **Tối ưu hóa việc lấy dữ liệu**: Fetch dữ liệu trực tiếp trên server, không cần gọi API từ client.
- **Tích hợp dễ dàng**: Có thể sử dụng cùng với Client Components khi cần.
- **Tăng tốc độ tải trang**: Gửi HTML đã render sẵn giúp người dùng thấy nội dung ngay lập tức.
- **Giảm tải bộ nhớ trình duyệt**: Trạng thái được xử lý trên server, giúp trình duyệt hoạt động mượt mà hơn.

## Sử dụng React Server Components trong Next.js

Next.js 13+ hỗ trợ hoàn toàn RSC. Mặc định, tất cả component trong thư mục `app/` của Next.js đều là **Server Components**, trừ khi bạn chỉ định là Client Component.

### Ví dụ: Một Server Component đơn giản

```tsx
// app/components/PostList.tsx (Mặc định là Server Component)
import { getPosts } from '@/lib/api';

export default async function PostList() {
  const posts = await getPosts();
  
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

### Khi nào cần dùng Client Component?

Một số component vẫn cần chạy trên client, như những component sử dụng `useState`, `useEffect` hoặc có event listener. Để chỉ định một component là Client Component, thêm `'use client'` ở đầu file:

```tsx
// app/components/Button.tsx
'use client';

import { useState } from 'react';

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

## React Server Components vs. Server-Side Rendering

Nhiều người nhầm lẫn giữa **React Server Components (RSC)** và **Server-Side Rendering (SSR)**. Dưới đây là bảng so sánh:

| Đặc điểm              | React Server Components (RSC) | Server-Side Rendering (SSR) |
|----------------------|------------------------------|-----------------------------|
| Chạy trên           | Server                        | Server                      |
| Gửi JavaScript xuống client | Không                         | Có                          |
| Quản lý state        | Xử lý trên server            | Cần hydration trên client    |
| Hỗ trợ SEO           | Có                            | Có                          |
| Lấy dữ liệu          | Fetch trực tiếp trên server | Gọi API từ client            |
| Ứng dụng phù hợp     | Giảm tải JS, tối ưu hiệu suất | Render trang động, cập nhật dữ liệu theo thời gian thực |

## Khi nào nên sử dụng RSC?

React Server Components phù hợp khi bạn muốn giảm JavaScript chạy trên client. Một số trường hợp sử dụng phổ biến:

- **Trang nội dung tĩnh**: Blog, tài liệu, trang tin tức.
- **Ứng dụng dashboard**: Lấy dữ liệu lớn trên server mà không ảnh hưởng đến frontend.
- **Website thương mại điện tử**: Hiển thị danh sách sản phẩm theo thời gian thực mà không gửi nhiều script xuống client.
- **Ứng dụng streaming**: Tải dần nội dung để cải thiện trải nghiệm người dùng.

## Tránh lỗi Hydration trong RSC

Khi kết hợp RSC với Client Components, cần chú ý tránh lỗi **hydration mismatch**, tức là nội dung render trên server khác với nội dung hiển thị trên client. Một số nguyên nhân phổ biến:

- **Không sử dụng giá trị thay đổi theo thời gian** như `Date.now()` hoặc `Math.random()` trong Server Components.
- **Không render JSX không hợp lệ**, chẳng hạn như `<div>` nằm trong `<p>`.
- **Không sử dụng các API chỉ chạy trên client**, ví dụ `window`, `document`, `localStorage` trong Server Components.
- **Khi cần interactivity**, hãy tách component đó thành Client Component bằng cách thêm `'use client'`.

## Kết luận

React Server Components giúp tăng hiệu suất bằng cách giảm tải JavaScript cho client. Khi kết hợp với Next.js, RSC giúp tối ưu trải nghiệm người dùng bằng cách cải thiện tốc độ tải trang và giảm tải cho trình duyệt.

🚀 **Bạn đã sẵn sàng thử RSC chưa?** Hãy bắt đầu bằng cách refactor component của bạn để tận dụng tối đa lợi ích của RSC!

Hiểu rõ cách sử dụng RSC sẽ giúp bạn xây dựng ứng dụng React nhanh hơn, nhẹ hơn và dễ bảo trì hơn.



## Introduction

React Server Components (RSC) are a groundbreaking feature that improves performance by reducing the amount of JavaScript sent to the browser. Unlike traditional components, RSCs run entirely on the server, optimizing data fetching and reducing frontend workload.

This article will help you understand React Server Components, their benefits, how they differ from traditional Client Components, and how to use them effectively in Next.js.

## What are React Server Components?

Normally, React components are rendered in the browser using JavaScript. With RSC, however, some components are rendered on the server and only the serialized HTML is sent to the client — significantly reducing the bundle size.

### How RSC Works

RSCs execute on the server, run logic, and send serialized output to the client. Unlike Server-Side Rendering (SSR), which renders the entire page, RSCs allow partial rendering and progressive streaming to the client.

RSCs can directly access data sources (like databases or APIs) without extra client-side requests, resulting in lower latency and better performance.

### Benefits of RSC

- **Reduced JavaScript on client**: Less JS sent to the browser means faster page loads.
- **Improved SEO**: Content is server-rendered, making it more crawlable.
- **Efficient data fetching**: Fetch data directly on the server.
- **Seamless integration**: Can be used alongside Client Components when needed.
- **Faster perceived load**: HTML is sent progressively, allowing content to appear quickly.
- **Reduced memory usage in browser**: Server handles state, keeping the client lightweight.

## Using React Server Components in Next.js

Next.js 13+ fully supports RSC. By default, all components inside the `app/` directory are **Server Components**, unless explicitly marked as client components.

### Example: A Simple Server Component

```tsx
// app/components/PostList.tsx (By default, it's a Server Component)
import { getPosts } from '@/lib/api';

export default async function PostList() {
  const posts = await getPosts();
  
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

### When to Use Client Components

Some components must run on the client, like those using `useState`, `useEffect`, or event listeners. To mark a file as a Client Component, use `'use client'` at the top:

```tsx
// app/components/Button.tsx
'use client';

import { useState } from 'react';

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

## React Server Components vs. Server-Side Rendering

Many developers confuse **React Server Components (RSC)** with **Server-Side Rendering (SSR)**. Here's a comparison:

| Feature              | React Server Components (RSC) | Server-Side Rendering (SSR) |
|----------------------|------------------------------|-----------------------------|
| Runs on              | Server                       | Server                      |
| Sends JS to client   | No                           | Yes                         |
| State management     | Handled on the server        | Requires hydration on client |
| SEO support          | Yes                          | Yes                         |
| Data fetching        | Directly on server           | Via API calls from client   |
| Best use case        | JS reduction, performance    | Dynamic pages, real-time data |

## When Should You Use RSC?

React Server Components are ideal when your goal is to minimize JS on the client. Common use cases:

- **Static content pages**: Blogs, docs, news.
- **Dashboards**: Fetch heavy data on the server, leaving the client light.
- **E-commerce websites**: Display live product lists without excessive client-side JS.
- **Streaming apps**: Progressive loading improves UX.

## Avoiding Hydration Issues in RSC

When mixing RSC with Client Components, be careful to avoid **hydration mismatches** — differences between server-rendered and client-rendered output. Common mistakes include:

- **Using non-deterministic values** like `Date.now()` or `Math.random()` in server components.
- **Invalid HTML structure**, e.g., putting `<div>` inside `<p>`.
- **Using client-only APIs**, such as `window`, `document`, or `localStorage` inside server components.
- **Needing interactivity?** Move that logic into a Client Component using `'use client'`.

## Conclusion

React Server Components significantly boost performance by offloading logic and rendering to the server. In combination with Next.js, RSCs enhance user experience by reducing page load times and browser workload.

🚀 **Ready to try RSC?** Start by refactoring components to leverage the full power of server rendering!

Mastering RSC will help you build faster, lighter, and more maintainable React applications.

## Introduction

React Server Components (RSC) are a groundbreaking feature that improves performance by reducing the amount of JavaScript sent to the browser. Unlike traditional components, RSCs run entirely on the server, optimizing data fetching and reducing frontend workload.

This article will help you understand React Server Components, their benefits, how they differ from traditional Client Components, and how to use them effectively in Next.js.

## What are React Server Components?

Normally, React components are rendered in the browser using JavaScript. With RSC, however, some components are rendered on the server and only the serialized HTML is sent to the client — significantly reducing the bundle size.

### How RSC Works

RSCs execute on the server, run logic, and send serialized output to the client. Unlike Server-Side Rendering (SSR), which renders the entire page, RSCs allow partial rendering and progressive streaming to the client.

RSCs can directly access data sources (like databases or APIs) without extra client-side requests, resulting in lower latency and better performance.

### Benefits of RSC

- **Reduced JavaScript on client**: Less JS sent to the browser means faster page loads.
- **Improved SEO**: Content is server-rendered, making it more crawlable.
- **Efficient data fetching**: Fetch data directly on the server.
- **Seamless integration**: Can be used alongside Client Components when needed.
- **Faster perceived load**: HTML is sent progressively, allowing content to appear quickly.
- **Reduced memory usage in browser**: Server handles state, keeping the client lightweight.

## Using React Server Components in Next.js

Next.js 13+ fully supports RSC. By default, all components inside the `app/` directory are **Server Components**, unless explicitly marked as client components.

### Example: A Simple Server Component

```tsx
// app/components/PostList.tsx (By default, it's a Server Component)
import { getPosts } from '@/lib/api';

export default async function PostList() {
  const posts = await getPosts();
  
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

### When to Use Client Components

Some components must run on the client, like those using `useState`, `useEffect`, or event listeners. To mark a file as a Client Component, use `'use client'` at the top:

```tsx
// app/components/Button.tsx
'use client';

import { useState } from 'react';

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

## React Server Components vs. Server-Side Rendering

Many developers confuse **React Server Components (RSC)** with **Server-Side Rendering (SSR)**. Here's a comparison:

| Feature              | React Server Components (RSC) | Server-Side Rendering (SSR) |
|----------------------|------------------------------|-----------------------------|
| Runs on              | Server                       | Server                      |
| Sends JS to client   | No                           | Yes                         |
| State management     | Handled on the server        | Requires hydration on client |
| SEO support          | Yes                          | Yes                         |
| Data fetching        | Directly on server           | Via API calls from client   |
| Best use case        | JS reduction, performance    | Dynamic pages, real-time data |

## When Should You Use RSC?

React Server Components are ideal when your goal is to minimize JS on the client. Common use cases:

- **Static content pages**: Blogs, docs, news.
- **Dashboards**: Fetch heavy data on the server, leaving the client light.
- **E-commerce websites**: Display live product lists without excessive client-side JS.
- **Streaming apps**: Progressive loading improves UX.

## Avoiding Hydration Issues in RSC

When mixing RSC with Client Components, be careful to avoid **hydration mismatches** — differences between server-rendered and client-rendered output. Common mistakes include:

- **Using non-deterministic values** like `Date.now()` or `Math.random()` in server components.
- **Invalid HTML structure**, e.g., putting `<div>` inside `<p>`.
- **Using client-only APIs**, such as `window`, `document`, or `localStorage` inside server components.
- **Needing interactivity?** Move that logic into a Client Component using `'use client'`.

## Conclusion

React Server Components significantly boost performance by offloading logic and rendering to the server. In combination with Next.js, RSCs enhance user experience by reducing page load times and browser workload.

🚀 **Ready to try RSC?** Start by refactoring components to leverage the full power of server rendering!

Mastering RSC will help you build faster, lighter, and more maintainable React applications.

## Giới thiệu

React Server Components (RSC) là một tính năng mang tính đột phá giúp cải thiện hiệu suất bằng cách giảm lượng JavaScript tải xuống trình duyệt. Khác với các Component truyền thống, RSC chạy hoàn toàn trên server, giúp tối ưu hóa việc lấy dữ liệu và giảm tải cho frontend.

Bài viết này sẽ giúp bạn hiểu rõ về React Server Components, lợi ích của chúng, sự khác biệt so với Client Components truyền thống và cách sử dụng trong Next.js.

## React Server Components là gì?

Thông thường, React render component trên trình duyệt bằng JavaScript. Nhưng với RSC, một số component được render trên server và gửi HTML về client, giúp giảm đáng kể kích thước bundle JavaScript.

### Cách RSC hoạt động

RSC chạy trên server, thực hiện logic và gửi kết quả đã được serialize về client. Khác với Server-Side Rendering (SSR) gửi nguyên trang HTML đã render, RSC cho phép render từng phần và truyền dần xuống client.

Điều này giúp RSC có thể truy vấn dữ liệu trực tiếp từ database hoặc API mà không cần thêm request từ client, giảm độ trễ và tối ưu hiệu suất.

### Lợi ích của RSC

- **Giảm JavaScript tải xuống client**: Không gửi JavaScript thừa về trình duyệt, giúp trang tải nhanh hơn.
- **Cải thiện SEO**: Nội dung render sẵn trên server giúp công cụ tìm kiếm dễ dàng thu thập dữ liệu.
- **Tối ưu hóa việc lấy dữ liệu**: Fetch dữ liệu trực tiếp trên server, không cần gọi API từ client.
- **Tích hợp dễ dàng**: Có thể sử dụng cùng với Client Components khi cần.
- **Tăng tốc độ tải trang**: Gửi HTML đã render sẵn giúp người dùng thấy nội dung ngay lập tức.
- **Giảm tải bộ nhớ trình duyệt**: Trạng thái được xử lý trên server, giúp trình duyệt hoạt động mượt mà hơn.

## Sử dụng React Server Components trong Next.js

Next.js 13+ hỗ trợ hoàn toàn RSC. Mặc định, tất cả component trong thư mục `app/` của Next.js đều là **Server Components**, trừ khi bạn chỉ định là Client Component.

### Ví dụ: Một Server Component đơn giản

```tsx
// app/components/PostList.tsx (Mặc định là Server Component)
import { getPosts } from '@/lib/api';

export default async function PostList() {
  const posts = await getPosts();
  
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

### Khi nào cần dùng Client Component?

Một số component vẫn cần chạy trên client, như những component sử dụng `useState`, `useEffect` hoặc có event listener. Để chỉ định một component là Client Component, thêm `'use client'` ở đầu file:

```tsx
// app/components/Button.tsx
'use client';

import { useState } from 'react';

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

## React Server Components vs. Server-Side Rendering

Nhiều người nhầm lẫn giữa **React Server Components (RSC)** và **Server-Side Rendering (SSR)**. Dưới đây là bảng so sánh:

| Đặc điểm              | React Server Components (RSC) | Server-Side Rendering (SSR) |
|----------------------|------------------------------|-----------------------------|
| Chạy trên           | Server                        | Server                      |
| Gửi JavaScript xuống client | Không                         | Có                          |
| Quản lý state        | Xử lý trên server            | Cần hydration trên client    |
| Hỗ trợ SEO           | Có                            | Có                          |
| Lấy dữ liệu          | Fetch trực tiếp trên server | Gọi API từ client            |
| Ứng dụng phù hợp     | Giảm tải JS, tối ưu hiệu suất | Render trang động, cập nhật dữ liệu theo thời gian thực |

## Khi nào nên sử dụng RSC?

React Server Components phù hợp khi bạn muốn giảm JavaScript chạy trên client. Một số trường hợp sử dụng phổ biến:

- **Trang nội dung tĩnh**: Blog, tài liệu, trang tin tức.
- **Ứng dụng dashboard**: Lấy dữ liệu lớn trên server mà không ảnh hưởng đến frontend.
- **Website thương mại điện tử**: Hiển thị danh sách sản phẩm theo thời gian thực mà không gửi nhiều script xuống client.
- **Ứng dụng streaming**: Tải dần nội dung để cải thiện trải nghiệm người dùng.

## Tránh lỗi Hydration trong RSC

Khi kết hợp RSC với Client Components, cần chú ý tránh lỗi **hydration mismatch**, tức là nội dung render trên server khác với nội dung hiển thị trên client. Một số nguyên nhân phổ biến:

- **Không sử dụng giá trị thay đổi theo thời gian** như `Date.now()` hoặc `Math.random()` trong Server Components.
- **Không render JSX không hợp lệ**, chẳng hạn như `<div>` nằm trong `<p>`.
- **Không sử dụng các API chỉ chạy trên client**, ví dụ `window`, `document`, `localStorage` trong Server Components.
- **Khi cần interactivity**, hãy tách component đó thành Client Component bằng cách thêm `'use client'`.

## Kết luận

React Server Components giúp tăng hiệu suất bằng cách giảm tải JavaScript cho client. Khi kết hợp với Next.js, RSC giúp tối ưu trải nghiệm người dùng bằng cách cải thiện tốc độ tải trang và giảm tải cho trình duyệt.

🚀 **Bạn đã sẵn sàng thử RSC chưa?** Hãy bắt đầu bằng cách refactor component của bạn để tận dụng tối đa lợi ích của RSC!

Hiểu rõ cách sử dụng RSC sẽ giúp bạn xây dựng ứng dụng React nhanh hơn, nhẹ hơn và dễ bảo trì hơn.

How RSC improves performance and reduces client-side JavaScript

Cách RSC cải thiện hiệu suất và giảm JavaScript phía client

Understanding React Server Components

Hiểu về React Server Components

## Lighthouse Score là gì?

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) là một công cụ mã nguồn mở của Google giúp đánh giá chất lượng trang web dựa trên các tiêu chí: 
- **Performance** (Hiệu suất)
- **Accessibility** (Khả năng truy cập)
- **Best Practices** (Thực hành tốt nhất)
- **SEO** (Tối ưu công cụ tìm kiếm)

Mỗi tiêu chí có thang điểm từ 0 đến 100, điểm càng cao chứng tỏ trang web càng tối ưu.

---

## 1. Tối ưu Performance (Hiệu suất)

### a) Giảm kích thước và số lượng request
- **Nén hình ảnh** bằng WebP hoặc AVIF thay vì JPEG/PNG.
- **Lazy Load hình ảnh và video** để chỉ tải khi cần thiết.
- **Sử dụng CDN** để tải tài nguyên nhanh hơn từ máy chủ gần nhất.

### b) Cải thiện tốc độ tải trang
- **Nén tài nguyên** bằng Gzip hoặc Brotli.
- **Tối ưu CSS và JavaScript** bằng cách loại bỏ code không sử dụng (tree shaking, minify).
- **Sử dụng cache hiệu quả** bằng cách đặt `Cache-Control` hợp lý.

### c) Giảm thời gian render
- **Prefetch, Preload, và Preconnect** để tối ưu hóa quá trình tải dữ liệu.
- **Sử dụng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG)** nếu dùng Next.js hoặc Nuxt.js.

---

## 2. Cải thiện Accessibility (Khả năng truy cập)

- **Thêm alt cho hình ảnh** để hỗ trợ trình đọc màn hình.
- **Đảm bảo contrast màu sắc** giữa chữ và nền để dễ đọc.
- **Sử dụng semantic HTML** (`<header>`, `<main>`, `<section>`, `<button>`, ...).
- **Cung cấp keyboard navigation** để hỗ trợ người dùng không dùng chuột.

---

## 3. Tuân thủ Best Practices

- **Sử dụng HTTPS** để bảo mật dữ liệu.
- **Tránh sử dụng thư viện lỗi thời** và kiểm tra `console.warn` trong DevTools.
- **Tránh tải JavaScript chặn render** bằng cách dùng `defer` hoặc `async`.
- **Kiểm tra lỗi console** và tối ưu security headers (`Content-Security-Policy`).

---

## 4. Cải thiện SEO

- **Cung cấp metadata đầy đủ** (`title`, `meta description`, `og:image`, `og:title`).
- **Tạo sitemap.xml và robots.txt** để giúp công cụ tìm kiếm crawl tốt hơn.
- **Sử dụng structured data** (Schema Markup) để hiển thị rich snippets.
- **Tối ưu tốc độ mobile** vì Google ưu tiên mobile-first indexing.

---

## 5. Cách kiểm tra Lighthouse Score và theo dõi cải tiến

- Dùng **Chrome DevTools** (`F12 > Lighthouse`)
- Sử dụng **PageSpeed Insights** ([pagespeed.web.dev](https://pagespeed.web.dev/))
- Kiểm tra bằng **Lighthouse CI** trong pipeline CI/CD

---

## Tổng kết

✅ **Giảm request và tối ưu tài nguyên** để tăng Performance.  
✅ **Tối ưu Accessibility** để trang web dễ tiếp cận hơn.  
✅ **Tuân thủ Best Practices** để tránh lỗi bảo mật và coding lỗi thời.  
✅ **Cải thiện SEO** để tăng thứ hạng tìm kiếm.

Lighthouse Score không chỉ giúp tăng tốc độ trang mà còn cải thiện trải nghiệm người dùng và SEO. Hãy bắt đầu tối ưu ngay hôm nay! 🚀



## What is Lighthouse Score?

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is an open-source tool by Google that evaluates the quality of a webpage based on the following criteria:
- **Performance**
- **Accessibility**
- **Best Practices**
- **SEO**

Each criterion is scored from 0 to 100, with higher scores indicating better optimization of the webpage.

---

## 1. Optimizing Performance

### a) Reduce size and number of requests
- **Compress images** using WebP or AVIF instead of JPEG/PNG.
- **Lazy load images and videos** so they load only when necessary.
- **Use a CDN** to load resources faster from the nearest server.

### b) Improve page load speed
- **Compress resources** using Gzip or Brotli.
- **Optimize CSS and JavaScript** by removing unused code (tree shaking, minification).
- **Use effective caching** by setting `Cache-Control` appropriately.

### c) Reduce render time
- **Prefetch, Preload, and Preconnect** to optimize data loading.
- **Use Server-Side Rendering (SSR) or Static Site Generation (SSG)** if using Next.js or Nuxt.js.

---

## 2. Improve Accessibility

- **Add alt text for images** to support screen readers.
- **Ensure color contrast** between text and background for readability.
- **Use semantic HTML** (`<header>`, `<main>`, `<section>`, `<button>`, ...).
- **Provide keyboard navigation** to support users who don't use a mouse.

---

## 3. Follow Best Practices

- **Use HTTPS** for data security.
- **Avoid outdated libraries** and check for `console.warn` in DevTools.
- **Avoid blocking JavaScript rendering** by using `defer` or `async`.
- **Check for console errors** and optimize security headers (`Content-Security-Policy`).

---

## 4. Improve SEO

- **Provide complete metadata** (`title`, `meta description`, `og:image`, `og:title`).
- **Create a sitemap.xml and robots.txt** to help search engines crawl the site better.
- **Use structured data** (Schema Markup) for rich snippets.
- **Optimize mobile speed** since Google prioritizes mobile-first indexing.

---

## 5. How to Check Lighthouse Score and Track Improvements

- Use **Chrome DevTools** (`F12 > Lighthouse`).
- Use **PageSpeed Insights** ([pagespeed.web.dev](https://pagespeed.web.dev/)).
- Check with **Lighthouse CI** in your CI/CD pipeline.

---

## Summary

✅ **Reduce requests and optimize resources** to increase Performance.  
✅ **Optimize Accessibility** to make your website more accessible.  
✅ **Follow Best Practices** to avoid security issues and outdated coding practices.  
✅ **Improve SEO** to enhance search engine ranking.

Lighthouse Score not only helps speed up the page but also improves user experience and SEO. Start optimizing today! 🚀

## What is Lighthouse Score?

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) is an open-source tool by Google that evaluates the quality of a webpage based on the following criteria:
- **Performance**
- **Accessibility**
- **Best Practices**
- **SEO**

Each criterion is scored from 0 to 100, with higher scores indicating better optimization of the webpage.

---

## 1. Optimizing Performance

### a) Reduce size and number of requests
- **Compress images** using WebP or AVIF instead of JPEG/PNG.
- **Lazy load images and videos** so they load only when necessary.
- **Use a CDN** to load resources faster from the nearest server.

### b) Improve page load speed
- **Compress resources** using Gzip or Brotli.
- **Optimize CSS and JavaScript** by removing unused code (tree shaking, minification).
- **Use effective caching** by setting `Cache-Control` appropriately.

### c) Reduce render time
- **Prefetch, Preload, and Preconnect** to optimize data loading.
- **Use Server-Side Rendering (SSR) or Static Site Generation (SSG)** if using Next.js or Nuxt.js.

---

## 2. Improve Accessibility

- **Add alt text for images** to support screen readers.
- **Ensure color contrast** between text and background for readability.
- **Use semantic HTML** (`<header>`, `<main>`, `<section>`, `<button>`, ...).
- **Provide keyboard navigation** to support users who don't use a mouse.

---

## 3. Follow Best Practices

- **Use HTTPS** for data security.
- **Avoid outdated libraries** and check for `console.warn` in DevTools.
- **Avoid blocking JavaScript rendering** by using `defer` or `async`.
- **Check for console errors** and optimize security headers (`Content-Security-Policy`).

---

## 4. Improve SEO

- **Provide complete metadata** (`title`, `meta description`, `og:image`, `og:title`).
- **Create a sitemap.xml and robots.txt** to help search engines crawl the site better.
- **Use structured data** (Schema Markup) for rich snippets.
- **Optimize mobile speed** since Google prioritizes mobile-first indexing.

---

## 5. How to Check Lighthouse Score and Track Improvements

- Use **Chrome DevTools** (`F12 > Lighthouse`).
- Use **PageSpeed Insights** ([pagespeed.web.dev](https://pagespeed.web.dev/)).
- Check with **Lighthouse CI** in your CI/CD pipeline.

---

## Summary

✅ **Reduce requests and optimize resources** to increase Performance.  
✅ **Optimize Accessibility** to make your website more accessible.  
✅ **Follow Best Practices** to avoid security issues and outdated coding practices.  
✅ **Improve SEO** to enhance search engine ranking.

Lighthouse Score not only helps speed up the page but also improves user experience and SEO. Start optimizing today! 🚀

## Lighthouse Score là gì?

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) là một công cụ mã nguồn mở của Google giúp đánh giá chất lượng trang web dựa trên các tiêu chí: 
- **Performance** (Hiệu suất)
- **Accessibility** (Khả năng truy cập)
- **Best Practices** (Thực hành tốt nhất)
- **SEO** (Tối ưu công cụ tìm kiếm)

Mỗi tiêu chí có thang điểm từ 0 đến 100, điểm càng cao chứng tỏ trang web càng tối ưu.

---

## 1. Tối ưu Performance (Hiệu suất)

### a) Giảm kích thước và số lượng request
- **Nén hình ảnh** bằng WebP hoặc AVIF thay vì JPEG/PNG.
- **Lazy Load hình ảnh và video** để chỉ tải khi cần thiết.
- **Sử dụng CDN** để tải tài nguyên nhanh hơn từ máy chủ gần nhất.

### b) Cải thiện tốc độ tải trang
- **Nén tài nguyên** bằng Gzip hoặc Brotli.
- **Tối ưu CSS và JavaScript** bằng cách loại bỏ code không sử dụng (tree shaking, minify).
- **Sử dụng cache hiệu quả** bằng cách đặt `Cache-Control` hợp lý.

### c) Giảm thời gian render
- **Prefetch, Preload, và Preconnect** để tối ưu hóa quá trình tải dữ liệu.
- **Sử dụng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG)** nếu dùng Next.js hoặc Nuxt.js.

---

## 2. Cải thiện Accessibility (Khả năng truy cập)

- **Thêm alt cho hình ảnh** để hỗ trợ trình đọc màn hình.
- **Đảm bảo contrast màu sắc** giữa chữ và nền để dễ đọc.
- **Sử dụng semantic HTML** (`<header>`, `<main>`, `<section>`, `<button>`, ...).
- **Cung cấp keyboard navigation** để hỗ trợ người dùng không dùng chuột.

---

## 3. Tuân thủ Best Practices

- **Sử dụng HTTPS** để bảo mật dữ liệu.
- **Tránh sử dụng thư viện lỗi thời** và kiểm tra `console.warn` trong DevTools.
- **Tránh tải JavaScript chặn render** bằng cách dùng `defer` hoặc `async`.
- **Kiểm tra lỗi console** và tối ưu security headers (`Content-Security-Policy`).

---

## 4. Cải thiện SEO

- **Cung cấp metadata đầy đủ** (`title`, `meta description`, `og:image`, `og:title`).
- **Tạo sitemap.xml và robots.txt** để giúp công cụ tìm kiếm crawl tốt hơn.
- **Sử dụng structured data** (Schema Markup) để hiển thị rich snippets.
- **Tối ưu tốc độ mobile** vì Google ưu tiên mobile-first indexing.

---

## 5. Cách kiểm tra Lighthouse Score và theo dõi cải tiến

- Dùng **Chrome DevTools** (`F12 > Lighthouse`)
- Sử dụng **PageSpeed Insights** ([pagespeed.web.dev](https://pagespeed.web.dev/))
- Kiểm tra bằng **Lighthouse CI** trong pipeline CI/CD

---

## Tổng kết

✅ **Giảm request và tối ưu tài nguyên** để tăng Performance.  
✅ **Tối ưu Accessibility** để trang web dễ tiếp cận hơn.  
✅ **Tuân thủ Best Practices** để tránh lỗi bảo mật và coding lỗi thời.  
✅ **Cải thiện SEO** để tăng thứ hạng tìm kiếm.

Lighthouse Score không chỉ giúp tăng tốc độ trang mà còn cải thiện trải nghiệm người dùng và SEO. Hãy bắt đầu tối ưu ngay hôm nay! 🚀

A guide to optimizing performance, accessibility, SEO, and best practices to improve Lighthouse Score.

Hướng dẫn tối ưu hiệu suất, accessibility, SEO và best practices để cải thiện Lighthouse Score.

Optimizing Lighthouse Score: Steps to Achieve a High Score

Tối ưu Lighthouse Score: Các bước giúp trang web của bạn đạt điểm cao

## 1. Tải quá nhiều JavaScript không cần thiết

Quá nhiều JavaScript có thể làm trang web chậm, ảnh hưởng đến **Time to Interactive (TTI)**.

**Sai lầm thường gặp:**
- Import toàn bộ thư viện thay vì chỉ những phần cần thiết.
- Không sử dụng tree shaking để loại bỏ code không dùng.
- Không tải script một cách tối ưu.

**Cách khắc phục:**
- Dùng **dynamic import** (`import()`).
- Tối ưu Webpack với tree shaking.
- Dùng `async` hoặc `defer` khi tải script.

---

## 2. Không tối ưu hình ảnh và video

Hình ảnh quá lớn có thể làm **Largest Contentful Paint (LCP)** chậm, gây ảnh hưởng đến trải nghiệm người dùng.

**Sai lầm thường gặp:**
- Sử dụng ảnh PNG/JPEG thay vì WebP/AVIF.
- Không lazy load hình ảnh và video.
- Không nén hình ảnh trước khi upload.

**Cách khắc phục:**
- Dùng **WebP** hoặc **AVIF** thay vì PNG/JPEG.
- Sử dụng **`loading="lazy"`** cho hình ảnh.
- Dùng CDN để phân phối nội dung nhanh hơn.

---

## 3. Không tối ưu CSS và render-blocking resources

CSS có thể làm chậm **First Contentful Paint (FCP)** nếu không được tải hiệu quả.

**Sai lầm thường gặp:**
- CSS quá lớn hoặc chứa nhiều style không dùng.
- Không sử dụng critical CSS.
- Dùng quá nhiều web font nặng.

**Cách khắc phục:**
- **Minify CSS** bằng PostCSS, PurgeCSS.
- **Inline critical CSS** để tăng tốc render.
- **Dùng font-display: swap** để tránh chặn render.

---

## 4. Không tối ưu cache và tải lại tài nguyên không cần thiết

Nếu không cấu hình cache đúng cách, trình duyệt sẽ tải lại các tài nguyên mỗi lần tải trang.

**Sai lầm thường gặp:**
- Không đặt `Cache-Control` và `ETag` hợp lý.
- Không sử dụng Service Workers để cache dữ liệu.
- Không dùng HTTP/2 hoặc HTTP/3 để tối ưu tải tài nguyên.

**Cách khắc phục:**
- Thiết lập **Cache-Control** để trình duyệt cache hợp lý.
- Sử dụng **Service Worker** để cache static assets.
- Dùng **HTTP/2 hoặc HTTP/3** để tăng tốc tải trang.

---

## 5. Không tối ưu API và request đến server

Nếu API chậm hoặc gửi quá nhiều request, trang web có thể bị **chậm** và gây tải nặng cho server.

**Sai lầm thường gặp:**
- Gửi quá nhiều request đến server.
- Không tối ưu database query.
- Không sử dụng caching hoặc lazy loading cho dữ liệu.

**Cách khắc phục:**
- **Dùng debounce/throttle** khi gửi request từ client.
- **Sử dụng cache (Redis, SWR, React Query)** để giảm tải.
- **Tối ưu database query** bằng index hoặc pagination.

---

## 6. Không đo lường hiệu suất trước khi tối ưu

Không có dữ liệu cụ thể sẽ khiến bạn tối ưu sai hướng.

**Sai lầm thường gặp:**
- Không sử dụng Lighthouse, WebPageTest, hoặc Chrome DevTools.
- Tối ưu theo cảm tính mà không có số liệu cụ thể.
- Không kiểm tra Core Web Vitals (LCP, FID, CLS).

**Cách khắc phục:**
- Sử dụng **Lighthouse** để phân tích hiệu suất.
- Kiểm tra **Core Web Vitals** trên Google PageSpeed Insights.
- Dùng **Performance Panel trong Chrome DevTools**.

---

## Tổng kết

✅ **Giảm tải JavaScript không cần thiết**.  
✅ **Nén và lazy load hình ảnh, video**.  
✅ **Tối ưu CSS để tránh chặn render**.  
✅ **Cấu hình cache hợp lý để giảm tải server**.  
✅ **Giám sát hiệu suất với Lighthouse và DevTools**.

Tránh những sai lầm này sẽ giúp trang web của bạn nhanh hơn, mượt mà hơn và mang lại trải nghiệm tốt hơn cho người dùng! 🚀



## 1. Loading Too Much Unnecessary JavaScript

Too much JavaScript can slow down a website, affecting **Time to Interactive (TTI)**.

**Common Mistakes:**
- Importing the entire library instead of just the needed parts.
- Not using tree shaking to remove unused code.
- Not loading scripts optimally.

**Fixes:**
- Use **dynamic import** (`import()`).
- Optimize Webpack with tree shaking.
- Use `async` or `defer` when loading scripts.

---

## 2. Not Optimizing Images and Videos

Large images can slow down **Largest Contentful Paint (LCP)**, negatively affecting the user experience.

**Common Mistakes:**
- Using PNG/JPEG images instead of WebP/AVIF.
- Not lazy loading images and videos.
- Not compressing images before uploading.

**Fixes:**
- Use **WebP** or **AVIF** instead of PNG/JPEG.
- Use **`loading="lazy"`** for images.
- Use a CDN for faster content delivery.

---

## 3. Not Optimizing CSS and Render-Blocking Resources

CSS can delay **First Contentful Paint (FCP)** if not loaded efficiently.

**Common Mistakes:**
- CSS is too large or contains unused styles.
- Not using critical CSS.
- Using too many heavy web fonts.

**Fixes:**
- **Minify CSS** using PostCSS, PurgeCSS.
- **Inline critical CSS** to speed up rendering.
- **Use font-display: swap** to prevent render-blocking.

---

## 4. Not Optimizing Cache and Reloading Unnecessary Resources

If cache is not configured correctly, the browser will reload resources every time the page loads.

**Common Mistakes:**
- Not setting `Cache-Control` and `ETag` appropriately.
- Not using Service Workers to cache data.
- Not using HTTP/2 or HTTP/3 for optimized resource loading.

**Fixes:**
- Set **Cache-Control** headers to cache resources properly.
- Use **Service Workers** to cache static assets.
- Use **HTTP/2 or HTTP/3** to speed up page loading.

---

## 5. Not Optimizing API and Server Requests

If an API is slow or sends too many requests, the website can become **slow** and overload the server.

**Common Mistakes:**
- Sending too many requests to the server.
- Not optimizing database queries.
- Not using caching or lazy loading for data.

**Fixes:**
- **Use debounce/throttle** for client-side requests.
- **Use caching (Redis, SWR, React Query)** to reduce load.
- **Optimize database queries** with indexing or pagination.

---

## 6. Not Measuring Performance Before Optimization

Without specific data, you may optimize in the wrong direction.

**Common Mistakes:**
- Not using Lighthouse, WebPageTest, or Chrome DevTools.
- Optimizing based on intuition rather than data.
- Not checking Core Web Vitals (LCP, FID, CLS).

**Fixes:**
- Use **Lighthouse** to analyze performance.
- Check **Core Web Vitals** on Google PageSpeed Insights.
- Use the **Performance Panel in Chrome DevTools**.

---

## Summary

✅ **Reduce unnecessary JavaScript load.**  
✅ **Compress and lazy load images, videos.**  
✅ **Optimize CSS to avoid render-blocking.**  
✅ **Configure cache properly to reduce server load.**  
✅ **Monitor performance with Lighthouse and DevTools.**

Avoiding these mistakes will help your website be faster, smoother, and provide a better user experience! 🚀

## 1. Loading Too Much Unnecessary JavaScript

Too much JavaScript can slow down a website, affecting **Time to Interactive (TTI)**.

**Common Mistakes:**
- Importing the entire library instead of just the needed parts.
- Not using tree shaking to remove unused code.
- Not loading scripts optimally.

**Fixes:**
- Use **dynamic import** (`import()`).
- Optimize Webpack with tree shaking.
- Use `async` or `defer` when loading scripts.

---

## 2. Not Optimizing Images and Videos

Large images can slow down **Largest Contentful Paint (LCP)**, negatively affecting the user experience.

**Common Mistakes:**
- Using PNG/JPEG images instead of WebP/AVIF.
- Not lazy loading images and videos.
- Not compressing images before uploading.

**Fixes:**
- Use **WebP** or **AVIF** instead of PNG/JPEG.
- Use **`loading="lazy"`** for images.
- Use a CDN for faster content delivery.

---

## 3. Not Optimizing CSS and Render-Blocking Resources

CSS can delay **First Contentful Paint (FCP)** if not loaded efficiently.

**Common Mistakes:**
- CSS is too large or contains unused styles.
- Not using critical CSS.
- Using too many heavy web fonts.

**Fixes:**
- **Minify CSS** using PostCSS, PurgeCSS.
- **Inline critical CSS** to speed up rendering.
- **Use font-display: swap** to prevent render-blocking.

---

## 4. Not Optimizing Cache and Reloading Unnecessary Resources

If cache is not configured correctly, the browser will reload resources every time the page loads.

**Common Mistakes:**
- Not setting `Cache-Control` and `ETag` appropriately.
- Not using Service Workers to cache data.
- Not using HTTP/2 or HTTP/3 for optimized resource loading.

**Fixes:**
- Set **Cache-Control** headers to cache resources properly.
- Use **Service Workers** to cache static assets.
- Use **HTTP/2 or HTTP/3** to speed up page loading.

---

## 5. Not Optimizing API and Server Requests

If an API is slow or sends too many requests, the website can become **slow** and overload the server.

**Common Mistakes:**
- Sending too many requests to the server.
- Not optimizing database queries.
- Not using caching or lazy loading for data.

**Fixes:**
- **Use debounce/throttle** for client-side requests.
- **Use caching (Redis, SWR, React Query)** to reduce load.
- **Optimize database queries** with indexing or pagination.

---

## 6. Not Measuring Performance Before Optimization

Without specific data, you may optimize in the wrong direction.

**Common Mistakes:**
- Not using Lighthouse, WebPageTest, or Chrome DevTools.
- Optimizing based on intuition rather than data.
- Not checking Core Web Vitals (LCP, FID, CLS).

**Fixes:**
- Use **Lighthouse** to analyze performance.
- Check **Core Web Vitals** on Google PageSpeed Insights.
- Use the **Performance Panel in Chrome DevTools**.

---

## Summary

✅ **Reduce unnecessary JavaScript load.**  
✅ **Compress and lazy load images, videos.**  
✅ **Optimize CSS to avoid render-blocking.**  
✅ **Configure cache properly to reduce server load.**  
✅ **Monitor performance with Lighthouse and DevTools.**

Avoiding these mistakes will help your website be faster, smoother, and provide a better user experience! 🚀

## 1. Tải quá nhiều JavaScript không cần thiết

Quá nhiều JavaScript có thể làm trang web chậm, ảnh hưởng đến **Time to Interactive (TTI)**.

**Sai lầm thường gặp:**
- Import toàn bộ thư viện thay vì chỉ những phần cần thiết.
- Không sử dụng tree shaking để loại bỏ code không dùng.
- Không tải script một cách tối ưu.

**Cách khắc phục:**
- Dùng **dynamic import** (`import()`).
- Tối ưu Webpack với tree shaking.
- Dùng `async` hoặc `defer` khi tải script.

---

## 2. Không tối ưu hình ảnh và video

Hình ảnh quá lớn có thể làm **Largest Contentful Paint (LCP)** chậm, gây ảnh hưởng đến trải nghiệm người dùng.

**Sai lầm thường gặp:**
- Sử dụng ảnh PNG/JPEG thay vì WebP/AVIF.
- Không lazy load hình ảnh và video.
- Không nén hình ảnh trước khi upload.

**Cách khắc phục:**
- Dùng **WebP** hoặc **AVIF** thay vì PNG/JPEG.
- Sử dụng **`loading="lazy"`** cho hình ảnh.
- Dùng CDN để phân phối nội dung nhanh hơn.

---

## 3. Không tối ưu CSS và render-blocking resources

CSS có thể làm chậm **First Contentful Paint (FCP)** nếu không được tải hiệu quả.

**Sai lầm thường gặp:**
- CSS quá lớn hoặc chứa nhiều style không dùng.
- Không sử dụng critical CSS.
- Dùng quá nhiều web font nặng.

**Cách khắc phục:**
- **Minify CSS** bằng PostCSS, PurgeCSS.
- **Inline critical CSS** để tăng tốc render.
- **Dùng font-display: swap** để tránh chặn render.

---

## 4. Không tối ưu cache và tải lại tài nguyên không cần thiết

Nếu không cấu hình cache đúng cách, trình duyệt sẽ tải lại các tài nguyên mỗi lần tải trang.

**Sai lầm thường gặp:**
- Không đặt `Cache-Control` và `ETag` hợp lý.
- Không sử dụng Service Workers để cache dữ liệu.
- Không dùng HTTP/2 hoặc HTTP/3 để tối ưu tải tài nguyên.

**Cách khắc phục:**
- Thiết lập **Cache-Control** để trình duyệt cache hợp lý.
- Sử dụng **Service Worker** để cache static assets.
- Dùng **HTTP/2 hoặc HTTP/3** để tăng tốc tải trang.

---

## 5. Không tối ưu API và request đến server

Nếu API chậm hoặc gửi quá nhiều request, trang web có thể bị **chậm** và gây tải nặng cho server.

**Sai lầm thường gặp:**
- Gửi quá nhiều request đến server.
- Không tối ưu database query.
- Không sử dụng caching hoặc lazy loading cho dữ liệu.

**Cách khắc phục:**
- **Dùng debounce/throttle** khi gửi request từ client.
- **Sử dụng cache (Redis, SWR, React Query)** để giảm tải.
- **Tối ưu database query** bằng index hoặc pagination.

---

## 6. Không đo lường hiệu suất trước khi tối ưu

Không có dữ liệu cụ thể sẽ khiến bạn tối ưu sai hướng.

**Sai lầm thường gặp:**
- Không sử dụng Lighthouse, WebPageTest, hoặc Chrome DevTools.
- Tối ưu theo cảm tính mà không có số liệu cụ thể.
- Không kiểm tra Core Web Vitals (LCP, FID, CLS).

**Cách khắc phục:**
- Sử dụng **Lighthouse** để phân tích hiệu suất.
- Kiểm tra **Core Web Vitals** trên Google PageSpeed Insights.
- Dùng **Performance Panel trong Chrome DevTools**.

---

## Tổng kết

✅ **Giảm tải JavaScript không cần thiết**.  
✅ **Nén và lazy load hình ảnh, video**.  
✅ **Tối ưu CSS để tránh chặn render**.  
✅ **Cấu hình cache hợp lý để giảm tải server**.  
✅ **Giám sát hiệu suất với Lighthouse và DevTools**.

Tránh những sai lầm này sẽ giúp trang web của bạn nhanh hơn, mượt mà hơn và mang lại trải nghiệm tốt hơn cho người dùng! 🚀

Learn about common mistakes in frontend optimization and how to fix them for maximum performance.

Tìm hiểu những lỗi thường gặp khi tối ưu frontend và cách khắc phục để đạt hiệu suất tối đa.

Common Mistakes in Frontend Performance Optimization

Những sai lầm phổ biến khi tối ưu hiệu suất frontend

## 1. Event Loop là gì?

JavaScript là một ngôn ngữ **đơn luồng (single-threaded)**, có nghĩa là nó chỉ có một luồng chính để thực thi code. Để xử lý tác vụ **bất đồng bộ (asynchronous)** mà không chặn chương trình, JavaScript sử dụng **Event Loop**.

Event Loop là cơ chế giúp JavaScript quản lý các tác vụ bất đồng bộ như **setTimeout**, **fetch**, **event listener**, và **promises** bằng cách điều phối các hàng đợi (queues) khác nhau.

---

## 2. Call Stack, Web APIs, Task Queue và Microtask Queue

### Call Stack (Ngăn xếp gọi hàm)
Call Stack là nơi JavaScript thực thi các hàm theo nguyên tắc **LIFO (Last In, First Out)**.

```js
function foo() {
  console.log("Foo");
}

function bar() {
  foo();
}

bar();
```
Quá trình thực thi:
1. `bar()` được đưa vào Call Stack.
2. `bar()` gọi `foo()`, `foo()` được đưa vào Call Stack.
3. `foo()` thực thi xong, bị pop khỏi Call Stack.
4. `bar()` thực thi xong, bị pop khỏi Call Stack.

---

### Web APIs
Các hàm như `setTimeout`, `fetch`, và event listeners không chạy trong Call Stack mà được đưa đến **Web APIs**.

```js
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
```
Output:
```
Start
End
Timeout
```

Dù `setTimeout` có thời gian 0ms, nó vẫn không chạy ngay lập tức mà được đưa vào Web APIs rồi Task Queue.

---

### Task Queue (Macro-task Queue)
Task Queue chứa các **macro-task** như:
- `setTimeout`
- `setInterval`
- `setImmediate` (Node.js)
- `I/O Callbacks`

Event Loop chỉ lấy **một task** từ Task Queue mỗi lần và đưa vào Call Stack nếu Call Stack trống.

---

### Microtask Queue (Priority Queue)
Microtask Queue có độ ưu tiên cao hơn Task Queue, chứa:
- **Promises (resolve, reject)**
- **MutationObserver**
- **queueMicrotask**

```js
console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");
```
Output:
```
Start
End
Promise
Timeout
```
Microtask (`Promise.resolve()`) luôn chạy trước Task (`setTimeout`).

---

## 3. Cách Event Loop vận hành

1. **Thực thi Call Stack** (synchronous code).
2. **Xử lý tất cả microtasks** (Promise, queueMicrotask, MutationObserver).
3. **Xử lý một task từ Task Queue** (setTimeout, I/O, events).
4. **Lặp lại quá trình trên**.

Event Loop tiếp tục chạy cho đến khi không còn code nào để xử lý.

---

## 4. Async/Await và Event Loop

`async/await` giúp code bất đồng bộ dễ đọc hơn nhưng vẫn tuân theo Event Loop.

```js
async function fetchData() {
  console.log("Start Fetch");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("End Fetch");
}

console.log("Before Fetch");
fetchData();
console.log("After Fetch");
```
Output:
```
Before Fetch
Start Fetch
After Fetch
End Fetch
```
Giải thích:
1. `fetchData()` gọi `console.log("Start Fetch")` → Call Stack.
2. `await` tạm dừng `fetchData()`, trả control lại Event Loop.
3. `console.log("After Fetch")` chạy.
4. Sau 1s, `console.log("End Fetch")` chạy.

---

## 5. Tổng kết

✅ **JavaScript là single-threaded nhưng có thể xử lý bất đồng bộ nhờ Event Loop.**  
✅ **Microtasks (Promises) luôn chạy trước Macro-tasks (setTimeout, I/O).**  
✅ **Async/Await giúp xử lý bất đồng bộ dễ đọc hơn nhưng không thay đổi cơ chế Event Loop.**  

Hiểu rõ Event Loop giúp bạn tối ưu hiệu suất ứng dụng JavaScript và tránh các lỗi liên quan đến bất đồng bộ! 🚀



## 1. What is the Event Loop?

JavaScript is a **single-threaded** language, meaning it has only one main thread to execute code. To handle **asynchronous tasks** without blocking the program, JavaScript uses the **Event Loop**.

The Event Loop is the mechanism that allows JavaScript to manage asynchronous tasks like **setTimeout**, **fetch**, **event listeners**, and **promises** by coordinating different queues.

---

## 2. Call Stack, Web APIs, Task Queue, and Microtask Queue

### Call Stack
The Call Stack is where JavaScript executes functions based on the **LIFO (Last In, First Out)** principle.

```js
function foo() {
  console.log("Foo");
}

function bar() {
  foo();
}

bar();
```
Execution flow:
1. `bar()` is pushed onto the Call Stack.
2. `bar()` calls `foo()`, so `foo()` is pushed onto the Call Stack.
3. Once `foo()` completes, it is popped off the Call Stack.
4. Once `bar()` completes, it is popped off the Call Stack.

---

### Web APIs
Functions like `setTimeout`, `fetch`, and event listeners don't run in the Call Stack; they are handed off to **Web APIs**.

```js
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
```
Output:
```
Start
End
Timeout
```

Even though `setTimeout` has a 0ms delay, it doesn’t run immediately but is handed off to the Web APIs and then the Task Queue.

---

### Task Queue (Macro-task Queue)
The Task Queue contains **macro-tasks** such as:
- `setTimeout`
- `setInterval`
- `setImmediate` (Node.js)
- I/O Callbacks

The Event Loop only processes **one task** from the Task Queue at a time and pushes it into the Call Stack if the Call Stack is empty.

---

### Microtask Queue (Priority Queue)
The Microtask Queue has higher priority than the Task Queue and contains:
- **Promises (resolve, reject)**
- **MutationObserver**
- **queueMicrotask**

```js
console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");
```
Output:
```
Start
End
Promise
Timeout
```
Microtasks (`Promise.resolve()`) always run before Tasks (`setTimeout`).

---

## 3. How the Event Loop Works

1. **Execute the Call Stack** (synchronous code).
2. **Process all microtasks** (Promise, queueMicrotask, MutationObserver).
3. **Process one task from the Task Queue** (setTimeout, I/O, events).
4. **Repeat the process**.

The Event Loop continues running until there is no more code to process.

---

## 4. Async/Await and the Event Loop

`async/await` makes asynchronous code more readable but still follows the Event Loop mechanism.

```js
async function fetchData() {
  console.log("Start Fetch");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("End Fetch");
}

console.log("Before Fetch");
fetchData();
console.log("After Fetch");
```
Output:
```
Before Fetch
Start Fetch
After Fetch
End Fetch
```
Explanation:
1. `fetchData()` calls `console.log("Start Fetch")` → Call Stack.
2. `await` pauses `fetchData()`, handing control back to the Event Loop.
3. `console.log("After Fetch")` runs.
4. After 1 second, `console.log("End Fetch")` runs.

---

## 5. Summary

✅ **JavaScript is single-threaded but can handle asynchronous tasks with the Event Loop.**  
✅ **Microtasks (Promises) always run before Macro-tasks (setTimeout, I/O).**  
✅ **Async/Await makes asynchronous code more readable but does not change the Event Loop mechanism.**

Understanding the Event Loop helps you optimize JavaScript application performance and avoid issues related to asynchronous code! 🚀

## 1. What is the Event Loop?

JavaScript is a **single-threaded** language, meaning it has only one main thread to execute code. To handle **asynchronous tasks** without blocking the program, JavaScript uses the **Event Loop**.

The Event Loop is the mechanism that allows JavaScript to manage asynchronous tasks like **setTimeout**, **fetch**, **event listeners**, and **promises** by coordinating different queues.

---

## 2. Call Stack, Web APIs, Task Queue, and Microtask Queue

### Call Stack
The Call Stack is where JavaScript executes functions based on the **LIFO (Last In, First Out)** principle.

```js
function foo() {
  console.log("Foo");
}

function bar() {
  foo();
}

bar();
```
Execution flow:
1. `bar()` is pushed onto the Call Stack.
2. `bar()` calls `foo()`, so `foo()` is pushed onto the Call Stack.
3. Once `foo()` completes, it is popped off the Call Stack.
4. Once `bar()` completes, it is popped off the Call Stack.

---

### Web APIs
Functions like `setTimeout`, `fetch`, and event listeners don't run in the Call Stack; they are handed off to **Web APIs**.

```js
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
```
Output:
```
Start
End
Timeout
```

Even though `setTimeout` has a 0ms delay, it doesn’t run immediately but is handed off to the Web APIs and then the Task Queue.

---

### Task Queue (Macro-task Queue)
The Task Queue contains **macro-tasks** such as:
- `setTimeout`
- `setInterval`
- `setImmediate` (Node.js)
- I/O Callbacks

The Event Loop only processes **one task** from the Task Queue at a time and pushes it into the Call Stack if the Call Stack is empty.

---

### Microtask Queue (Priority Queue)
The Microtask Queue has higher priority than the Task Queue and contains:
- **Promises (resolve, reject)**
- **MutationObserver**
- **queueMicrotask**

```js
console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");
```
Output:
```
Start
End
Promise
Timeout
```
Microtasks (`Promise.resolve()`) always run before Tasks (`setTimeout`).

---

## 3. How the Event Loop Works

1. **Execute the Call Stack** (synchronous code).
2. **Process all microtasks** (Promise, queueMicrotask, MutationObserver).
3. **Process one task from the Task Queue** (setTimeout, I/O, events).
4. **Repeat the process**.

The Event Loop continues running until there is no more code to process.

---

## 4. Async/Await and the Event Loop

`async/await` makes asynchronous code more readable but still follows the Event Loop mechanism.

```js
async function fetchData() {
  console.log("Start Fetch");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("End Fetch");
}

console.log("Before Fetch");
fetchData();
console.log("After Fetch");
```
Output:
```
Before Fetch
Start Fetch
After Fetch
End Fetch
```
Explanation:
1. `fetchData()` calls `console.log("Start Fetch")` → Call Stack.
2. `await` pauses `fetchData()`, handing control back to the Event Loop.
3. `console.log("After Fetch")` runs.
4. After 1 second, `console.log("End Fetch")` runs.

---

## 5. Summary

✅ **JavaScript is single-threaded but can handle asynchronous tasks with the Event Loop.**  
✅ **Microtasks (Promises) always run before Macro-tasks (setTimeout, I/O).**  
✅ **Async/Await makes asynchronous code more readable but does not change the Event Loop mechanism.**

Understanding the Event Loop helps you optimize JavaScript application performance and avoid issues related to asynchronous code! 🚀

## 1. Event Loop là gì?

JavaScript là một ngôn ngữ **đơn luồng (single-threaded)**, có nghĩa là nó chỉ có một luồng chính để thực thi code. Để xử lý tác vụ **bất đồng bộ (asynchronous)** mà không chặn chương trình, JavaScript sử dụng **Event Loop**.

Event Loop là cơ chế giúp JavaScript quản lý các tác vụ bất đồng bộ như **setTimeout**, **fetch**, **event listener**, và **promises** bằng cách điều phối các hàng đợi (queues) khác nhau.

---

## 2. Call Stack, Web APIs, Task Queue và Microtask Queue

### Call Stack (Ngăn xếp gọi hàm)
Call Stack là nơi JavaScript thực thi các hàm theo nguyên tắc **LIFO (Last In, First Out)**.

```js
function foo() {
  console.log("Foo");
}

function bar() {
  foo();
}

bar();
```
Quá trình thực thi:
1. `bar()` được đưa vào Call Stack.
2. `bar()` gọi `foo()`, `foo()` được đưa vào Call Stack.
3. `foo()` thực thi xong, bị pop khỏi Call Stack.
4. `bar()` thực thi xong, bị pop khỏi Call Stack.

---

### Web APIs
Các hàm như `setTimeout`, `fetch`, và event listeners không chạy trong Call Stack mà được đưa đến **Web APIs**.

```js
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
```
Output:
```
Start
End
Timeout
```

Dù `setTimeout` có thời gian 0ms, nó vẫn không chạy ngay lập tức mà được đưa vào Web APIs rồi Task Queue.

---

### Task Queue (Macro-task Queue)
Task Queue chứa các **macro-task** như:
- `setTimeout`
- `setInterval`
- `setImmediate` (Node.js)
- `I/O Callbacks`

Event Loop chỉ lấy **một task** từ Task Queue mỗi lần và đưa vào Call Stack nếu Call Stack trống.

---

### Microtask Queue (Priority Queue)
Microtask Queue có độ ưu tiên cao hơn Task Queue, chứa:
- **Promises (resolve, reject)**
- **MutationObserver**
- **queueMicrotask**

```js
console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");
```
Output:
```
Start
End
Promise
Timeout
```
Microtask (`Promise.resolve()`) luôn chạy trước Task (`setTimeout`).

---

## 3. Cách Event Loop vận hành

1. **Thực thi Call Stack** (synchronous code).
2. **Xử lý tất cả microtasks** (Promise, queueMicrotask, MutationObserver).
3. **Xử lý một task từ Task Queue** (setTimeout, I/O, events).
4. **Lặp lại quá trình trên**.

Event Loop tiếp tục chạy cho đến khi không còn code nào để xử lý.

---

## 4. Async/Await và Event Loop

`async/await` giúp code bất đồng bộ dễ đọc hơn nhưng vẫn tuân theo Event Loop.

```js
async function fetchData() {
  console.log("Start Fetch");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("End Fetch");
}

console.log("Before Fetch");
fetchData();
console.log("After Fetch");
```
Output:
```
Before Fetch
Start Fetch
After Fetch
End Fetch
```
Giải thích:
1. `fetchData()` gọi `console.log("Start Fetch")` → Call Stack.
2. `await` tạm dừng `fetchData()`, trả control lại Event Loop.
3. `console.log("After Fetch")` chạy.
4. Sau 1s, `console.log("End Fetch")` chạy.

---

## 5. Tổng kết

✅ **JavaScript là single-threaded nhưng có thể xử lý bất đồng bộ nhờ Event Loop.**  
✅ **Microtasks (Promises) luôn chạy trước Macro-tasks (setTimeout, I/O).**  
✅ **Async/Await giúp xử lý bất đồng bộ dễ đọc hơn nhưng không thay đổi cơ chế Event Loop.**  

Hiểu rõ Event Loop giúp bạn tối ưu hiệu suất ứng dụng JavaScript và tránh các lỗi liên quan đến bất đồng bộ! 🚀

Understand how the Event Loop works and how to handle asynchronous operations in JavaScript.

Tìm hiểu cách Event Loop hoạt động và cách xử lý bất đồng bộ trong JavaScript.

Deep Dive into Event Loop and Asynchronous Programming in JavaScript

Deep dive vào Event Loop và bất đồng bộ trong JavaScript


## Project Introduction:

[Vuong Khang Home](https://vuongkhanghome.com/) is a website dedicated to showcasing **home design and construction services**, including building, interior renovation, and providing comprehensive solutions for modern living spaces.

This project was developed to help potential customers easily access information about construction services, explore completed projects, and connect with professional consultants.

**Main objectives of the project:**

- Create a professional and visually appealing interface that reflects the high-quality services offered by Vương Khang Home.
- Improve website SEO and performance using **NuxtJS** for better search engine visibility and faster loading speeds.
- Enhance user experience with an intuitive and well-structured layout, making navigation seamless and efficient.

![Project 1 Interface](/projects/project1/vuongkhanghome.webp)

## Key Features:

- Fully responsive design that adapts to all screen sizes, from desktops to mobile devices.
- A well-structured service catalog covering: **design, construction, and interior renovation**.
- A portfolio showcasing completed projects, giving potential clients a clear view of previous work.
- An interactive contact form that allows users to request consultations effortlessly.
- Optimized images and caching techniques for a faster browsing experience.

## Technologies Used:

- **NuxtJS**: Enables server-side rendering for better SEO and performance, ensuring a smooth and dynamic user experience.
- **SCSS**: Provides a structured and scalable approach to styling, making it easier to maintain and expand the design.
- **Lazy Loading & Caching**: Improves site performance by loading images and resources only when needed.

## Achievements:

- Successfully delivered a stable and high-performance website with fast loading times.
- Improved SEO rankings, increasing online visibility and attracting more potential clients.
- A modern and professional website design that enhances brand credibility and user engagement.
- Enhanced mobile compatibility, ensuring an excellent experience across all devices.


A landing page showcasing the products and services of Vuong Khang Home, built with NuxtJS and SCSS to ensure high performance and a seamless user experience.

Một trang landing giới thiệu các sản phẩm và dịch vụ của Vương Khang Home, được xây dựng với NuxtJS và SCSS để đảm bảo hiệu suất cao và trải nghiệm người dùng mượt mà.

Vuong Khang Home


## About the Project:

[The Five](https://thefive.com.vn/) is the official website of a **leading architectural firm in Vietnam**, specializing in modern, luxurious, and sustainable building solutions. The site is designed to serve as a **digital portfolio**, highlighting The Five's expertise in designing and constructing high-end residential and commercial projects.  

With a focus on **aesthetics, functionality, and performance**, this project was developed to provide potential clients with a **seamless browsing experience** while exploring architectural concepts and completed projects.  

### Why This Project Was Built:

- **Brand Representation**: Establish a **strong online presence** that reflects the company's vision and architectural expertise.  
- **Engagement & Lead Generation**: Provide an intuitive way for visitors to explore projects and get in touch for consultations.  
- **Content Scalability**: Utilize **Strapi CMS** to enable easy updates without developer intervention.  
- **Performance & SEO Optimization**: Ensure high-speed loading, smooth navigation, and top-notch **search engine rankings**.  

![The Five Interface](/projects/project2/thefive.webp)

## Core Features:

- **Elegant, Minimalist UI** – A visually striking yet functional design that enhances user engagement.  
- **Comprehensive Project Portfolio** – Showcases high-resolution images, architectural insights, and project details.  
- **Interactive Project Filtering** – Users can filter and explore designs based on categories like residential, commercial, and sustainable projects.  
- **Seamless Mobile Experience** – Optimized for all devices to ensure an uninterrupted browsing experience.  
- **SEO & Performance Enhancements** – Implemented SSR (Server-Side Rendering) for faster page load speeds and better search rankings.  
- **Dynamic Content Management** – Powered by **Strapi**, allowing The Five’s team to update content effortlessly.  

## Tech Stack:

- **Next.js** – For server-side rendering and optimized performance.  
- **TypeScript** – Ensures type safety and better maintainability.  
- **SCSS** – Enables modular and reusable styles for a polished UI.  
- **Strapi** – A headless CMS for flexible and scalable content management.  

## Outcomes & Impact:

- **Increased Client Engagement** – The new website has improved visitor interaction, leading to **higher consultation requests**.  
- **Better SEO Rankings** – Optimized architecture and fast-loading pages have boosted organic reach.  
- **Enhanced Brand Identity** – The Five now has a **modern, professional, and credible online presence**.  
- **Scalable & Future-Proof** – The website is designed to support future expansions and content growth.  


A premium website for The Five, an architectural firm in Vietnam, showcasing innovative designs and high-end construction services. Built with Next.js, TypeScript, and Strapi for seamless performance and easy content management.

Một website cao cấp cho The Five, công ty kiến trúc tại Việt Nam, giới thiệu các thiết kế sáng tạo và dịch vụ xây dựng cao cấp. Được xây dựng với Next.js, TypeScript và Strapi để đảm bảo hiệu suất mượt mà và quản lý nội dung dễ dàng.

The Five


## About the Project

**VNB Node** is a landing page designed to **showcase and provide insights into various blockchain networks**. The goal of this project is to create an intuitive and visually appealing platform where users can explore different blockchain technologies, their use cases, and their impact on the decentralized ecosystem.  

This project was developed as an **informational hub** for blockchain enthusiasts, developers, and investors looking to learn about emerging networks such as:  
- **XAI** – AI-driven blockchain technology.  
- **Grass** – A decentralized data-sharing network.  
- **Q Blockchain** – A smart contract platform with advanced governance.  
- **Commune AI** – A decentralized AI computing platform.  
- **Kuzco** – A blockchain focused on scalability and efficiency.  
- **IO.NET** – High-performance decentralized cloud computing.  
- **EigenLayer** – A restaking protocol for Ethereum.  
- **Subspace** – A decentralized storage and consensus layer.  

![VNB Node Interface](/projects/project3/vnbnode.webp)

## Key Features

- **Dynamic Blockchain Listings** – Highlights various networks with descriptions and key data points.  
- **Live Updates & Integrations** – Potential for API connections to fetch real-time blockchain statistics.  
- **Clean & Modern UI** – Built with Next.js and SCSS for a smooth, responsive user experience.  
- **SEO-Optimized Content** – Designed to attract search traffic and provide valuable insights to users.  
- **Expandable & Modular Design** – Allows easy addition of new blockchain projects in the future.  

## Technologies Used

- **Next.js** – Provides fast performance and SEO benefits with SSR.  
- **TypeScript** – Ensures type safety and better maintainability.  
- **SCSS** – Enables clean and structured styling for a modern design.  

## Future Enhancements

- **Interactive Charts & Visualizations** – Display blockchain statistics with engaging data visualizations.  
- **Educational Content** – Articles and explanations about each network’s unique features.  
- **Community & Social Integration** – Links to official documentation, communities, and Twitter feeds of featured projects.  

## Project Impact

- Offers a **single platform** to explore multiple blockchain ecosystems.  
- Helps users stay updated with **new and emerging blockchain projects**.  
- Lays the foundation for potential integrations with **real-time data sources**.  


A landing page built to showcase various blockchain projects, providing insights into emerging networks like XAI, Grass, Q Blockchain, Commune AI, Kuzco, IO.NET, EigenLayer, and Subspace.

Một trang landing được xây dựng để giới thiệu các dự án blockchain, cung cấp cái nhìn sâu sắc về các mạng mới nổi như XAI, Grass, Q Blockchain, Commune AI, Kuzco, IO.NET, EigenLayer và Subspace.

VNB Node


## About the Project

[Arobid.com](https://arobid.com/) is a **B2B & B2C e-commerce platform** designed to facilitate transactions between businesses and consumers through an **efficient procurement and bidding system**.  

The platform supports **multi-language functionality**, allowing businesses to operate across different markets, making it easier for international buyers and suppliers to connect.  

### Key Objectives

- **Seamless B2B & B2C Experience** – Support both bulk procurement for businesses and direct sales for consumers.  
- **Multilingual Support** – Provide **language localization** to improve user experience for international markets.  
- **Advanced Bidding & RFQ System** – Empower businesses to **request and compare supplier quotations** easily.  
- **Scalable & High-Performance** – Built with **Next.js, TypeScript, and Tailwind CSS** for speed, responsiveness, and reliability.  

![Arobid.com Interface](/projects/project4/arobid.webp)

## Core Features

- **B2B Marketplace** – Connect businesses with verified suppliers for bulk purchases and long-term contracts.  
- **B2C Shopping** – Provide a smooth retail experience for consumers, similar to traditional e-commerce.  
- **Multilingual Support** – **Enable users to switch languages** for a localized experience.  
- **RFQ (Request for Quotation) System** – Buyers can request quotes and compare supplier offers.  
- **Bidding System** – Suppliers can **compete** for business deals, ensuring competitive pricing.  
- **Dynamic Pricing & Bulk Discounts** – Businesses can negotiate **custom pricing** based on volume.  
- **Supplier & Customer Dashboards** – Manage orders, track bids, and handle transactions in one place.  
- **Mobile-Responsive Design** – Ensures a seamless experience across **desktop and mobile**.  

## Tech Stack

- **Next.js** – Delivers **fast performance & SEO benefits** with SSR.  
- **TypeScript** – Enhances maintainability and type safety.  
- **Tailwind CSS** – Provides a clean, modern, and responsive UI.  
- **i18n (Internationalization)** – Allows seamless **language switching and localization**.  

## Future Enhancements

- **AI-Driven Product Recommendations** – Personalize the shopping experience based on user behavior.  
- **Logistics & Payment Integrations** – Connect with **shipping providers and payment gateways** for seamless order fulfillment.  
- **Supplier Verification & Ratings** – Build trust with **verified supplier profiles and customer feedback**.  

## Business Impact

- **Expanded Market Reach** – Supports **global trade with multilingual capabilities**.  
- **Increased Efficiency** – **Automates procurement** and improves the **negotiation process** for businesses.  
- **Cost Savings & Competitive Pricing** – The **bidding system ensures** buyers get the best deal possible.  



Arobid.com is a multilingual B2B & B2C e-commerce platform designed to connect businesses and consumers with an efficient procurement and bidding system.

Arobid.com là nền tảng thương mại điện tử đa ngôn ngữ B2B và B2C, được thiết kế để kết nối doanh nghiệp và người tiêu dùng với hệ thống đấu thầu và mua sắm hiệu quả.

Hey, I'm

Skills

Projects