Inertia.js 채택 가이드: 개요, 예시 및 대안

작사: Rahul Chhodde✏️

최신 프런트엔드 프레임워크는 React with Next.js, Vue with Nuxt.js, Svelte with SvelteKit와 같은 전용 풀 스택 프레임워크와 잘 어울립니다. 그러나 React와 같은 최신 프런트엔드 솔루션을 Laravel과 같은 기존 백엔드 또는 서버 측 프레임워크와 결합할 때 동일한 사용 편의성과 즉시 사용 가능한 지원은 불가능해 보입니다.

JavaScript 프런트엔드 솔루션과 기존 백엔드 프레임워크 간의 이러한 적응성 격차는 Inertia.js로 채워집니다. 이 채택 가이드에서는 Inertia를 사용하여 서버측 라우팅을 유지하면서 기존 백엔드 프레임워크와 최신 JavaScript 프런트엔드로 단일 페이지 앱(SPA)을 구축하는 방법을 알아봅니다.

Inertia.js란 무엇입니까?

Inertia.js는 개발자가 중간에 API 없이도 널리 사용되는 프런트엔드 및 백엔드 프레임워크를 사용하여 최신 SPA를 구축할 수 있는 도구입니다. 2019년 Jonathan Reinink가 만든 Inertia의 주요 아이디어는 기존 서버 측 프레임워크를 활용하면서 최신 SPA 구축 프로세스를 단순화하는 것이었습니다.

간단히 말하면 Inertia는 서버측 프레임워크와 클라이언트측 프레임워크를 함께 고정하는 접착제 역할을 하여 백엔드와 프런트엔드 간의 효율적인 통신을 보장합니다. Inertia를 사용하면 프런트엔드와 백엔드 또는 서버 측에 대해 두 개의 서로 다른 코드베이스를 유지하는 대신 단일체와 같은 단일 코드베이스에서 전체 앱을 개발할 수 있습니다.

Inertia.js는 시간이 지나면서 어떻게 바뀌었나요?

초기에는 Inertia는 Vue와 Laravel만 지원했습니다. 이후 릴리스에서는 더 많은 프레임워크에 대한 지원을 발전시키고 확장했습니다.

최신 Inertia 모놀리스는 서버 측 렌더링(SSR), 자동화된 자산 버전 관리, 페이지 구성 요소에 대한 지연 로딩, TypeScript 지원 등과 같은 중요한 기능을 제공합니다. 나중에 프레임워크 통합을 논의하면서 프레임워크 지원에 대해 살펴보겠습니다.

Inertia.js의 작동 방식

관성은 프런트엔드와 백엔드 사이의 어댑터와 같은 기능을 합니다. 다음과 같은 측면에서 일반 SPA와 다릅니다.

• SPA와 같은 경험을 제공하면서 서버측 라우팅을 유지합니다
• 전체 페이지 새로고침을 작은 가져오기 요청으로 대체
• 서버로부터 JSON 데이터를 반환받습니다
• 수분 공급에 필요한 JavaScript가 적습니다

Inertia 기반 앱을 사용하여 브라우저에서 요청이 이루어지면 먼저 백엔드에 도달합니다. 결과적으로 Inertia 응답이 생성되어 먼저 Inertia JavaScript 라이브러리가 포함된 전체 HTML 문서를 Inertia 클라이언트를 통해 브라우저에 반환합니다.

이후 탐색을 위해 Inertia 클라이언트는 가져오기 요청을 수행하고 그 대가로 서버로부터 JSON 데이터를 받습니다. 클라이언트는 수신된 데이터를 사용하여 프런트엔드를 업데이트하고 전체 페이지를 다시 로드하지 않고도 변경 사항이 앱에 반영됩니다.

다음은 전체 프로세스를 시각적으로 설명하는 순서도입니다.

추가 자료:

• Inertia.js 소개

Inertia.js를 선택하는 이유는 무엇입니까?

SPA에 기존 백엔드 프레임워크를 사용해야 하지만 프런트엔드를 원하는 대로 자유롭게 처리할 수 있는 상황에 있다면 Inertia 또는 유사한 도구를 사용하는 것을 고려해야 합니다.

