Invocações

Essas regras capturam padrões que disparam invocações extras de funções serverless, aumentando sua conta na Vercel através de ciclos de computação adicionais.

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

Detecta padrões de useEffect + fetch em arquivos de página ou layout. Esse padrão transforma o que poderia ser uma única renderização no servidor em duas viagens de ida e volta: uma para renderizar a página e outra chamada de API do cliente.

Por que importa: Cada fetch no lado do cliente dispara uma invocação separada de função serverless. Buscar dados no lado do servidor em um Server Component elimina completamente a viagem de ida e volta da API.

"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

Detecta componentes <Link> sem prefetch={false}. Por padrão, o Next.js pré-carrega todos os links visíveis, o que pode disparar um grande número de invocações de funções serverless em páginas com muitos links.

Por que importa: Cada prefetch é uma requisição ao servidor. Em páginas com dezenas de links, isso cria uma rajada de invocações quando a página carrega. Desative o prefetch globalmente e adicione-o de volta apenas em links de navegação críticos.

<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>