import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
import { getNFTs } from '@/lib/apis/nft';
import NewNFT from '@/components/nft/organisms/NewNFT';
import getQueryClient from '@/lib/getQueryClient';

const NewNFTServerComponent = async () => {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey: getNFTs({ ordering: '-created', page_size: '4' }).queryKey,
    queryFn: getNFTs({ ordering: '-created', page_size: '4' }).fetch,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <NewNFT />
    </HydrationBoundary>
  );
};

export default NewNFTServerComponent;

import { QueryClient } from '@tanstack/react-query';
import { cache } from 'react';

const getQueryClient = cache(() => {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  });
});

export default getQueryClient;

import MainTemplate from '@/components/nft/templates/MainTemplate';
import React from 'react';

interface Props {
  topNFT: React.ReactNode;
  likeNFT: React.ReactNode;
  newNFT: React.ReactNode;
  issue: React.ReactNode;
  articleBar: React.ReactNode;
}

const Layout = async ({
  topNFT,
  likeNFT,
  newNFT,
  issue,
  articleBar,
}: Props) => {
  return (
    <MainTemplate
      topNFT={topNFT}
      likeNFT={likeNFT}
      newNFT={newNFT}
      issue={issue}
      articleBar={articleBar}
    />
  );
};

export default Layout;

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:10 PST 2023; root:xnu-10002.61.3~2/RELEASE_X86_64
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: 4.0.2
  pnpm: N/A
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: standalone