在 Laravel 5.3 中使用 Pjax

前言

日前拜讀 Summer 的 在 Laravel 應用中使用 pjax 進行頁面加速，自己研究了一下午，這邊分享下心得。

註：因為輸入法問題，比較習慣使用繁體中文，若有不方便之處，還請版上前輩們多多見諒。

正文

一般來說，在 Laravel 5.* 版本使用 Pjax 時，都會建議使用 jQuery.pjax 這個前端庫搭配 spatie/laravel-pjax 這個中間件進行。

不過我本人著實不太喜歡為了一個 pjax 還要加載一整套 jQuery，畢竟現在我開發大多都是應用 Vuejs 或 React，用不太到 jQuery。

所以我花了點時間整理一下不依賴 jQuery 的 pjax 實作方法。

安裝 Pjax

以 npm 安裝 pjax 相依性套件 moOx/pjax：

npm i pjax --save

在 JS 中加入 Pjax

在 resources/assets/js/bootstrap.js 中加入以下內容：

window.Pjax = require('pjax');

在 resources/assets/js/app.js 中加入以下內容：

new Pjax({
    elements: 'a',
    selectors: ['body'],
});

最後用 gulp 編譯

gulp

安裝中間件（Middleware）

這邊我使用 spatie/laravel-pjax 這個套件

composer require spatie/laravel-pjax

在 app/Http/Kernel.php 的 protected $middlewareGroups 的 web 中加入以下內容：

\Spatie\Pjax\Middleware\FilterIfPjax::class,

$middlewareGroups 大概會像是以下的內容：

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \Spatie\Pjax\Middleware\FilterIfPjax::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

議題（issues）

1. LoadingBar（加載進度條）：
   這個部份可以直接參考 在 Laravel 應用中使用 pjax 進行頁面加速
2. 中間件的必要性（一）：在開發的過程中，赫然發現有沒有中間件的效果都是一樣的，其主要原因是因為 spatie/laravel-pjax 會去檢驗本次的請求是不是 pjax() 請求，在 Laravel 中是去檢驗 Request Header 中是否存在 X-PJAX 這個值，但是 moOx/pjax 並不會在 header 中加入這個值。
3. 中間件的必要性（二）：另外，spatie/laravel-pjax 會去檢驗在 Request Header 中的 X-PJAX-Container 這個值，以決定應該傳怎樣的資料回去，可是很不幸的 moOx/pjax 也不會丟出這個值。

結論

其實就算不使用 spatie/laravel-pjax，還是能有 pjax 的效果（雖然資料量並不會減少，但是能減少外部資源請求的次數，在不使用 HTTP/2 的網站其實還是有利的）