Anophel-آنوفل معرفی Inertia.js و راهنمای استفاده

معرفی Inertia.js و راهنمای استفاده

انتشار:
Web Development
2
0

ساختن برنامه های کاربردی وب می تواند یک فرآیند بسیار دشواری باشد. قبل از انتخاب از میان فریمورک‌ها و کتابخانه‌های متعدد، باید به این فکر کنید که آیا یک برنامه رندر شده در سمت سرور (SSR) یا یک برنامه تک صفحه‌ای (SPA) خواهد بود. در حالی که هر دو رندر سمت سرور و کلاینت مزایا و معایب خود را دارند، Inertia بهترین های هر دو رندر را با هم ترکیب می کند.

Inertia.js چیست؟

Inertia کتابخانه ای است که بهترین رندر سمت سرور (SSR) و رندر سمت سرویس کلاینت (CSR) را با اجازه به توسعه دهندگان برای ساخت SPA با استفاده از مسیرهای سمت سرور و کنترلرها ترکیب می کند.

Inertia یک رویکرد جدید برای ساخت برنامه های وب سرور محور کلاسیک است. که ما آن را یکپارچه مدرن می نامیم. Inertia به شما امکان می‌دهد تا برنامه‌های تک صفحه‌ای و کاملاً رندر شده در سمت کلاینت، بدون پیچیدگی زیادی که با SPAهای مدرن همراه است ایجاد کنید. این کار را با استفاده از فریمورک های سمت سرور موجود انجام می دهد.

ممکن است براتون سوال باشد که آیا این یک فریمورک جاوا اسکریپت دیگری است؟ طبق داکیومنت های Inertia :

Inertia یک فریمورک نیست، و جایگزینی برای فریمورک های سمت سرور یا سمت کلاینت موجود شما نمی باشد. در عوض، برای کار با آنها طراحی شده است. Inertia را به عنوان چسبی در نظر بگیرید که این دو را به هم متصل می کند.

چه مشکلاتی Inertia.js حل می کند ؟

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

  • پیچیدگی های SPA - ساخت SPA های مدرن با مشکلاتی همراه است. توسعه‌دهندگان همیشه با مدیریت مؤثر state های برنامه، تعیین روت ها برای برنامه، راه‌اندازی گارد navigation و احراز هویت مشکل داشته‌اند.
  • ساخت API – با Inertia.js نیازی به ساخت REST یا GraphQL API ندارید، زیرا Inertia برای کار کردن با چارچوب‌های کلاسیک سمت سرور شما مانند Laravel، Ruby on Rails یا Django ایجاد شده است.
  • مشکلات مرورگر - Inertia دارای سرویس‌های داخلی است که مشکلات مرورگر را که هنگام ساخت SPA با آن مواجه می‌شوند، حل می‌کند، مسائلی مانند:
  • مدیریت تاریخچه مرورگر و موقعیت اسکرول، ویژگی های remember، preserveState و preserveScroll را برای ذخیره state های لوکال کامپوننت ارائه می کند.
  • نشانگر بارگیری - چون درخواست‌های Inertia از طریق صدا زدن AJAX انجام می‌شوند، هیچ نشانگر بارگیری مرورگر پیش‌فرض وجود ندارد، بنابراین Inertia شامل NProgress.js، کتابخانه progress bar است. نشانگر بارگیری تنها در صورتی نشان داده می شود که درخواست بیش از 250m طول بکشد
  • بارگیری مجدد و نسخه سازی assets ها، Inertia گزینه ای برای ردیابی و ذخیره نسخه فعلی assets ها در وب سایت شما ارائه می دهد.

 

خب ممکن است برایتان سوال باشد که چرا باید از Inertia.js استفاده کنید؟ در زیر ما دلایل استفاده از آن را به صورت جزئی تر بررسی کرده ایم.


مزایای GraphQL بدون استفاده از GraphQL

