Using { next: revalidate } in fetch isn't making the site dynamic

I have made this code:

import Image from 'next/image'
import type { User } from './types/User'
import styles from './styles.module.css'

export default async function Home() {
  const res = await fetch('', {
    next: { revalidate: 10 },
  const data: User[] = await res.json()
  return (
      <table className={styles.border}>
        <thead className={styles.border}>
          <tr className={styles.border}>
            <th className={styles.border}>id</th>
            <th className={styles.border}>name</th>
            <th className={styles.border}>username</th>
            <th className={styles.border}>email</th>
            <th className={styles.border}>phone</th>
        <tbody className={styles.border}>
          { => (
            <tr key={} className={styles.border}>
              <td className={styles.border}>{}</td>
              <td className={styles.border}>{}</td>
              <td className={styles.border}>{user.username}</td>
              <td className={styles.border}>{}</td>
              <td className={styles.border}>{}</td>

after building, it:

It’s indicating that the page “/” is static, and not dynamic.
but why? Isn’t that page dynamic? As the page will change its content after every 10 seconds. Because of next: { revalidate: 10 }, in the code above.

I’m still a beginner in Next.js.
Thanks for your help :bouquet: