Implémentation du défilement infini avec Laravel, Inertia.js v et Vue 3

Dans ce guide complet, nous explorerons comment implémenter le défilement infini dans une application Laravel à l'aide d'Inertia.js v2.0 et Vue 3. Nous couvrirons à la fois le frontend et le backend mise en œuvre, avec une attention particulière à la gestion des actualisations de page complète et au maintien de la position de défilement.

Table des matières

• Comprendre les composants
• Implémentation du frontend
• Implémentation back-end
• Exemple concret : articles de blog avec catégories
• Meilleures pratiques et considérations

Comprendre les composants

L'implémentation du défilement infini repose sur trois composants principaux :

1. Composant WhenVisible d'Inertia.js v2.0 : ce composant gère la logique de l'observateur d'intersection pour détecter quand nous devons charger plus de contenu.
2. Pagination de Laravel : gère la logique de pagination côté serveur.
3. API de composition de Vue 3 : gère l'état et la réactivité de notre frontend.

Implémentation frontale

Commençons par un composant Vue qui implémente le défilement infini pour la liste d'articles de blog :

<script setup>
import { computed } from 'vue'
import { usePage, WhenVisible } from '@inertiajs/vue3'
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import BlogPostCard from '@/components/BlogPostCard.vue'

const page = usePage()

const hasFeaturePost = computed(() => !!page.props.featuredPost)
const categoryName = computed(() => page.props.category?.name)
</script>

<template>
    <div>



<h3>
  
  
  Key Frontend Features
</h3>

<ol>
<li><p><strong>WhenVisible Component</strong>: This component from Inertia.js v2.0 automatically triggers a request when the element becomes visible in the viewport.</p></li>
<li><p><strong>Pagination Parameters</strong>:<br>
</p></li>
</ol>

<pre class="brush:php;toolbar:false">:params="{
    data: {
        page: page.props.postsPagination.current_page + 1,
    },
    only: ['posts', 'postsPagination'],
}"

• data : Spécifie la page suivante à charger
• uniquement : optimise la requête en récupérant uniquement les données requises

1. États de chargement : le composant gère avec élégance les états de chargement et de fin de contenu.

Implémentation back-end

Voici l'implémentation du contrôleur Laravel qui gère à la fois les scénarios de pagination régulière et de chargement de page complète :

<?php namespace App\Http\Controllers;

use App\Models\Post;
use App\Models\Category;
use Illuminate\Pagination\LengthAwarePaginator;
use Inertia\Inertia;

class BlogController extends Controller
{
    public function index(?Category $category = null)
    {
        return Inertia::render('Blog/Index', [
            'category' => $category,
            'featuredPost' => $this->getFeaturedPost(),
            'posts' => $this->getPaginatedPosts($category),
            'postsPagination' => $this->getPaginatedPosts($category)?->toArray(),
        ]);
    }

    protected function getPaginatedPosts(?Category $category): ?LengthAwarePaginator
    {
        $currentPage = request()->input('page', 1);
        $perPage = request()->input('per_page', 12);

        $query = Post::query()
            ->with(['author', 'category'])
            ->published();

        if ($category) {
            $query->where('category_id', $category->id);
        }

        // Apply any additional filters
        if (request()->has('sort')) {
            $query->orderBy(request()->input('sort'), request()->input('direction', 'desc'));
        } else {
            $query->latest();
        }

        // Handle full page load vs. infinite scroll request
        if (!request()->header('X-Inertia')) {
            // Full page load - fetch all pages up to current
            $allResults = collect();

            for ($page = 1; $page paginate($perPage, ['*'], 'page', $page);
                $allResults = $allResults->concat($pageResults->items());
            }

            return new LengthAwarePaginator(
                $allResults,
                Post::query()
                    ->published()
                    ->when($category, fn($q) => $q->where('category_id', $category->id))
                    ->count(),
                $perPage,
                $currentPage
            );
        }

        return $query->paginate($perPage);
    }

    protected function getFeaturedPost()
    {
        return Post::query()
            ->with(['author', 'category'])
            ->published()
            ->featured()
            ->latest()
            ->first();
    }
}

Principales fonctionnalités du back-end

1. Gestion de la pagination :

if (!request()->header('X-Inertia')) {
    // Full page load logic
} else {
    // Regular pagination for infinite scroll
}

1. Chargement de la page complète : lorsqu'un utilisateur actualise ou visite directement une page, nous récupérons toutes les pages précédentes pour maintenir la position de défilement correcte :

for ($page = 1; $page paginate($perPage, ['*'], 'page', $page);
    $allResults = $allResults->concat($pageResults->items());
}

1. Requêtes efficaces : l'implémentation inclut un chargement impatient des relations et des requêtes étendues :

$query = Post::query()
    ->with(['author', 'category'])
    ->published();

Conclusion

La mise en œuvre du défilement infini avec Laravel et Inertia.js v2.0 offre une expérience utilisateur fluide tout en conservant de bonnes performances et pratiques de référencement. La combinaison de l'API Composition de Vue 3 et du composant WhenVisible d'Inertia.js facilite la mise en œuvre et la maintenance.

N'oubliez pas de :

• Testez minutieusement l'implémentation, en particulier pour les cas extrêmes
• Surveiller les mesures de performances
• Envisagez de mettre en œuvre une solution de secours pour les utilisateurs dont JavaScript est désactivé
• Gardez l'accessibilité à l'esprit lors de la mise en œuvre du défilement infini

Cette implémentation peut être adaptée à divers cas d'utilisation au-delà des articles de blog, tels que des listes de produits, des galeries d'images ou tout autre contenu bénéficiant d'un défilement infini.

Ressources supplémentaires

• Documentation Inertia.js
• Documentation Laravel
• Documentation Vue 3
• Directives d'accessibilité Web pour Infinite Scroll