13 replies

Questions on prefetching in NextJS

I have this productPage in my products/[id]/page.tsx file

import { getProduct } from "../../../utils";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <main style={{ padding: 24 }}>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </main>
  );
}

import { getProduct } from "../../../utils";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <main style={{ padding: 24 }}>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </main>
  );
}

and this util function

export async function getProduct(id: string) {
  // Simulate real server work: DB query, pricing engine, etc.
  await new Promise((r) => setTimeout(r, 2000));
  return {
    id,
    name: `Product ${id}`,
    price: (Number(id) * 7.99).toFixed(2),
    description: `Details of Product ${id}`,
  };
}

export async function getProduct(id: string) {
  // Simulate real server work: DB query, pricing engine, etc.
  await new Promise((r) => setTimeout(r, 2000));
  return {
    id,
    name: `Product ${id}`,
    price: (Number(id) * 7.99).toFixed(2),
    description: `Details of Product ${id}`,
  };
}

I have a Next Link which redirects to this product detail page.

I'm doing my tests on the production build. When the link appears in my viewport, I can see in the network tab of my browser that it has prefetched the product page.

However, when I click on it, there is still a delay of 2 seconds before the page gets displayed. Why is that ?

I fail to understand what prefetching actually does & what are the real uses-cases of prefetching which can be clearly visible ?

TTC

Theo's Typesafe Cult•6mo ago•

13 replies

Night765

Questions on prefetching in NextJS

I have this productPage in my products/[id]/page.tsx file

import { getProduct } from "../../../utils";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <main style={{ padding: 24 }}>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </main>
  );
}

import { getProduct } from "../../../utils";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <main style={{ padding: 24 }}>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </main>
  );
}

and this util function

export async function getProduct(id: string) {
  // Simulate real server work: DB query, pricing engine, etc.
  await new Promise((r) => setTimeout(r, 2000));
  return {
    id,
    name: `Product ${id}`,
    price: (Number(id) * 7.99).toFixed(2),
    description: `Details of Product ${id}`,
  };
}

export async function getProduct(id: string) {
  // Simulate real server work: DB query, pricing engine, etc.
  await new Promise((r) => setTimeout(r, 2000));
  return {
    id,
    name: `Product ${id}`,
    price: (Number(id) * 7.99).toFixed(2),
    description: `Details of Product ${id}`,
  };
}

Questions on prefetching in NextJS

Similar Threads

Questions on prefetching in NextJS

Similar Threads

Similar Threads

Similar Threads