Mengenal InertiaJS Integrasi dengan React

InertiaJS dan React adalah dua teknologi populer dalam dunia pengembangan web. Keduanya memiliki kelebihan masing-masing dalam membangun aplikasi web modern dan responsif. Integrasi antara InertiaJS dan React memungkinkan developer untuk memanfaatkan performance dari server-side rendering (SSR) dan client-side rendering (CSR) secara bersamaan, sehingga dapat menciptakan pengalaman pengguna yang lebih cepat dan responsif.

Agenda kali ini saya akan membahas tentang:

1. Mengenal InertiaJS
2. Cara InertiaJS bekerja
3. Instalasi InertiaJS dan React
4. Cara Routing InertiaJS diReact
5. Optimasi Kinerja dengan InertiaJS dan React
6. Debugging dengan InertiaJS dan React
7. Kesimpulan

Mengenal InertiaJS

Inertia adalah sebuah tools atau pustaka (library) open-source yang digunakan untuk membangun aplikasi web dengan menggunakan teknologi modern seperti Vue.js, React, dan Svelte.

Inertia memungkinkan para developer untuk membangun aplikasi single-page (SPA) dengan cara yang lebih mudah dan familiar seperti membangun aplikasi multi-page tradisional, tetapi tetap memanfaatkan keunggulan dari SPA seperti kecepatan dan pengalaman pengguna yang lebih baik.

Salah satu fitur utama dari Inertia adalah kemampuannya untuk memperbarui tampilan aplikasi secara dinamis tanpa harus me-refresh halaman sepenuhnya, sehingga dapat memberikan pengalaman pengguna yang lebih responsif. Inertia juga menyediakan integrasi yang mudah dengan server-side framework seperti Laravel, sehingga dapat mempercepat proses pengembangan.

Apakah hanya bisa dipakai di laravel?

Inertia memang awalnya dikembangkan untuk digunakan bersama-sama dengan framework PHP Laravel, sehingga integrasi antara Inertia dan Laravel sangatlah mudah dan komprehensif. Namun, Inertia juga dapat digunakan dengan beberapa framework lain seperti Rails, Django, ASP.NET Core, Node.js, Go dan AdonisJS.

Cara Kerja InertiaJS

Secara singkat, Inertia bekerja dengan menggabungkan konsep-konsep dari aplikasi multi-page tradisional dengan keuntungan-keuntungan dari aplikasi single-page (SPA).

Pada aplikasi multi-page, setiap tautan atau halaman akan memuat ulang seluruh halaman dari server ketika diakses. Sedangkan pada aplikasi single-page, tampilan aplikasi dihasilkan di sisi klien (client-side), dan hanya memuat data yang diperlukan dari server melalui API.

Inertia mengambil pendekatan yang berbeda, yaitu dengan memuat tampilan awal dari server seperti pada aplikasi multi-page, tetapi setelah itu hanya memperbarui komponen-komponen yang diperlukan di sisi klien seperti pada aplikasi single-page. Hal ini memungkinkan Inertia untuk memberikan pengalaman pengguna yang lebih responsif dan cepat, sambil tetap mempertahankan struktur aplikasi yang familiar seperti pada aplikasi multi-page.

Dalam implementasinya, Inertia menggunakan teknologi JavaScript untuk memuat komponen-komponen tampilan pada sisi klien, dan teknologi server-side seperti Laravel untuk menyediakan data yang dibutuhkan oleh komponen tersebut. Inertia juga menyediakan fitur-fitur seperti Inertia Links dan Inertia Forms untuk memudahkan pengembangan aplikasi yang responsif dan mudah digunakan.

Instalasi InertiaJS dan React

Sebagai contoh saya akan menginstallnya di Laravel.

1. Pastikan Kalian memiliki Node.js dan NPM terbaru terinstal di komputer kalian.
2. Buka terminal atau command prompt dan navigasi ke folder proyek kalian.
3. Jalankan perintah npm init untuk membuat package.json file untuk proyek kalian.
4. Jalankan perintah npm install inertia @inertiajs/inertia @inertiajs/inertia-react untuk menginstal InertiaJS dan Inertia-React.
5. Tambahkan file app.js di folder resources/js

import { InertiaApp } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'

const app = document.getElementById('app')

