Inertia.js PHP: पूर्ण गाइड, उदाहरण और ट्यूटोरियल

1. Inertia.js क्या है और इसकी आवश्यकता क्यों है?

Inertia.js कोई फ्रेमवर्क या पारंपरिक SPA (Single Page Application) बनाने वाली लाइब्रेरी नहीं है। यह एक "पुल" या "एडेप्टर" की तरह काम करता है, जो आपको क्लासिकल सर्वर-साइड फ्रेमवर्क (जैसे Laravel PHP) और किसी भी आधुनिक फ्रंटएंड फ्रेमवर्क (React, Vue.js या Svelte) का उपयोग करके बिना अलग REST API लिखे आधुनिक सिंगल-पेज एप्लिकेशन बनाने की सुविधा देता है।

Inertia.js जिस मुख्य समस्या का समाधान करता है, वह है "सर्वर HTML रेंडर करे" या "सर्वर JSON भेजे और फ्रंटएंड खुद तय करे क्या दिखाना है" जैसे पारंपरिक तरीकों को छोड़ना। इसके बजाय, Inertia एक तीसरा रास्ता प्रस्तुत करता है: आप PHP में कंट्रोलर सामान्य रूप से लिखते हैं, लेकिन Blade टेम्पलेट या JSON रिस्पॉन्स लौटाने के बजाय, आप Inertia रिस्पॉन्स लौटाते हैं जिसमें डेटा और कंपोनेंट का नाम होता है। क्लाइंट-साइड पर Inertia (JavaScript) इस रिस्पॉन्स को पकड़ता है, सही कंपोनेंट (React/Vue) ढूंढता है और डेटा के साथ उसे रेंडर करता है। पेजों के बीच नेविगेशन SPA की तरह बिना पूरी पेज रीलोड के होता है, लेकिन सारा रूटिंग और बिजनेस लॉजिक सर्वर पर ही रहता है।

इसकी आवश्यकता क्यों है? पहला, यह आर्किटेक्चर को बहुत सरल बनाता है: आपको दो अलग-अलग एप्लिकेशन (बैकएंड API और फ्रंटएंड SPA) बनाए रखने और ऑथराइजेशन व वैलिडेशन लॉजिक को डुप्लिकेट करने की जरूरत नहीं है। दूसरा, यह Laravel के सभी फायदे (ORM Eloquent, ईमेल के लिए Blade कंपोनेंट, Artisan, middleware) और React/Vue के सभी फायदे (रिएक्टिविटी, कंपोनेंट-आधारित दृष्टिकोण, विशाल इकोसिस्टम) को बरकरार रखता है। तीसरा, यह एक शानदार Developer Experience (DX) प्रदान करता है: आप एक ही रिपॉजिटरी में काम करते हैं, एक ही राउटर (Laravel) का उपयोग करते हैं, और Inertia क्लाइंट पर एप्लिकेशन की स्थिति को पारदर्शी रूप से प्रबंधित करता है।

2. इंस्टॉलेशन

इंस्टॉलेशन दो भागों में होता है: सर्वर-साइड (PHP) और क्लाइंट-साइड (JavaScript)। मान लिया जाता है कि आपके पास पहले से Laravel (संस्करण 8, 9, 10 या 11) इंस्टॉल है।

चरण 1: सर्वर पैकेज इंस्टॉल करें (PHP)

अपने Laravel प्रोजेक्ट की रूट डायरेक्टरी में टर्मिनल में निम्न कमांड चलाएं:

composer require inertiajs/inertia-laravel

चरण 2: क्लाइंट एडेप्टर इंस्टॉल करें (JavaScript)

अपना फ्रंटएंड फ्रेमवर्क चुनें और संबंधित कमांड चलाएं:

React के लिए:

npm install @inertiajs/react react react-dom

Vue 3 के लिए:

npm install @inertiajs/vue3 vue

Svelte के लिए:

npm install @inertiajs/svelte svelte

चरण 3: कॉन्फ़िगरेशन पब्लिश करें (वैकल्पिक)

php artisan vendor:publish --provider="Inertia\ServiceProvider"

चरण 4: रूट टेम्पलेट सेट करें

फ़ाइल resources/views/app.blade.php बनाएं और इसमें निम्न कोड डालें:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name'))</title>
    @viteReactRefresh
    @vite(['resources/js/app.jsx'])
    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>

डायरेक्टिव @inertia वह स्थान है जहां Inertia आपका एप्लिकेशन डालेगा। @inertiaHead कंपोनेंट्स से हेडर को मैनेज करने के लिए है।

चरण 5: Vite सेटअप करें (यदि Vite का उपयोग कर रहे हैं)

फ़ाइल vite.config.js में React या Vue के लिए प्लगइन जोड़ें:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // या @vitejs/plugin-vue

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/