The difference between usePage().props and the props you get from defineProps() in a component is that usePage props are for the root level of the page, and defineProps is for the level of the current component, right?
#usePage().props and defineProps props
novel lagoon
dark flare
The usePage() hook is something Inertia provides, to get props anywhere in Vue. This is especially helpful for a Layout and shared data. For example you have a layout that shows the user's name in the top right, you'd share the user's name globally in the Inertia middleware, then in the layout you can grab that data with the usePage() hook.
defineProps() is a Vue thing, it specifies the props a component takes. So if you have <Article> component, you'd define the title as a prop, and then pass it with <Article title="My Article">. For Inertia this is also leveraged, as page components receive the page props, so Inertia kinda renders your page like <ArticlePage :article="data">, you'd then define article as a prop in that page component so you can use it.
In conclusion; pretty much always use defineProps() in pages, pass along data to sub-components "the vue way". You'd actually rarely use usePage(), I'd recommend to only use it for shared data (so you know that data exists) and within global components, such as layouts.