Level 25
In VueJs or ReactJS if you want to use like route('posts.index'); then you need Ziggy
Dec 18, 2024
8
Level 12
Is it necessary to include Ziggy with the HandleInertiaRequests?
Hello,
I'm new to SSR with InertiaJs. I installed Breeze scaffolding with Inertia supporting SSR.
I found below lines in HandleInertiaRequests.php
'ziggy' => fn() => [
...(new Ziggy)->toArray(),
'location' => $request->url(),
],
and below code within the ssr.js
global.route = (name, params, absolute) =>
route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
});
Could someone please explain what is the use of this code? Is it safe to remove it? Because each request includes all the routes we declared in the Laravel.
Thanks
Level 12
@codingwithrk Yes, I know it. But In the breeze scaffolding, they uses to pass the Ziggy array with every request props.
Level 50
Ziggy is a client-side helper library for routing. It lets you use Laravel's routes in the frontend with the route helper, e.g.:
route('login');
route('posts.edit', {post: post});
route().current();
// etc.
To do that, you obviously have to pass the route definitions to the frontend somehow. That's what you're seeing.
You don't have to use Ziggy, but it makes routing a lot easier. If you're concerned about exposing certain routes for whatever reason, you can modify config/ziggy.php to specify which routes are exposed.
Level 12
@JussiMannisto I am completely aware with the functionality of Ziggy. What my concern is that what is the requirement of passing Ziggy routes array with all props? Is it safe to remove those props from the file called HandleInertiaRequests.php?
Level 50
@DhPandya If you don't pass route definitions to the front end, how could Ziggy work?
Level 12
@JussiMannisto I'm already using the @routes directive on the view
Level 50
@DhPandya I see. I don't use Inertia with SSR and the setup looks different there. I checked one of my CSR projects and the routes aren't passed as props, only via @routes.
I'm not yet sure why SSR is different, but the props are clearly used for setting up global.route, so I wouldn't touch them.
Edit. I guess it's because the renderer runs in Node.
Level 12
@JussiMannisto Makes sense. This is what I found on the Github discussion of the Ziggy. But I guess this only implies for the Vue not for React. (Correct me if I'm wrong). I'll still prefer to use @routes directive. In my view passing too much props may slow down the overall performance of the app.
Please or to participate in this conversation.