Laravel API client: should I fetch API data in Blade with JavaScript or through a controller?

In my opinion, moving the API communication into a separate controller is a much cleaner Laravel approach than keeping most of the logic directly inside Blade files with JavaScript.

Your current JavaScript solution is completely fine for learning purposes or for very small dynamic features, but as the project grows, Blade files can become difficult to read and maintain when they contain a lot of fetch logic, filtering, rendering and request handling.

Using a dedicated PageController keeps responsibilities separated more clearly:

• the controller handles API communication and data preparation,

• the Blade views focus mostly on displaying data,

• and the routes remain easier to understand.

It also makes debugging and future modifications simpler because the business logic stays in PHP instead of being spread across multiple scripts inside views.

I think your PageController approach already looks much closer to a typical Laravel structure.

One thing I would also be curious about is how much you would normally modify the Blade files and the web.php routes in a real Laravel application when switching from the JavaScript fetch() approach to the controller-based solution.

Would you usually try to keep the views very minimal and move almost everything into controllers/services, or is it still common to leave some smaller JavaScript functionality directly inside Blade templates?

After refactoring the project, the Blade files became much smaller and cleaner, and most of the logic moved into the controller.

I also had to modify the web routes to use controller methods instead of relying mostly on JavaScript actions.

I would be interested to know whether this direction is considered closer to standard Laravel practice, or if I may be overcomplicating a relatively small project.

I am mainly trying to learn how Laravel applications are usually structured in real-world projects regarding:

• controllers,

• Blade responsibilities,

• API communication,

• and frontend JavaScript usage.

list and search blade after PageController:
Search.blade:

@extends('layouts.app')
@section('content')

    
Keresés
    @if(session('success'))
        

            {{ session('success') }}
        
    @endif
        Keresés
    @if(count($invoices) == 0 && $query != '')
        
Nincs találat.
    @endif
    @foreach($invoices as $inv)
        

            
{{ $inv['number'] }}
            

                @forelse($inv['details'] as $d)
                    
{{ $d['productname'] }} ({{ $d['quantity'] }} db)

                @empty
                    
Nincsenek tételek
                @endforelse
            
                @csrf
                @method('DELETE')
                    Törlés
        

    @endforeach

@endsection

@extends('layouts.app')
@section('content')
    
Számlatételek
    
        
        
            @forelse($details as $item)
                
            @empty
                
            @endforelse
        
    

            

                
Számla
                
Termék
                
Egységár
                
Mennyiség
                
Összesen
            
        

                    
{{ $item['invoice']['number'] ?? '-' }}
                    
{{ $item['productname'] ?? '-' }}
                    
{{ $item['unitprice'] ?? '-' }}
                    
{{ $item['quantity'] ?? '-' }}
                    
{{ $item['linetotal'] ?? '-' }}
                

                    
Nincs megjeleníthető tétel.
                
@endsection