Inertia به اجرای کوئری های خاص در دیتابیس سترسی کامل می دهد تا داده های مورد نیاز یک صفحه را در حالی که از ORM سمت سرور خود به عنوان منبع داده استفاده می کنید به دست آورید.

صدا زدن محدود AJAX

در SPA های سنتی، صدا زدن های AJAX در هر بازدید از صفحه برای fetch کردن داده ها انجام می شود. در Inertia،صدا زدن AJAX برای راه‌اندازی برنامه برقرار می‌شود، سپس یک نمونه Vue.js(یا هر فریمورک دیگر) دائمی نگه می‌دارد و هر بازدید بعدی از صفحه از طریق XHR با هدر X-Inertia ویژه که روی true تنظیم شده است، انجام می‌شود. این باعث می شود که سرور به جای بازدید از صفحه کامل، یک پاسخ Inertia را به عنوان JSON ارسال کند.

همچنین یک کامپوننت ایمن ایجاد می کند که در اطراف یک لینک anchor استاندارد ایجاد می کند، رویدادهای کلیک را قطع می کند و از بارگذاری مجدد کامل صفحه جلوگیری می کند.

امنیت

یکی از مهم ترین دلایل استفاده از Inertia امنیت می باشد.هنگام ساخت برنامه های مبتنی بر API، باید پشتیبانی CORS را به برنامه خود اضافه کنیم تا بتوانیم به منابعی در منابع دیگر دسترسی داشته باشیم.

با Inertia نیازی نیست نگران راه اندازی CORS باشید زیرا داده های شما از طریق کنترلرهای شما ارائه می شود و در همان دامنه ای قرار می گیرند که کامپوننت های جاوا اسکریپت شما قرار دارند.

شما می توانید مجوز را در سمت سرور تنظیم کنید و بررسی های مجوز را با دور زدن توکن ها به عنوان ابزارهای کامپوننت صفحه خود انجام دهید، این کار به کاهش خطر افشای اطلاعات مهم کمک می کند زیرا مدیریت مجوزها بر روی کلاینت می تواند فرد را در معرض خطر حمله XSS قرار دهد.(اسکریپت نویسی سایت).

فریمورک آگنوستیک

Inertia هم فریمورک سمت سرور و هم سمت کلاینت آگنوستیک است. شما می توانید از Inertia با هر فریم ورک سمت سرور و همچنین هر فریمورک سمت کلاینت که از کامپوننت های پویا پشتیبانی می کند استفاده کنید.

آداپتورهای Inertia خدمات (پکیج هایی) هستند که به Inertia کمک می‌کنند تا با فریمورک های خاص به خوبی کار کند. پشتیبانی رسمی از آداپتورها در حال حاضر به Rails و Laravel در بک اند و React، Vue.js و Svelte در فرانت اند محدود شده است.

آداپتورهای غیر رسمی برای برخی فریمورک های دیگر مانند Symfony، Django، CakePHP و Adonis وجود دارد.

ما در یکی از مقاله هایمان درباره نحوه استفاده از Inertia در Adonis صحبت کرده ایم.

آیا آینده ای برای Inertia وجود دارد؟

یکی از مهمترین سوال های ممکن این می باشد . ولی به یاد داشته باشید که وب برای همیشه در حال تکامل است و ما شاهد انتقالی از برنامه های یکپارچه سنتی ساخته شده در سمت سرور به برنامه های مبتنی بر API بوده ایم. آیا با این روند فعلی آینده ای برای Inertia وجود دارد؟

البته پاسخ به سوال بستگی به مورد استفاده و ترجیحات دارد.

Inertia برای افرادی ساخته شده است که می خواهند برنامه های یکپارچه بسازند - آنها عموماً اتصال محکم بین کنترلرهای خود و view های خود را ترجیح می دهند، اما همچنین می خواهند برنامه های خود را با استفاده از فریمورک های مدرن سمت کلاینت بسازند. اکثر توسعه دهندگان هنوز در این دسته قرار می گیرند، اما با افزایش و پشتیبانی صنعت از برنامه های مبتنی بر API، ممکن است شاهد کاهش استفاده از آن باشیم.