Inertia는 Laravel에 맞게 맞춤 제작되었으며 Laravel 프로젝트에 더 큰 안정성을 제공합니다. Laravel 개발자이고 기본적으로 블레이드 템플릿이 제공하는 것보다 더 많은 작업을 수행하려는 경우 Inertia를 시도해 볼 수 있습니다.

Inertia가 친구가 될 수 있는 더 많은 사용 사례를 탐색할 수 있습니다. 다음 두 섹션에서는 Inertia 사용의 몇 가지 장단점을 다루며, 이는 앱 개발을 위해 Inertia를 선택할 때 충분한 정보를 바탕으로 결정을 내리는 데 도움이 될 것입니다.

Inertia.js의 단점

일반적으로 SPA의 몇 가지 알려진 단점은 여기서 논의하지 않습니다. 대신 개발 유틸리티로서 Inertia의 단점을 다루겠습니다.

유연성이 떨어짐

Inertia를 사용하면 앱의 프런트엔드와 백엔드를 단일 코드베이스로 유지 관리할 수 있습니다. 이러한 긴밀한 결합으로 인해 Inertia는 더 나은 유지 관리성, 문제 분리, 확장성, 독립적 개발, 기술 스택 유연성 및 기타 이유로 인해 프런트엔드와 백엔드를 별도로 유지 관리해야 하는 프로젝트에 적합하지 않습니다.

개발자 경험

Inertia와 같은 도구를 사용하면 탐색하고 학습할 수 있는 유틸리티가 스택에 하나 더 추가됩니다. 관성 관련 패턴과 규칙을 이해하는 데는 적당한 학습 곡선이 필요하므로 약간 짜증나고 시간이 많이 걸릴 수 있습니다.

프런트엔드 및 백엔드용 Inertia와 같은 도구에 적응하는 것은 아직 주류가 아니기 때문에 이를 사용하여 작업을 수행하는 표준 방법이 없습니다. 따라서 Inertia에서 전환하려면 특히 프런트엔드에서 상당한 리팩토링이 필요합니다.

또한 프런트엔드와 백엔드의 경계가 하나의 단일체로 일치하기 때문에 특히 API 및 단위 테스트의 경우 테스트 복잡성이 증가할 수밖에 없습니다.

소규모 커뮤니티

Inertia는 GitHub에 6,000개가 넘는 별표를 보유하고 있으며 85명이 넘는 기여자가 있습니다. Laravel 어댑터에는 2,000개가 넘는 별이 있습니다. 결합된 이러한 모든 통계는 Inertia만큼 많은 기능과 프레임워크 지원을 제공하지 않는 동일한 범주의 도구보다 훨씬 낮습니다.

그래서 이를 사용하여 구체적인 것을 만들고 싶은데 따라야 할 참조 및 가이드를 충분히 찾을 수 없는 상황이 있을 수 있습니다.

Inertia.js와 Livewire와 같은 일부 경쟁자를 정면으로 비교하려면 아래 표를 참조하세요.

추가 자료:

• Livewire와 Inertia.js: Laravel 프런트엔드 비교

기술적 고려사항

Inertia를 사용하면 앱을 먼저 오프라인으로 만드는 것이 복잡할 수 있습니다. 이 도구로는 합리적인 캐싱 전략을 수립하는 것이 간단하지 않기 때문입니다. Inertia는 기본적으로 각 요청마다 전체 페이지 구성 요소를 전송하여 페이로드 크기를 늘리는데, 이는 부분 다시 로드로 해결할 수 있다는 점도 명심해야 합니다.

Inertia.js의 장점

Inertia는 기존 클라이언트 측 렌더링 SPA에 비해 몇 가지 일반적인 장점을 가지고 있습니다. 주요 강점을 하나씩 살펴보겠습니다.

원활한 통합

Inertia는 인기 있는 프런트엔드 및 백엔드 프레임워크와 완벽하게 통합되며 데모 빌드에서 Vue에 대한 직접적인 지원을 제공합니다. 프런트엔드와 백엔드가 결합된 지원되는 프레임워크와 라이브러리에는 Laravel, Rails, Phoenix, Django, React, Vue 및 Svelte가 포함됩니다.

