Inertia는 몇 가지 주요 방식으로 기존 Vue.js와 다르게 클라이언트 측 라우팅을 처리합니다.
1. 서버 측 렌더링:
- Inertia는 서버 측 렌더링을 사용하여 Vue 구성 요소를 렌더링합니다. 즉, 초기 페이지 로드는 서버에서 처리됩니다. 이 접근 방식은 기존 Vue.js 클라이언트 측 렌더링[2][4]에 비해 SEO 및 초기 로드 속도를 향상시킵니다.
2. 최소 JSON Prop:
- 서버가 새 경로에 대한 요청을 받으면 Vue 구성 요소의 이름과 필요한 소품이 포함된 최소한의 JSON 응답을 다시 보냅니다. 이 접근 방식은 전송되는 데이터 양을 줄이고 성능을 향상시킵니다[2][4].
3. 관성 링크 구성요소:
- Inertia는 클릭을 가로채고 XHR 요청을 트리거하여 서버에서 데이터를 가져오는 사용자 지정 'Link' 구성 요소를 제공합니다. 이 구성 요소는 전체 페이지를 다시 로드하지 않고도 페이지 콘텐츠가 동적으로 업데이트되도록 보장합니다[4].
4. Vue 라우터가 필요하지 않습니다:
- 관성은 모든 경로가 서버 측에서 정의되고 Laravel의 라우터에 의해 처리되므로 Vue 라우터가 필요하지 않습니다. 이는 개발 프로세스를 단순화하고 다중 라우팅 시스템을 관리하는 복잡성을 줄여줍니다[2][4].
5. 통합 프런트엔드 및 백엔드:
- Inertia는 Laravel과 완벽하게 통합되어 개발자가 프런트엔드와 백엔드 모두에 동일한 템플릿 언어(Vue.js)를 사용할 수 있습니다. 이 통합 접근 방식은 개발을 단순화하고 추가 구성의 필요성을 줄여줍니다[1][3].
이러한 차이점을 활용함으로써 Inertia는 Vue.js와 Laravel의 장점을 결합한 클라이언트 측 라우팅에 대한 고유한 접근 방식을 제공하여 보다 효율적이고 확장 가능한 개발 프로세스를 제공합니다.
인용:[1] https://github.com/inertiajs/inertia/issues/905
[2] https://inertiajs.com/routing
[3] https://jetstream.laravel.com/stacks/inertia.html
[4] https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/
[5] https://laracasts.com/discuss/channels/vue/inertia-vs-vue-pinia-and-router