Tìm nạp dữ liệu bằng SWR trong NextJS 13. SWR (Stale-While-Revalidate) là một thư viện quản lý trạng thái dữ liệu phía client trong ứng dụng, các ứng dụng hay sử dụng, chẳng hạn như trong React vậy. Nói đến SWR thì ta cũng kể đến với cái tên hay thường sử dụng đó là RTX Query

RTK Query : Truy vấn RTK là một công cụ tìm nạp và lưu trữ dữ liệu mạnh mẽ. Nó được thiết kế để đơn giản hóa các trường hợp phổ biến để tải dữ liệu trong ứng dụng web, loại bỏ nhu cầu tự mình viết logic tìm nạp dữ liệu và bộ nhớ đệm.

Các bạn rãnh thì tìm hiểu thêm nhé, RTK Query rất hay

Okay giờ mình làm một ví dụ đơn giản thôi

# Install SWR in Project NextJS 

Ở đây là mình đã có project NextJS rồi nhé, nên mình cài đặt thêm swr. Bạn nào chưa tạo project thì xem bài viết này nhé : Create A Project With Next.Js

npm i swr

# Create folder Api in Project

+ app/api/categories/route.tsx : mình tạo file route.tsx mình dùng typescript nhé, tuỳ vào mọi người thích nào thì dùng đó

import { NextResponse } from 'next/server'

export async function GET() {
  const res = await fetch(process.env.PATH_URL_BACKEND+'/api/categories', {
    headers: {
      'Content-Type': 'application/json',
    },
  })
  const result = await res.json()
  return NextResponse.json({ result })
}
 

Đoạn code trên cũng đơn giản thôi, mình chỉ việc fetch api đến server backend để lấy dữ liệu thôi

process.env.PATH_URL_BACKEND : là đường dẫn domain của server backend : VD: http://127.0.0.1:8000 ,....hay domain nào đó

+ Mở file next.config.js lên cấu hình các biến trong env

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        PATH_URL_BACKEND:"http://127.0.0.1:8000"
      },
    output: 'export',
}
module.exports = nextConfig

# Import SWR in Component

Giờ bạn tạo cho mình một component nào cũng được, vì công việc này chỉ cần thư viện SWR vào dùng thôi

+ app/category/page.tsx : 

'use client'
import Link from "next/link";
import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then((res) => res.json());
export default function Menu() {
  const { data, error, isLoading } = useSWR<any>(
    `/api/categories`,
    fetcher
  );

  if (error) return <div>Failed to load</div>;
  if (isLoading) return <div>Loading...</div>;
  if (!data) return null;
  return (
    <>
     <ul className="w-full bg-gray-400 flex flex-wrap">
                  {
                                  data &&  data.result.multiple?.length>0 && data.result.multiple.map(({slug,name,parent_id,id,children_categories} : any)=>{
                                        return (
                                            <li key = {id} className='px-2 py-1'>
                                                <Link href={`/category/`+slug}  className='text-black group-hover:text-[#bf1650]'>+ {name}</Link>
                                                <ul className="w-full pl-4">
                                                {
                                                children_categories?.length>0 && children_categories.map((item  : any)=>{
                                                        return <li key = {item.id} className=''><Link href={`/category/`+item.slug} className='text-red-500'>- {item.name}</Link></li>
                                                }) 
                                                
                                                }
                                                </ul>
                                            </li>
                                        )
                                    })
                                }
                  </ul>
    </>
  );
}

Đoạn code trên mình có một số cần làm như sau:

+ Import swr trong component

import useSWR from "swr";

+ Tìm nạp dữ liệu thông qua fetch, thông thường thì ta cũng cần tìm nạp trước

const fetcher = (url: string) => fetch(url).then((res) => res.json());

+ Gọi swr trong function component

const { data, error, isLoading } = useSWR<any>(
    `/api/categories`,
    fetcher
  );

Nói đến useSWR : thì ta nhìn bên trên nó có hai tham số bắt buộc phải có

userSWR(key,function, options) :

Các bạn tìm hiểu thêm tại đây nhé: https://swr.vercel.app/docs/api