render(
  <InertiaApp
    initialPage={JSON.parse(app.dataset.page)}
    resolveComponent={name =>
      import(`./Pages/${name}`).then(module => module.default)
    }
  />,
  app
)

6. Tambahkan file webpack.mix.js di folder proyek kalian

const mix = require('laravel-mix')

mix.react('resources/js/app.js', 'public/js')
    .webpackConfig({
        resolve: {
            modules: [
                path.resolve('./resources/js'),
                path.resolve('./node_modules')
            ]
        }
    })
    .version()

7. Tambahkan file welcome.blade.php di folder resources/views

<!doctype html>
<html>
    <head>
        <!-- Add any head tags you need -->
    </head>
    <body>
        <div id="app" data-page="{{ json_encode($page) }}"></div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

8. Langkah terakhir kalian tinggal jalankan perintah npm run dev

Routing InertiaJS dan React

routing digunakan untuk mengatur tampilan halaman yang berbeda tanpa harus refresh seluruh halaman.

1. Membuat Route pada Laravel Buatlah route pada file web.php yang akan menampilkan halaman utama dengan InertiaJS. Misalnya, kita akan membuat route / dengan kode:

Route::get('/', function () {
  return inertia('Home');
});

2. Buatlah komponen React yang. akan ditampilkan pada halaman utama. Misalnya, kita akan membuat komponen Home.jsx pada folder resources/js/components dengan kode:

import React from 'react'

const Home = () => {
  return (
    <div>
      <h1>Selamat Datang di Halaman Home</h1>
      <p>Silakan klik tombol di bawah ini untuk melihat halaman lainnya.</p>
    </div>
  )
}

export default Home

3. Menggunakan InertiaJS pada Komponen Selanjutnya, kita harus mengintegrasikan komponen tersebut dengan InertiaJS. Untuk itu, tambahkan kode berikut pada file app.js:

import { InertiaApp } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'
import Home from './components/Home'

const app = document.getElementById('app')

render(
  <InertiaApp>
    <Home />
  </InertiaApp>,
  app
)

4. Membuat Route untuk Halaman Lain Selanjutnya, buatlah route untuk halaman lain pada file web.php. Misalnya, kita akan membuat route /about dengan kode:

Route::get('/about', function () {
  return inertia('About');
});

5. Membuat Komponen React untuk Halaman Lain Selanjutnya, buatlah komponen React yang akan ditampilkan pada halaman lain. Misalnya, kita akan membuat komponen About.jsx pada folder resources/js/components dengan kode:

import React from 'react'

