Invokasi

Aturan-aturan ini menangkap pola yang memicu invokasi fungsi serverless tambahan, meningkatkan tagihan Vercel Anda melalui siklus komputasi tambahan.

nextjs-no-client-fetch-for-server-data

Mendeteksi pola useEffect + fetch di file halaman atau layout. Pola ini mengubah apa yang bisa menjadi satu render sisi server menjadi dua round-trip: satu untuk merender halaman dan panggilan API lain dari klien.

Mengapa ini penting: Setiap fetch sisi klien memicu invokasi fungsi serverless terpisah. Mengambil data di sisi server dalam Server Component menghilangkan round-trip API sepenuhnya.

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((res) => res.json())
      .then(setData);
  }, []);

  return <div>{data?.title}</div>;
}

export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

nextjs-link-prefetch-default

Mendeteksi komponen <Link> tanpa prefetch={false}. Secara default, Next.js melakukan prefetch setiap link yang terlihat, yang dapat memicu sejumlah besar invokasi fungsi serverless pada halaman dengan banyak link.

Mengapa ini penting: Setiap prefetch adalah permintaan ke server. Pada halaman dengan puluhan link, ini menciptakan lonjakan invokasi saat halaman dimuat. Nonaktifkan prefetch secara global dan aktifkan kembali hanya untuk link navigasi penting.

<Link href="/dashboard">Dashboard</Link>
<Link href="/settings">Settings</Link>
<Link href="/profile">Profile</Link>

<Link href="/dashboard" prefetch={false}>Dashboard</Link>
<Link href="/settings" prefetch={false}>Settings</Link>
<Link href="/profile" prefetch={true}>Profile</Link>