Inertia.js는 서버 측 애플리케이션이 Inertia.js 프로토콜을 구현하여 작동합니다. 이 프로토콜은 두 가지 유형의 요청을 처리합니다.
Inertia.js 작동 방식
-
초기 페이지 로드: 사용자가 애플리케이션을 처음 방문할 때, 서버는 전통적인 Rails 애플리케이션과 같이 완전한 HTML 응답을 반환합니다. 이 HTML에는 필요한 자산과 초기 페이지 데이터를 JSON 형식으로 담은 data-page 속성의 루트 <div> 요소가 포함됩니다.
-
이후 페이지 방문: Inertia.js의 컴포넌트를 클릭하면, X-Inertia 헤더를 포함한 AJAX 요청이 서버로 전송됩니다.
-
서버 응답: Rails 애플리케이션은 X-Inertia 헤더를 통해 Inertia 요청을 인식하고, 렌더링할 페이지 컴포넌트 이름, 필요한 데이터, 새 페이지 URL, 현재 자산 빌드 버전을 포함하는 JSON 응답을 반환합니다. Inertia.js는 이 데이터를 사용하여 전체 페이지 새로고침 없이 페이지 콘텐츠와 브라우저 주소 표시줄의 URL을 업데이트합니다.
-
데이터 지연 로딩이나 부분 업데이트를 위한 기능도 제공됩니다.
Rails 통합 가이드
inertia_rails 젬은 제너레이터를 통해 Rails 애플리케이션에 Inertia.js를 쉽게 통합할 수 있도록 지원합니다.
- 초기 설정:
- rails new inertia_rails_example –skip-js –skip-asset-pipeline로 새 Rails 앱을 생성합니다.
- bundle add inertia_rails 및 bin/rails generate inertia:install 명령을 실행하여 Vite, Tailwind CSS, React 등 필요한 프런트엔드 도구를 설치하고 구성합니다.
- 이 과정에서 InertiaExampleController와 InertiaExample.jsx 컴포넌트가 자동으로 생성되어 예시 페이지를 제공합니다. 컨트롤러는 render inertia: “컴포넌트이름”, props: { 데이터 } 형식으로 React 컴포넌트에 데이터를 전달합니다.
- CRUD 리소스 생성:
- bin/rails generate inertia:scaffold Post title:string body:text published_at:datetime 명령을 통해 Post 모델, 컨트롤러, 뷰, 프런트엔드 컴포넌트(Index, Edit, Show, New, Form 등)를 포함한 CRUD 리소스를 생성할 수 있습니다.
- 폼 처리: 컨트롤러의 inertia_share 헬퍼는 플래시 메시지를 모든 Inertia.js 응답에 공유합니다. update 액션에서 유효성 검사 오류 발생 시, redirect_to … inertia: { errors: @post.errors }와 같이 오류를 inertia 키에 직렬화하여 리다이렉트합니다.
- 프런트엔드 Form 컴포넌트는 @inertiajs/react의 useForm 훅을 활용하여 폼 상태 관리, 제출, 유효성 검사 오류 표시를 간소화합니다. Link 컴포넌트는 전체 페이지 새로고침 없이 페이지 이동을 가능하게 합니다.