Kiểm tra nội dung trong framework NextJS

Trong các bài học trước, chúng ta đã thử tạo hai loại component - component phía máy chủ và component phía máy khách. Hãy đảm bảo rằng, vấn đề về SEO đã được giải quyết trong các component phía máy chủ. Tức là chúng ta cần kiểm tra xem trình duyệt có nhận được HTML đã render sẵn với văn bản của component của chúng ta hay không. Hãy thực hiện điều đó.

Giả sử component phía máy chủ của chúng ta có dạng như sau:

export default function Test() {
	let name = 'user';
	return <h1>hello, {name}!</h1>;
}

Hãy mở trang có component này trong trình duyệt. Sau đó nhấn Ctrl + U. Đây là tổ hợp phím sẽ mở mã HTML nguồn của trang. Đây là mã được gửi từ máy chủ. Tức là trước khi mã JavaScript của trình duyệt được áp dụng lên nó. Đây chính là cách mà các công cụ tìm kiếm nhìn thấy trang của chúng ta. Vậy, hãy mở mã nguồn và nghiên cứu nó. Bạn sẽ tìm thấy văn bản của component chúng ta ở đó.

Bây giờ, hãy tạo một component phía máy khách để làm ví dụ:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

Một lần nữa, hãy nhấn Ctrl + U và nghiên cứu mã nguồn. Bạn sẽ không tìm thấy văn bản của component chúng ta, bởi vì văn bản của nó được tạo ra một cách động trong trình duyệt.

Đây chính là điểm khác biệt cơ bản giữa component phía máy chủ và component phía máy khách.

Hãy thực hiện các thao tác được mô tả trong bài học.

Hãy giải thích sự khác biệt giữa component phía máy chủ và component phía máy khách dưới góc nhìn của SEO.

Ngoài SEO, component phía máy khách và component phía máy chủ còn có những điểm khác biệt nào khác?