Next.js在组件未挂载在屏幕上时发出请求

lf5gs5x2  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(140)

我得到了以下代码:
路线:

在我的app/page.tsx- Home组件上,我正在执行:

const HomePage = async () => {
  const games = await getGames();

  return (
    <div className='container mx-auto px-4 py-8 flex flex-wrap relative z-0'>
      {games.results.map((game: any) => (
        <Link href={`details/${game.id}`} key={game.id}>
          <div className='w-1/2 sm:w-1/2 md:w-1/3 lg:w-1/5 flex flex-col items-center mb-6'>
            <div className='w-48 h-64 relative'>
              <Image
                src={game.background_image}
                alt={game.name}
                width={200}
                height={300}
              />
              <h2 className='text-center mt-2'>{game.name}</h2>
            </div>
          </div>
        </Link>
      ))}
    </div>
  );
};

export default HomePage;

然后我有这个页面app/details/id/page.tsx

import Image from 'next/image';

import { getGameDetails } from '@/services';

const GameDetails = async ({ params }: any) => {
  const game = await getGameDetails(params.id);

  return (
    <div className='container mx-auto px-4 py-8'>
      <h1 className='text-3xl font-bold mb-4'>{game.name}</h1>
      <div className='flex flex-col md:flex-row'>
        <div className='md:w-1/3'>
          <div className='w-full h-96 relative'>
            <Image
              src={game.background_image}
              alt={game.name}
              fill
              className='cover'
            />
          </div>
        </div>
        <div className='md:w-2/3 md:pl-8'>
          <p className='mb-4'>{game.description}</p>
          <div className='flex flex-wrap items-center mb-4'>
            <p className='mr-2'>Metacritic Score:</p>
            {game.metacritic_platforms.map(
              (platform: {
                url: string;
                platform: { name: string; url: string };
                metascore: string;
              }) => (
                <a
                  key={platform.platform.url}
                  href={platform.url}
                  target='_blank'
                  rel='noopener noreferrer'
                  className='px-2 py-1 bg-gray-200 text-gray-800 rounded-full mr-2'
                >
                  {platform.platform.name}: {platform.metascore}
                </a>
              )
            )}
          </div>
          <p className='mb-4'>
            Released: {new Date(game.released).toLocaleDateString()}
          </p>
          <p className='mb-4'>Rating: {game.rating}/5</p>
          <p className='mb-4'>Genres:</p>
          <div className='flex flex-wrap mb-4'>
            {game.genres.map((genre: any) => (
              <span
                key={genre.id}
                className='px-2 py-1 bg-gray-200 text-gray-800 rounded-full mr-2 mb-2'
              >
                {genre.name}
              </span>
            ))}
          </div>
          <a
            href={game.website}
            target='_blank'
            rel='noopener noreferrer'
            className='inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600'
          >
            Visit Website
          </a>
        </div>
      </div>
    </div>
  );
};

export default GameDetails;

现在的问题是,当我在app/page.tsx上时,对getGameDetails的请求也会被执行。
我使用的是Next.js版本13.4.4

moiiocjp

moiiocjp1#

这是由于next/linkprefetch属性,默认值设置为true以改善客户端导航,正如他们所说:
true时,next/link将在后台预取页面(由href表示)。这对于提高客户端导航的性能非常有用。视口中的任何<Link />(初始或通过滚动)将被预加载。
如果你不想要这个功能(通常没有理由),你可以禁用它,这样做:

// app/page.tsx

import Link from 'next/link';
 
export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </Link>
  );
}

相关问题