Laravel을 사용하면 Vite로 자산을 구축할 수 있으므로 Webpack 기반 Laravel Mix보다 훨씬 빠르고 생산적인 개발 경험을 제공할 수 있습니다. Vite 기반 자산 번들링은 JavaScript 기반 프런트엔드를 구현하는 것이 목표라면 완벽하게 적합합니다.

추가 자료:

• Inertia.js, Vue.js 및 AdonisJs 시작하기
• Laravel과 Vue를 사용하여 단일 페이지 앱 만들기

단순화된 개발

위에 설명된 것처럼 약간 열악한 개발자 환경에도 불구하고 Inertia는 단순화된 통합을 제공하므로 프런트엔드와 백엔드를 함께 작동하기 위해 별도의 API가 필요하지 않습니다. Inertia를 사용하면 스타터 키트를 사용할 수 있으며 개발을 위한 클라이언트 측 및 서버 측 환경을 모두 설정하기 위한 수동 설치 가이드를 제공합니다.

성능

Inertia 앱은 대규모 JavaScript 번들과 함께 서버에서 완전히 렌더링된 HTML을 클라이언트에 보내는 대신 클라이언트에서 비교적 빠르게 렌더링되는 초기 JSON 데이터가 포함된 최소한의 HTML 셸을 받습니다.

이를 통해 Inertia 기반 앱은 일반 클라이언트 측 렌더링 SPA보다 복잡성을 추가하지 않고도 초기 성능이 약간 향상됩니다. 또한 전체적으로 더 나은 품질의 UX를 추가하고 중요한 Core Web Vital 지표인 First Contentful Paint를 개선합니다.

추가 자료:

• SPA를 위한 핵심 웹 바이탈 모범 사례

SEO 친화적

관성 기반 앱은 서버 측 라우팅을 사용하므로 더 깔끔하고 쉽게 크롤링할 수 있는 URL이 생성됩니다. 이렇게 하면 각 페이지의 메타데이터를 매우 간단하게 처리할 수 있습니다. 또한 마지막 지점에서 설명한 것처럼 이러한 앱은 클라이언트에 전송되는 초기 데이터의 양이 적기 때문에 FCP 점수가 더 높을 가능성이 높습니다.

이 두 기능을 결합하면 더 나은 SEO가 가능하고 Inertia.js 앱이 기존 SPA보다 우위에 있습니다.

팁: 클라이언트 측 렌더링(CSR)이 FCP 측정항목에 부정적인 영향을 미치는 경우 Inertia.js의 SSR 플러그인을 사용하여 완전히 서버 렌더링된 앱을 선택하여 점수를 높일 수 있습니다.

번들 크기

Inertia.js는 프런트엔드와 백엔드 사이의 어댑터 역할을 하기 때문에 압축 및 gzip 압축 시 무게가 약 15kB에 불과할 정도로 매우 컴팩트합니다.

선적 서류 비치

Inertia 문서화를 통해 특히 Laravel을 백엔드 프레임워크로 사용할 때 즉시 시작할 수 있습니다. 또한 레거시 버전에 대한 업그레이드 가이드가 있으며 일반 개념부터 고급 개념까지 모두 한곳에서 다룹니다.

Inertia.js 시작하기

가장 인기 있는 두 가지 프런트엔드 및 백엔드 솔루션인 React 기반 프런트엔드가 있는 Laravel 기반 백엔드로 Inertia를 설정하는 방법을 알아봅시다. 이 GitHub 저장소에서 이 튜토리얼에서 다루는 모든 코드를 찾을 수 있습니다.

단순화를 위해 이 설정에서는 TypeScript를 사용하지 않습니다.

서버 측 설치

컴퓨터에 Laravel이 설치되어 있다고 가정하고 Laravel 설치 프로그램 명령을 사용하여 새 Laravel 프로젝트를 생성해 보겠습니다.

laravel new

개발자 터미널에 아래와 같은 내용이 표시되어야 합니다.