البته، مواقعی وجود دارد که استفاده از Inertia ممکن است بهترین گزینه نباشد. موقعیت‌هایی مانند زمانی که به  multi-client support، customer-facing/marketing pages و وب‌سایت‌های مبتنی بر سئو نیاز دارید. احتمالاً استفاده از Inertia برای این موارد ایده خوبی نیست. اما ساختن برنامه های وب که داشبوردها و موارد مشابه را تقویت می کنند کاملاً مفید است.

آیا رندر سمت سرور با Inertia امکان پذیر است؟

Inertia از رندر سمت سرور پشتیبانی می کند ،رندر سمت سرور، صفحات جاوا اسکریپت شما را در سرور از قبل رندر می کند و به بازدیدکنندگان شما این امکان را می دهد که هنگام بازدید از برنامه شما، HTML کامل رندر شده را دریافت کنند. از آنجایی که HTML کاملاً رندر شده توسط برنامه شما ارائه می شود، ایندکس کردن سایت شما برای موتورهای جستجو نیز آسان تر خواهد شد.  که می توانید در داکیومنت وب سایت Inertia ببینید.

خب بیایم یک پروژه با Inertia.js را باهم شروع کنیم.

ساخت پروژه لاراول ، Vuejs و Inertia.js 

در این فرآیند نصب از لاراول برای سمت سرور و Vue.js برای سمت کلاینت استفاده می کند،قبل از ساخت لطفا پیشنیاز های زیر را نصب کنید که این پیشنیاز ها شامل :
 

  1. Node.js 18x یا بالاتر و Yarn / npm 9.6 یا بالاتر نصب شده باشد.
  2. PHP >= 7.2.0، Composer و Laravel نصب شده باشد.
  3. آشنایی با اصول اولیه Vue و Laravel .

ایجاد یک پروژه جدید لاراول:

laravel new inertia-example

یا می توانید با Composer ایجاد کنید:

composer create-project --prefer-dist laravel/laravel inertia-example

cd بزنید و وارد پروژه شوید:

cd inertia-example

آداپتور سمت سرور Inertia را با استفاده از composer نصب کنید:

composer require inertiajs/inertia-laravel

نام فایل welcome.blade.php موجود در پوشه resources/views را به app.blade.php تغییر دهید.

محتوای app.blade.php خود را با این جایگزین کنید:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

کد inertia@ یک هلپر است که یک div پایه با id app  ایجاد می کند که حاوی اطلاعات صفحه است،و به لاراول می گوید که ویوها با استفاده از Inertia تولید می شوند.

سپس با اجرای این دستور در ترمینال خود، آداپتور سمت کلاینت را تنظیم کنید:

npm install @inertiajs/inertia @inertiajs/inertia-vue

#or, Using Yarn

yarn add @inertiajs/inertia @inertiajs/inertia-vue

فایل app.js موجود در resources/js را باز کنید و محتوای فایل app.js خود را با موارد زیر جایگزین کنید:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

در قسمت createInertiaApp که  resolve می باشد به Inertia می گوید که چگونه یک کامپوننت صفحه را بارگیری کند. یک رشته را به عنوان نام صفحه دریافت می کند و یک نمونه صفحه را برمی گرداند.

نتیجه

Inertia یک کتابخانه عالی برای ساخت SPAهای ترکیبی است. در این مقاله، ما به دوام آن در آینده نزدیک، مزیت آن و نحوه استفاده از آن در پروژه لاراول و Vue نگاه کرده ایم.

نظر شما درباره Inertia چیست؟

#Inertiajs#inertia#laravel#react#vuejs#اینرسی#لاراول
نظرات ارزشمند شما :
Loading...

مقاله های مشابه