Hydration trong Next.js - cách tránh các lỗi thường gặp

Hydration trong Next.js là gì?

Hydration là quá trình Next.js sử dụng để kết nối mã JavaScript chạy trên client với HTML đã được render trước đó từ server. Quá trình này giúp React tiếp quản UI mà không cần render lại toàn bộ trang.

Tuy nhiên, nếu không được quản lý đúng cách, hydration có thể gây ra lỗi và ảnh hưởng đến hiệu suất.

1. Hydration Mismatch

Lỗi này xảy ra khi HTML render từ server khác với HTML mà React render trên client. Nguyên nhân phổ biến là sử dụng dữ liệu thay đổi theo thời gian như số ngẫu nhiên, ngày giờ hoặc các API không đồng bộ trong quá trình render trên server.

export default function Page() {
  return <p>{Math.random()}</p>;
}

Cách khắc phục:

• Tránh sử dụng dữ liệu thay đổi theo thời gian trong quá trình render trên server.
• Nếu cần dữ liệu động, hãy cập nhật sau khi component mount.

2. Truy cập vào các API của browser trên server

Server không có window, document, hoặc localStorage, vì vậy nếu code cố truy cập chúng trong quá trình render, sẽ xảy ra lỗi.

import { useState, useEffect } from "react";

export default function Page() {
  const [width, setWidth] = useState(0);
  
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  return <p>Width: {width}</p>;
}

Cách khắc phục:

• Chỉ truy cập API của browser sau khi component đã mount.
• Sử dụng các hooks như useEffect để xử lý logic liên quan đến browser.

3. Quên thêm 'use client' khi cần

Mặc định, các component trong thư mục app/ của Next.js 13+ là Server Components. Nếu một component cần dùng useState, useEffect, hoặc event listeners mà không có 'use client', nó sẽ gây lỗi.

'use client';
import { useState } from 'react';

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

Cách khắc phục:

• Thêm 'use client' vào đầu file nếu component cần trạng thái hoặc sự kiện người dùng.
• Phân biệt rõ ràng giữa Server Components và Client Components.

4. Quá nhiều Client Components làm mất lợi thế của Server Components

Một số dev đặt 'use client' lên toàn bộ ứng dụng, khiến Next.js mất đi lợi ích của Server Components, làm tăng kích thước JavaScript tải xuống.

Cách khắc phục:

• Chỉ sử dụng 'use client' khi thật sự cần.
• Giữ các thành phần tĩnh như layout, navigation dưới dạng Server Components.

5. Cách tránh lỗi Hydration

• Tránh dữ liệu thay đổi theo thời gian trong quá trình render trên server.
• Không sử dụng API của browser trong Server Components.
• Chỉ thêm 'use client' cho component cần interactivity.
• Kết hợp Server Components và Client Components hợp lý.