터미널에서 해당 명령을 실행하고 프로젝트 이름을 제공한 후 설치 프로그램은 시작 키트와 테스트 프레임워크를 선택하고 Git 저장소를 초기화하고 기타 설정 과정을 진행하도록 요청합니다.

Breeze 또는 Jetstream과 같은 스타터 키트는 데모 앱과 함께 기성 Inertia.js 기반 스캐폴딩을 제공하지만 우리는 이를 원하지 않습니다. 대신 처음부터 다시 설정하겠습니다.

추가 자료:

• Laravel Breeze의 Inertia-React 스택과 Next.js 및 Gatsby 비교
• Laravel과 AdonisJs: 어느 것을 사용해야 합니까?

설치 단계가 끝나면 데이터베이스를 선택하라는 메시지가 표시됩니다. 이 기사를 설명하기 위해 PostgreSQL을 사용하므로 pgsql을 선택했습니다. 데이터베이스 기본 설정에 따라 선택하세요.

다음으로 터미널에서 다음 작곡가 명령을 실행하여 Laravel용 Inertia.js 통합을 설치해야 합니다.

composer require inertiajs/inertia-laravel

위 명령은 Inertia 및 해당 종속성을 위한 Laravel 어댑터를 설치합니다. 이는 또한 Laravel과 Inertia가 함께 작동할 수 있는 기반을 마련할 것입니다.

그런 다음 Laravel에서 Inertia 요청을 처리하기 위해 Inertia 미들웨어를 추가해 보겠습니다. 이를 수행하려면 다음 artisan 명령을 사용하십시오.

laravel new

클라이언트측 설치

Laravel의 기본 블레이드 템플릿 대신 React를 사용하여 페이지와 구성 요소를 처리하겠습니다. 프로젝트 폴더에 CD를 넣고 다음 명령을 사용하여 React와 React DOM을 설치해 보겠습니다. 원하는 노드 패키지 관리자를 사용하여 이를 수행하세요.

composer require inertiajs/inertia-laravel

프로젝트 전반에 걸쳐 Vite를 자산 관리자로 사용할 것이므로 Vite의 React 플러그인도 개발 종속성으로 설치하겠습니다.

php artisan inertia:middleware

마지막으로 아래 명령을 사용하여 React에 대한 Inertia 지원을 추가합니다.

pnpm add react react-dom

이 설정에는 Tailwind CSS도 사용하고 있는데 이는 완전히 선택 사항입니다. Tailwind CSS도 설치하려는 경우 React 또는 Vue 앱으로 Tailwind CSS를 설치할 때 따르는 단계와 동일합니다.

구성

먼저 resources/js 디렉토리에서 app.js 파일을 찾아 이름을 app.jsx로 바꾸고 내용을 다음으로 바꿉니다.

pnpm add --save-dev @vitejs/plugin-react

위 변경 사항은 Inertia가 페이지를 식별하고 올바른 경로에 연결하는 데 도움이 됩니다.

다음으로 resources/view 디렉토리에 있는welcome.blade.php 파일의 이름을 app.blade.php로 바꾸고 내용을 다음으로 바꾸겠습니다.

pnpm add @inertiajs/react

웹페이지의 기본 HTML 구조 내에서 이 파일에는 다시 로드 실행, 스크립트 추가 등을 위해 특정 스크립트를 삽입하는 데 필요한 일부 Inertia 및 Vite 지시어가 포함되어 있습니다.

