Server Function being called multiple times

import { createServerFn } from '@tanstack/react-start';
import { staticFunctionMiddleware } from '@tanstack/start-static-server-functions';
import { count } from 'drizzle-orm';
import { database } from '~/database';
import { Characters, Users } from '~/database/entities';

export const fetchStatisticsFn = createServerFn({ method: 'GET' })
  .middleware([staticFunctionMiddleware])
  .handler(async () => {
    await new Promise((resolve) => setTimeout(resolve, 3000));

    const [usersRes, charsRes] = await Promise.all([
      database.select({ count: count() }).from(Users),
      database.select({ count: count() }).from(Characters),
    ]);

    const totalUsers = usersRes[0].count;
    const totalCharacters = charsRes[0].count;

    return {
      stats: {
        totalUsers,
        totalCharacters,
        totalMasterpieces: 50, // Fixed
      },
    };
  });

import { Link } from '@tanstack/react-router';
import { Button } from '~/components/ui/button';
import { fetchStatisticsFn } from '~/features/public/data/statistics.fn';

export async function LandingPage() {
  const { stats } = await fetchStatisticsFn();

  return (
    <div>
      <h1>Landing Page</h1>
      <div>
        <p>Stats:</p>
        <ul>
          <li>Curators: {stats.totalUsers}</li>
          <li>Heralds: {stats.totalCharacters}</li>
          <li>Masterpieces: {stats.totalMasterpieces}</li>
        </ul>
      </div>
      <div className="flex gap-2">
        <Button asChild>
          <Link to="/auth/login">Login</Link>
        </Button>
        <Button asChild>
          <Link to="/auth/register">Register</Link>
        </Button>
      </div>
    </div>
  );
}