Let's say you have this setup:

class HandleInertiaRequests {
  public function share ($request)
  {
    return array_merge(parent::share($request), [
      'user' => "I am a user",
    ]);
  }
}
 
class UsersController {
  public function show(User $user)
  {
    return inertia('users/show', [
      'user' => UserResource::make($user),
    ]);
  }
}

In your inertia view, what you'll receive is the values from the controller even in your page store.

<!-- users/show.svelte -->
<script>
    import { page } from '@inertiajs/svelte'
 
    export let user  // UsersController
 
    $page.props.user // UsersController
</script>

Why does this happen?

This happens because the way inertia works is it passes all of the shared data and the controller data in the same component.

Which it seems to prioritize the controller data over the shared data.

How to prevent this from happening

Personally, to avoid this from happening, I prefix any shared data with a $. Since javascript allows for it in variables in the first place, seems like a good compromise.

class HandleInertiaRequests {
  public function share ($request)
  {
    return array_merge(parent::share($request), [
      '$user' => "I am a user",
    ]);
  }
}

That way in your page, you can avoid conflicts.

<!-- users/show.svelte -->
<script>
    import { page } from '@inertiajs/svelte'
 
    export let user   // UsersController
 
    $page.props.$user // I am a user
</script>

A Svelte caveat

Inside Svelte components, Svelte compiles variables prefixed with a dollar as store objects. So destructuring these properties might not work... I haven't actually tried!

I assume this would break.

<!-- users/show.svelte -->
<script>
    import { page } from '@inertiajs/svelte'
 
    const { $user } = $page.prop
</script>

Use derived stores to centralize shared data

Now what I do to both avoid this issue and centralize all shared data is to make a store that derives the shared data.

In my store/app.js file.

import { page } from "@inertiajs/svelte"
import { derived } from 'svelte/store'
 
export const user = derived(page, ($page) => {
    return $page.props.$user
})

Then import the store from the page.

<!-- users/show.svelte -->
<script>
    import { user } from '$store/app'
 
    $user // I am a user
</script>