2. page tsx

page.tsx
import Featured from '@/components/Featured'
import BlogListWithPagination from '@/components/BlogList'
import Providers from './utils/Providers';
import HydratedPosts from '@/components/HydratedBlogList';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

export interface Props {
  data: PropsDatum[];
  meta: Meta;
  slug: string;
}

export interface PropsDatum {
  id: number;
  attributes: PurpleAttributes;
}

export interface PurpleAttributes {
  title: string;
  slug: string;
  content: string;
  featured: boolean;
  createdAt: string;
  updatedAt: string;
  altthumbnail: string;
  descriptions: null | string;
  thumbnail: Thumbnail;
}

export interface Thumbnail {
  data: ThumbnailDatum[];
}

export interface ThumbnailDatum {
  id: number;
  attributes: FluffyAttributes;
}

export interface FluffyAttributes {
  name: string;
  alternativeText: null | string;
  caption: null;
  width: number;
  height: number;
  formats: Formats;
  hash: string;
  ext: string;
  mime: string;
  size: number;
  url: string;
  previewUrl: null;
  provider: string;
  provider_metadata: null;
  createdAt: string;
  updatedAt: string;
}

export interface Formats {
  thumbnail: Small;
  small: Small;
}

export interface Small {
  name: string;
  hash: string;
  ext: string;
  mime: string;
  path: null;
  width: number;
  height: number;
  size: number;
  url: string;
}

export interface Meta {
  pagination: Pagination;
}

export interface Pagination {
  page: number;
  pageSize: number;
  pageCount: number;
  total: number;
}

const page = async ({ data, meta }: Props) => {
  return (
    <div className='flex flex-col w-auto mx-0 mt-5 space-y-5'>
      <Providers>
      </Providers>
    </div>
  )
};

export default page;

3. providers

'use client';

import BlogListWithPagination from '@/components/BlogList'
import Featured from '@/components/Featured'
import HydratedPosts from '@/components/HydratedBlogList';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import React from 'react'


// interfaces

const Providers = async ({ data,meta }) => {
    const [queryClient] = React.useState(() => new QueryClient())

    return (
        <QueryClientProvider client={queryClient}>
            <Featured data={data} meta={meta}></Featured>
            <HydratedBlogList></HydratedBlogList>
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    )
}

export default Providers

4. hydratedbloglist

import { dehydrate } from '@tanstack/react-query';
import getQueryClient from '@/app/utils/getQueryClient';
import BlogListWithPagination from './BlogList';
import ReactQueryHydrate from '@/app/utils/HydrateClient';
import { dataPagination } from '@/app/api/fetch';

const HydratedBlogList = async () => {
    const queryClient = getQueryClient()

    await queryClient.prefetchQuery({
        queryKey: ['projects', 1],
        queryFn: () => dataPagination,
    })

    const dehydratedState = dehydrate(queryClient);

    return (
        <ReactQueryHydrate>
            <BlogListWithPagination />
        </ReactQueryHydrate>
    );
};
export default HydratedBlogList;