My code on the dev server
function Home(props) {
console.log("Hello")
return (
<ul>
{props.user.map((user) => (
<li key={user.id}>{user.email}</li>
))}
</ul>
)
}
export default Home
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await res.json()
return {
props: {
user: data,
},
revalidate: 10,
}
}
Then I run npm run build and start the real server with npm run start
Now if I change my JSX from
<li key={user.id}>{user.email}</li>
to
<li key={user.id}>{user.username}</li>
And wait some time, then the page still looks like before, nothing has changed -> It still shows user.email and not user.username
You have to reload you page to see your changes , Because Next js caches HTML on the server and won't show the fresh data to the user as soon as it updates .