const About = () => {
  return (
    <div>
      <h1>Ini adalah halaman About</h1>
      <p>Ini adalah aplikasi sederhana yang dibangun dengan InertiaJS dan React.</p>
    </div

6. Menggunakan Inertia Link pada Komponen Untuk membuat link pada komponen React, kita harus menggunakan InertiaLink dari InertiaJS. Misalnya, pada komponen Home.jsx kita ingin membuat link ke halaman About, maka tambahkan kode:

import React from 'react'
import { InertiaLink } from '@inertiajs/inertia-react'

const Home = () => {
  return (
    <div>
      <h1>Selamat Datang di Halaman Home</h1>
      <p>Silakan klik tombol di bawah ini untuk melihat halaman lainnya.</p>
      <InertiaLink href="/about">Tentang</InertiaLink>
    </div>
  )
}

export default Home

7. Routing di React Untuk mengaktifkan routing di React, kita harus menambahkan kode pada app.js:

import { InertiaApp, InertiaLink } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import Home from './components/Home'

const app = document.getElementById('app')

render(
  <BrowserRouter>
    <InertiaApp>
      <Home />
    </InertiaApp>
  </BrowserRouter>,
  app
)

Itulah cara singkat membuat routing InertiaJS diReact.

Optimasi Kinerja dengan InertiaJS dan React

InertiaJS dan React dapat membantu kalian meningkatkan kinerja aplikasi web dengan cara:

1. Single Page Application InertiaJS dan React memungkinkan kita membuat aplikasi web yang menggunakan konsep single page application (SPA). Hal ini memungkinkan pengalaman pengguna yang lebih baik karena halaman tidak perlu dimuat ulang saat berpindah antar halaman.
2. Penggunaan Komponen React memungkinkan kita menggunakan komponen-komponen yang dapat digunakan kembali pada halaman yang berbeda. Hal ini mempercepat proses pengembangan dan meningkatkan kinerja aplikasi karena kita tidak perlu menulis ulang kode yang sama.
3. Penggunaan Props Dalam React, kita dapat menggunakan props untuk mengirim data dari komponen parent ke komponen children. Dengan cara ini, kita bisa mempercepat proses pengembangan dan meningkatkan kinerja aplikasi karena tidak perlu memuat ulang seluruh halaman ketika ingin menampilkan data yang berbeda.
4. Load Data Secara Dinamis InertiaJS memungkinkan kita untuk memuat data secara dinamis menggunakan AJAX. Dengan cara ini, kita bisa mempercepat proses pengembangan dan meningkatkan kinerja aplikasi karena hanya memuat data yang dibutuhkan.
5. Prapemrosesan Server Side InertiaJS (SSR) memungkinkan kita untuk memproses data pada sisi server sebelum dikirimkan ke browser. Dengan cara ini, kita bisa mempercepat proses pengembangan dan meningkatkan kinerja aplikasi karena mengurangi beban pada sisi browser.

contoh kode kurang lebih seperti ini

// Komponen yang memuat data secara dinamis
import React, { useState, useEffect } from 'react'
import { usePage } from '@inertiajs/inertia-react'

const Posts = () => {
  const [posts, setPosts] = useState([])
  const { props } = usePage()

  useEffect(() => {
    setPosts(props.posts)
  }, [props])

  return (
    <div>
      <h1>Daftar Postingan</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  )
}

export default Posts

Debugging dengan InertiaJS dan React

Setelah kita berhasil membuat program tidak lupa melakukan prosses debugging untuk menghindari kesalahan pada saat rilis di production. Untuk melakukan debugging dapat dilakukan dengan beberapa cara sebagai berikut:

1. Menggunakan React Developer Tools React Developer Tools adalah ekstensi browser yang bisa membantu kita dalam proses debugging aplikasi web yang menggunakan React. Dengan menggunakan ekstensi ini, kita bisa memeriksa hierarki komponen, melihat props dan state, serta memantau kinerja aplikasi.
2. Menggunakan InertiaJS Debug Mode InertiaJS memiliki mode debug yang bisa membantu kita dalam proses debugging aplikasi web. Dalam mode ini, InertiaJS akan menampilkan informasi tentang request dan response yang diterima. Kita bisa mengaktifkan mode debug dengan menambahkan parameter debug pada method Inertia.init(). Untuk mengaktifkan InertiaJS Debug Mode, kita bisa menambahkan parameter debug: true pada method Inertia.init(). Contohnya seperti berikut:

import { InertiaApp } from '@inertiajs/inertia-react'

Inertia.init({
  debug: true,
  // Konfigurasi lainnya
})

const app = document.getElementById('app')

ReactDOM.render(
  <InertiaApp
    initialPage={JSON.parse(app.dataset.page)}
    resolveComponent={name =>
      import(`./pages/${name}`).then(module => module.default)
    }
  />,
  app
)

Kesimpulan

Berdasarkan pengalaman magang, saya dapat menyimpulkan bahwa InertiaJS adalah sebuah library yang sangat bermanfaat untuk membangun aplikasi web dengan teknologi SPA (Single Page Application). InertiaJS dapat diintegrasikan dengan React dengan mudah dan memberikan banyak keuntungan seperti memudahkan proses routing, meningkatkan kinerja aplikasi, dan memudahkan proses debugging.

Namun, perlu diingat bahwa penggunaan InertiaJS dan React juga membutuhkan pemahaman yang mendalam tentang kedua teknologi tersebut. Kita perlu memahami konsep-konsep dasar pada React seperti state dan props, serta fitur-fitur yang disediakan oleh InertiaJS seperti server-side rendering dan caching.

Dari pengalaman magang, saya menyadari bahwa InertiaJS dan React adalah teknologi yang sangat berguna dan dapat memudahkan proses pengembangan aplikasi web. Oleh karena itu, pemahaman yang mendalam tentang kedua teknologi ini dapat membantu dalam proses pengembangan aplikasi web yang lebih baik dan efektif.