다음으로 관성 관련 요청을 처리하기 위해 bootstrap/app.php 파일에 필수 미들웨어를 추가합니다.

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css";

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
    return pages[`./Pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

또한 Vite와 함께 작동하여 그것이 제공하는 이점을 누릴 수 있도록 React 플러그인을 구성해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @viteReactRefresh
  @vite('resources/js/app.jsx')
  @inertiaHead
</head>
<body>
  @inertia
  <div id="app"></div>
</body>
</html>

마지막으로 다음 명령을 사용하여 Laravel과 React를 모두 실행해 보겠습니다.

<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
  ->withRouting(
    web: __DIR__.'/../routes/web.php',
    commands: __DIR__.'/../routes/console.php',
    health: '/up',
  )
  ->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
  })
  ->withExceptions(function (Exceptions $exceptions) {
    //
  })->create();

셸 스크립트를 작성하여 단일 터미널 창에서 이러한 명령을 함께 실행할 수 있지만, 간단하고 쉽게 유지하기 위해 지금은 두 개의 별도 터미널에서 실행하겠습니다.

이 명령이 성공적으로 실행되면 두 개의 로컬 URL을 볼 수 있습니다. Laravel 앱을 실행하여 Laravel 앱이 어떻게 보이는지 확인하세요. 이로써 Inertia가 포함된 기본 앱을 성공적으로 설정했습니다!

Inertia.js의 주요 기능

Inertia 앱으로 많은 일을 할 수 있습니다. 꼭 알아야 할 몇 가지 뛰어난 기능을 살펴보겠습니다.

페이지 및 레이아웃

다양한 레이아웃과 페이지를 더 효과적으로 구성하려면 resources/js 디렉토리에 두 개의 하위 디렉토리를 만드세요. 여기 별도의 디렉토리에서 구성 요소를 관리하고 원하는 대로 페이지에서 사용할 수도 있습니다.

다음은 기본 레이아웃의 간단한 예입니다.

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    laravel({
      input: "resources/js/app.jsx",
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "@": "/resources/js",
    },
  },
});

기본적으로 기본 레이아웃 역할을 하는 구성요소이므로 전용 레이아웃 폴더에 배치됩니다. 이제 다음 코드와 같이 MainLayout을 페이지의 구성 요소로 활용할 수 있습니다.

laravel new

다음은 MainLayout.jsx와 About.jsx가 Tailwind CSS에서 제공하는 스타일을 사용하여 작업 페이지를 함께 구성하는 방법을 간략하게 보여줍니다.

링크 및 라우팅

기존 Laravel 라우팅을 사용하면 새로운 경로를 쉽게 만들고 지난 세그먼트에서 배운 페이지에 연결할 수 있습니다. 파일 기반은 아니지만 라우팅은 관리가 매우 간단합니다. Express 및 Fastify와 같은 JavaScript 기반 백엔드 프레임워크를 사용해본 적이 있다면 Laravel에서 라우팅이 작동하는 방식에 이미 익숙할 것입니다.

routes/web.php 파일로 이동하여 새 경로를 추가하고 아래 코드와 같이 Inertia의 렌더링 메서드를 사용하여 관련 페이지를 렌더링합니다.

composer require inertiajs/inertia-laravel

Inertia의 동적 연결은 React 및 Next와 유사하며 아래와 같이 Inertia의 Link 구성 요소를 사용하여 수행할 수 있습니다.

php artisan inertia:middleware

아래 화면 캡처는 위 코드 블록에서 생성한 내용을 방금 배운 SPA와 유사한 탐색 동적 동작을 보여줍니다.

HTTP 요청(GET/POST/비GET 요청)

Inertia는 상태 및 양식 제출을 처리하기 위해 GET 및 POST 요청과 함께 작동하는 useForm 후크를 제공합니다. 또한 성공 또는 실패 메시지와 같이 서버에서 클라이언트로 전달된 공유 데이터에 액세스할 수 있는 usePage 후크를 제공합니다.

다음은 사용자 데이터를 로드하고 전송하기 위해 GET 및 POST 요청을 수행하는 간단한 예입니다. GET 요청은 Inertia에 의해 암시적으로 처리되는 반면, useForm 후크의 post 메소드를 사용하여 POST 요청을 만들어 서버에 데이터를 보냅니다.

pnpm add react react-dom

이 접근 방식을 사용하면 데이터베이스에서 데이터 목록을 가져오고 이를 HTML 테이블에 표시하는 페이지를 구성할 수 있으며, 아래 표시된 양식을 사용하여 이 데이터를 데이터베이스에 더 추가할 수도 있습니다.

진행률 표시기

Inertia.js는 NProgress 기반 진행률 표시를 제공합니다. App.jsx 파일을 설정하는 동안 이를 활성화하고 진행률 표시기에 대한 구성 설정을 제공할 수 있습니다.

pnpm add --save-dev @vitejs/plugin-react

NProgress 로딩 애니메이션이 어떤 모습인지 잘 모르신다면 여기에서 살짝 살펴보세요.

데이터베이스 통합

Laravel을 정기적으로 사용한다면 데이터베이스를 Inertia 설정에 통합하고 사용하는 데 많은 시간이 걸리지 않을 것입니다. .env 파일에 필요한 데이터베이스 자격 증명을 추가하고, 올바른 데이터베이스 드라이버를 사용하고 있는지 확인하고, config/database.php 파일을 검토하면 됩니다.

기존 데이터베이스에서 Laravel의 마이그레이션 시스템을 사용하여 필요한 데이터베이스 스키마를 정의할 수 있습니다. 저는 데이터베이스가 없었기 때문에 데이터베이스를 만들고 Laravel Seeder 메커니즘을 사용하여 가짜 사용자 데이터를 채워 프런트엔드에 표시했습니다. 그 이후에 제가 따랐던 몇 가지 단계는 다음과 같습니다.

• 앱 디렉토리에 내 사용자 데이터에 대한 모델을 생성하고 이 데이터에 관한 데이터베이스 요청을 처리하기 위한 HTTP 컨트롤러도 생성했습니다
• resources/js/Pages 디렉토리에 사용자 페이지를 생성하고 사용자 배열을 취하는 prop을 제공했습니다. 이 사용자 배열은 Inertia를 통해 본질적으로 이루어진 GET 요청을 통해 필요한 데이터를 가져옵니다. 데이터베이스에 데이터를 추가하기 위해 POST 요청을 할 수도 있습니다
• Routes/web.php 파일에 사용자 경로를 정의하고 여기에 HTTP 컨트롤러를 연결했습니다

Laravel 생태계를 처음 접하는 사람이나 Laravel을 사용하여 데이터베이스를 자주 사용하지 않는 사람의 경우 데이터베이스를 마이그레이션하고 채울 때 그보다 조금 더 시간이 걸릴 수 있습니다. 이러한 경우 구성 캐시를 지우면 캐시된 구성 옵션으로 인해 발생하는 오류를 제거하는 데 큰 도움이 될 수 있습니다.

Inertia.js 사용 사례

관성의 잠재적인 응용 분야는 매우 다양합니다. Inertia를 사용하여 Laravel을 최신 JavaScript 프런트엔드와 결합하면 강력한 백엔드 기능을 갖춘 모놀리식 앱의 전체 스택 개발이 단순화됩니다.

모든 팀이나 상황에 적합하지는 않지만 Inertia가 좋은 옵션이 될 수 있는 몇 가지 사용 사례는 다음과 같습니다.

• 템플릿 작성을 위해 블레이드에 의존하기를 원하지 않고 클라이언트 측 기능을 처리하기 위한 강력한 솔루션을 원하는 앱
• Laravel을 백엔드로 사용하지만 주로 JavaScript 기반 프런트엔드 프레임워크용으로 제작 및 유지 관리되는 최신 라이브러리를 활용하려는 오래된 앱
• 서버리스 대신 기존 서버 기술이 제공하는 활용을 즐기기 위해 Laravel 기반 백엔드로 이동할 계획인 최신 앱
• 검색 엔진에서 더 나은 가시성과 SSR의 성능 이점을 원하는 SPA
• PHP와 JavaScript를 모두 좋아하고 함께 사용하고 싶은 분들을 위한

Inertia.js vs. Livewire vs. 하이브리드

Inertia는 서버측 프레임워크와 클라이언트측 프레임워크 및 라이브러리를 연결하는 유일한 솔루션은 아닙니다. Livewire와 Hybridly는 각각의 장점과 단점을 지닌 인기 있는 두 가지 도구입니다. 옵션을 비교할 때 다음 사항을 고려해 보십시오.

• 커뮤니티 — Inertia.js는 Livewire에 비해 상대적으로 작은 커뮤니티를 가지고 있지만 Hybridly보다 더 나은 커뮤니티를 가지고 있습니다.
• 기능 — Livewire 및 Hybridly는 프런트엔드 프레임워크 구현을 지원하지 않는 반면 Inertia.js는 주요 JavaScript 기반 프런트엔드 솔루션을 지원하는 것으로 알려져 있습니다.
• 성능 — 대부분 구현에 따라 다르지만 Inertia.js 기반 SPA는 더 나은 인지 성능을 제공할 수 있는 반면 대부분의 페이지가 서버 렌더링이므로 Livewire 및 Hybridly를 사용하는 서버 렌더링 앱이 더 나을 수 있습니다. .
• 문서화 — Livewire와 Inertia.js는 꽤 새롭고 더 개선할 여지가 있는 Hybridly에 비해 문서화가 잘 되어 있습니다.

이 표는 귀하의 결정에 더 많은 정보를 제공하기 위해 이 세 가지를 비교하는 유용한 스냅샷을 제공합니다.

Feature	Inertia.js	Livewire	Hybridly
Server-side framework	Laravel, Rails	Laravel only	Laravel only
Client-side framework	Vue.js, React, Svelte	None (PHP-based)	Vue.js
SPA-like experience	Yes	Yes	Yes
Server-side rendering (SSR)	Optional	Yes	Yes
Real-time updates	No (needs additional setup)	Yes	Yes
Full-page reloads	No	No	No
Learning curve	Moderate	Low	Moderate
Component-based architecture	Yes	Yes	Yes
State management	Client-side	Server-side	Both
SEO-friendly	Good	Excellent	Excellent
Backend-driven UI	Partial	Full	Full
Progressive enhancement	Limited	Yes	Yes
File uploads	Supported	Native support	Supported
Pagination	Supported	Native support	Supported
Form handling	Client-side	Server-side	Both
Authentication	Supported	Native support	Supported
Authorization	Supported	Native support	Supported
Testing	Both client & server	Server	Both client and server
Ecosystem/Community	Small	Large	Small (newer)
Performance	Very good	Good	Very good
Bundle size	Larger (due to JS framework)	Smaller	Moderate
Offline support	Possible	Limited	Possible
Mobile app development	Possible	Not ideal	Possible

결론

이 채택 가이드에서는 Inertia.js가 무엇인지, Laravel과 같은 전통적인 백엔드 프레임워크와 React와 같은 최신 프런트엔드 라이브러리를 활용하는 하이브리드 애플리케이션을 만드는 데 Inertia.js가 어떻게 사용되는지 배웠습니다.

Inertia 사용의 장단점, 실제 적용 사례, Laravel을 사용하여 설정하는 예에 대해 배웠습니다. 가이드를 따르는 동안 문제가 발생하는 경우, 우리가 다룬 프로젝트에 대해 이 GitHub 저장소를 복제하는 것을 고려하거나 댓글을 남겨주시면 기꺼이 도와드리겠습니다.

---

새로운 기능을 구축하거나 성능을 향상시키기 위해 새로운 JS 라이브러리를 추가하고 있습니까? 만약 그들이 반대로 행동한다면?

프런트엔드가 점점 더 복잡해지고 있다는 것은 의심의 여지가 없습니다. 새로운 JavaScript 라이브러리와 기타 종속성을 앱에 추가하면 사용자가 알 수 없는 문제에 직면하지 않도록 더 많은 가시성을 확보해야 합니다.

LogRocket은 JavaScript 오류가 마치 자신의 브라우저에서 발생한 것처럼 재생하여 버그에 더욱 효과적으로 대응할 수 있게 해주는 프런트엔드 애플리케이션 모니터링 솔루션입니다.

LogRocket은 프레임워크에 관계없이 모든 앱에서 완벽하게 작동하며 Redux, Vuex 및 @ngrx/store에서 추가 컨텍스트를 기록하는 플러그인이 있습니다. 문제가 발생한 이유를 추측하는 대신 문제가 발생했을 때 애플리케이션의 상태를 집계하고 보고할 수 있습니다. LogRocket은 또한 앱 성능을 모니터링하여 클라이언트 CPU 로드, 클라이언트 메모리 사용량 등과 같은 측정항목을 보고합니다.

자신있게 구축하세요. 무료로 모니터링을 시작해 보세요.

위 내용은 Inertia.js 채택 가이드: 개요, 예시 및 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!