آشنایی با Inertia.js در لاراول

Inertia.js یه پکیج رابط بین فرانت‌اند (frontend) و بک‌اند (backend) هستش. خودش رو فریمورک (framework) نمی‌دونه و نیست. نه سیستم مسیریابی داره و نیازی به استفاده از API داره. جایگزین فرانت‌اند یا بک‌اند هم نیست! خب پس چیه!؟ در ادامه براتون توضیح میدم که این پکیج جالب چی هستش.

Inertia.js چیست؟

خب همونطور که بالا هم یه کوچولو توضیح دادم فریمورک نیست و فقط یه رابط بین سرور و کاربر (فرانت‌اند و بک‌اند) هستش. یعنی برای استفاده از اون باید یه فریمورک مثل لاراول سمت سرور و یه فریمروک سمت کاربر داشته باشین. در حال حاضر که این مقاله رو می‌نویسم این پکیج از فریمورک‌های لاراول (Laravel) و Rails برای سمت سرور و از فریمورک‌های React، Vue و Svelte سمت کاربر پشتیبانی میکنه.

شعار این پکیج اینه که برای وصل کردن فرانت به بک‌اند نیازی نیست که API جداگونه‌ای نوشته بشه! مثلا فرض کنین وقتی بخواین از Vue یا React برای فرانت استفاده کنین حتما باید از API استفاده کنین. این پکیج این API نویسی رو حذف کرده و همون مدل قدیمی که توی لاراول داخل کنترلر کدهاتون رو مینوشتین و پاس میدادین به ویو رو تبدیل میکنه و مثل یه API برای فرانت برمی‌گردونه. در ضمن Inertia داخل خودش یه سیستم مسیریابی سمت فرانت داره (<inertia-link>) تا با کلیک سمت کاربر، صفحه مجدد بارگذاری نشه (برنامه رو تک صفحه ای یا SPA میکنه). به مثال زیر برای کنترلر کاربر نگاه کنین:

class UsersController
{
    public function index()
    {
        $users = User::active()
            ->orderByName()
            ->get(['id', 'name', 'email']);

        return Inertia::render('Users', [
            'users' => $users
        ]);
    }
}

کافیه مقدار یوزرها رو به هر روشی که خودتون دوست دارین از دیتابیس بگیرین. بعد به متد render کلاس Inertia پاس بدین و بهش بگین که این مقدار رو داخل کدوم کامپوننت vue بریزه! اونوقت میتونین داخل کامپوننتی که معرفی کردین (توی مثال بالا به کامپوننت Users.vue پاس داده میشه) مثل زیر ازش استفاده کنین:

<template>
  <layout title="Users">
    <div v-for="user in users" :key="user.id">
      <inertia-link :href="`/users/${user.id}`">
        {{ user.name }}
      </inertia-link>
      <div>{{ user.email }}</div>
    </div>
  </layout>
</template>

<script>
import Layout from '../Shared/Layout'

export default {
  components: {
    Layout,
  },
  props: {
    users: Array,
  },
}
</script>

خیلی شبیه همون چیزیه که قبلا توی blade ازش استفاده می‌کردیم. ولی خب این امکان برای فریمورک های SPA یا تک صفحه ای مثل Vue وجود نداشت. حالا با استفاده از Inertia.js دیگه مشکلی برای این کار وجود نداره.

راه اندازی Inertia در لاراول

همونطور که لاراول توی صفحه کیت استارتر (Starter kits) خودش توضیح داده، شما میتونین از طریق هر دو پکیج Laravel Breeze و Laravel Jetstream که پکیج های احراز هویت لاراول هستن، Inertia رو نصب کنین. برای نصب این پکیج ها باید از طریق کامپوزر (composer) داخل فولدر اصلی پروژه اقدام کنین:

نصب Laravel Breeze همراه Inertia

composer require laravel/breeze

php artisan breeze:install --inertia

npm install

npm run dev

php artisan migrate

نصب Laravel Jetstream همراه Inertia

composer require laravel/jetstream

php artisan jetstream:install inertia

npm install

npm run dev

php artisan migrate

شما میتونین داکیومنت Inertia رو مطالعه کنین تا برنامه خودتون رو به بهترین نحو ممکن گسترش بدین.

خوشحال میشم نظرات و تجربیاتتون رو درباره این پکیج بدونم 🙂