Các loại component trong NextJS

Các loại component trong NextJS gồm có hai: Server component và Client component. Sử dụng loại nào cần căn cứ theo tính năng từng loại.

Server Component trong NextJS

Trong NextJS, Server Component là các component được render trên server, gửi kết quả về cho client. Một số đặc điểm của Server Component:

  • Không cần chạy JavaScript trên trình duyệt.
  • Tương tác trực tiếp với cơ sở dữ liệu, API, tệp hệ thống mà không cần API riêng.
  • Không có trạng thái (state) hay hiệu ứng (useEffect) như Client Component.

Muốn tạo component dạng server thì thêm lệnh “use server” ở đầu file (hoặc khổi khai báo cũng được, vì use server là mặc định). Ví dụ sau là một Server Component (component chạy trên server)

// app/page.tsx 
"use server";
export default async function Home() {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then( res => res.json());
  console.log(data) ; //show trong log nơi chạy NextJS
  return <h1>{data.title}</h1>; // Chỉ gửi HTML về client
}

Chú ý: server compomemt có hỡ trợ async, nếu bạn muốn thì dùng, còn client component không hỗ trợ async

Client Component trong NextJS

So với Server Component thì Client Component đối lập lại. Client Component trong NextJS là các component chạy trên trình duyệt và có thể sử dụng các hook rất phổ biến trong React như useState, useEffect.

Bạn sẽ tạo component ở dạng client khi cần tạo giao diện UI động như các form nhập liệu, nút bấm, animation. Hoặc khi cần dùng state , xử lý sự kiện (event handlers) , dùng useEffect. Và lưu ý là client component không hỗ trợ async . Vì thế đừng khai báo async trong định nghĩa component nhé.

Sau đây là một ví dụ về Client Component. Mời xem ví dụ 1:

// app/page.tsx 
"use client"; // Khai báo đây là Client Component
import { useState } from "react";
export default function Counter() {
  const [count, setCount] = useState(0);
  console.log("Client Component")
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
)}

Ví dụ 2:

// app/page.tsx 
"use client"; // Khai báo đây là Client Component
import { useEffect, useState } from "react";
export default function Home() {
  const [post, setPost] = useState({title:''});
  console.log("Cient component") ; 
  useEffect( () => { 
    fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((res) => res.json())
    .then ( post => setPost(post))
  },[])
  return <h1>{post.title}</h1>; 
}

VÍ dụ 3: dùng thư viện swr  (npm install swr)

// app/page.tsx 
"use client";
import useSWR from 'swr';
export default function Home() {
  const url = 'https://jsonplaceholder.typicode.com/posts/1' ;
  const fetcher = (args:any) => fetch(args).then( res => res.json())
  const { data, error } = useSWR(url, fetcher)
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
  return (
  <div>
    <h1>{data.title}</h1>
    <p>{data.body}</p>
  </div>
)}

Khi nào dùng Server Component hoặc Client Component?

LoạiDùng khi
Server Component– Không cần trạng thái hay sự kiện trên client
– Fetch dữ liệu trên server mà không cần API riêng
Client Component– Có state (useState), hiệu ứng (useEffect)
– Tương tác với người dùng: form, animation
– Xử lý logic chỉ có trên client (WebSocket, localStorage)

Kết hợp cả hai

Có thể kết hợp Server Component và Client Component cũng được. Ví dụ: Một trang blog tải dữ liệu trên server (Server Component) nhưng có phần like bài viết chạy trên client (Client Component).

// app/page.tsx 
"use server";
import LikeButton from "./LikeButton"; //client component
export default async function BlogPost() {
  let url="https://jsonplaceholder.typicode.com/posts/1"
  const post = await  fetch(url).then( res => res.json());
  return (
  <div>
    <h1>{post.title}</h1>
    <p>{post.body}</p>
    <LikeButton /> {/* Chạy trên client */}
  </div>
)}

—

// app/LikeButton.tsx
"use client";
import { useState } from "react";
export default function LikeButton() {
  const [like, setLike] = useState(0);
  return (
  <button onClick={() => setLike(like + 1)}>
    ❤️ {like} Likes
  </button>
)}

Các loại component trong NextJS là cực kỳ hay , nhờ có hai loại này, bạn chỉ cần tạo 1 project Next và các component, chức năng nào muốn chỉ định chạy trên server, chức năng nào muốn chạy ở client thì cứ tạo component tưng ứng. Thật tuyệt vời đó nha. Những kỹ thuật web khác thường thì hoặc chỉ chạy trên server (như Node, PHP…) , hoặc chỉ chạy ở client ( Javascript, Jquery…) Còn Next thì chơi cả hai luôn.

Cần xem thêm, mời xem ở link này nhe:

BÀI VIẾT LIÊN QUANXEM THÊM