so, you can fetch data from external source very simple:
export const getStaticProps = async () => {
const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
const users = await res.json();
return {
props: { users }
}
}
export default function Home({ users }) {
return <div>{users.map(({id, name}) => <div key={id}>{name}</div>)}</div>
}
The difference here - is that now you have no 'loading' time when page is empty.That is because data loading happens on the server side