Cho tôi một ví dụ sử dụng axios-hooks SSR xem ví dụ ở trên vì đã làm rồi (ok)

Dưới đây là một ví dụ sử dụng axios-hooks với Server-Side Rendering (SSR) trong Next.js.

Cài đặt axios-hooks:

bashCopyEditnpm install axios axios-hooks

Cấu trúc ví dụ:

• pages/index.tsx: Trang chính sử dụng SSR để fetch dữ liệu.

• utils/axiosInstance.ts: Cấu hình axios instance.

---

1. Tạo một instance của Axios

Tạo file utils/axiosInstance.ts để tái sử dụng cấu hình Axios.

tsCopyEditimport axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
});

export default axiosInstance;

---

2. Sử dụng axios-hooks với SSR trong Next.js

Tạo file pages/index.tsx và sử dụng useAxios để fetch dữ liệu từ API.

tsxCopyEditimport { GetServerSideProps } from "next";
import axiosInstance from "../utils/axiosInstance";
import useAxios from "axios-hooks";

interface Post {
  id: number;
  title: string;
  body: string;
}

interface Props {
  initialData: Post[];
}

export default function Home({ initialData }: Props) {
  // Sử dụng axios-hooks với dữ liệu đã fetch từ SSR
  const [{ data, loading, error }] = useAxios<Post[]>("/posts", {
    manual: false,
    useCache: false,
    initialData,
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading posts</p>;

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Fetch dữ liệu từ server trước khi render trang
export const getServerSideProps: GetServerSideProps = async () => {
  const { data } = await axiosInstance.get<Post[]>("/posts");

  return {
    props: { initialData: data },
  };
};

---

3. Giải thích:

1. SSR với getServerSideProps:

   • Fetch dữ liệu từ API và truyền vào props (initialData).

   • Dữ liệu này được Next.js gửi xuống client ngay khi tải trang.

2. Sử dụng axios-hooks với initialData:

   • useAxios sử dụng initialData từ SSR giúp trang hiển thị nhanh hơn.

   • manual: false, useCache: false đảm bảo không fetch lại nếu không cần thiết.

---

4. Kết quả:

• Trang sẽ tải danh sách bài viết từ API trước khi render.

• Trên client, axios-hooks sử dụng dữ liệu đã có mà không cần fetch lại.

Bạn có muốn mở rộng ví dụ này, chẳng hạn như thêm pagination hoặc caching không? 🚀