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('https://jsonplaceholder.typicode.com/users', {
next: { revalidate: 10 },
})
const data: User[] = await res.json()
return (
<div>
<h1>Users</h1>
<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>
</tr>
</thead>
<tbody className={styles.border}>
{data.map((user) => (
<tr key={user.id} className={styles.border}>
<td className={styles.border}>{user.id}</td>
<td className={styles.border}>{user.name}</td>
<td className={styles.border}>{user.username}</td>
<td className={styles.border}>{user.email}</td>
<td className={styles.border}>{user.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
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