Vue with InertiaJS in Rails Application

1. What is InertiaJS?

Inertia is a new approach to building classic server-driven web apps. we call it the modern monolith. Inertia is created to simplify the building of modern single-page applications (SPAs) by leveraging existing server-side frameworks. It allows developers to create SPAs using classic server-side routing and controllers, without the need to build an API.

Here's how it works:

• First visit page:
  
  
  
  
• Visit same domain:
  
  
  
  
• To simplify understanding, Inertia replaces your application’s view layer. Instead of utilizing server-side rendering through Ruby templates, the views returned by your application are JavaScript page components. This setup allows you to develop your entire frontend using Vue, while still benefiting from the productivity features of your preferred server-side framework (such as Rails).
  
  
• Additionally, Inertia will work as a bridge to connect data from Vue to Rails and vice versa. This integration makes it easier to set and retrieve data, similar to the Rails-JQuery-HTML workflow.
  
  
• Handle props from BE (Ruby) through Inertia:
  
  
  
  
• Get props from Vue component:
  
  

2. Why we choose InertiaJS?

During the pilot, we attempted to test and adapt it to our service. Although not everything can match 100 percent, we observed that it operates more smoothly on current service than previous solutions on old services:

• Setup & Develop faster: The process is quicker and more efficient.

• Easier to understand interactions between FE and BE: It simplifies the comprehension of frontend (FE) and backend (BE) activities.

• Handling Inertia form submissions: This feels very similar to managing classic HTML form submissions.

• Manual Inertia visits/requests: Inertia also supports making visits or requests programmatically via JavaScript, which is accomplished using the router.visit() method.

Additionally, since our service is still small, we are uncertain about its impact on larger services. However, we believe that it might help us reduce the time required to handle and process data between the frontend and backend

3. Setup and using

Backend

Just add the inertia rails gem to your Gemfile

gem 'inertia_rails'

Frontend

You can set up the frontend frameworks (Vue/React) in Rails with Vite

Add vite_rails into your Gemfile

gem 'vite_rails'

Then follow the instructions of Vite Ruby to set it up. 

After that, follow https://legacy.inertiajs.com/client-side-setup to set up the frontend framework.

4. Different points of using

With Inertia, instead of responding with a full HTML document, it returns a JSON response with an encoded page object (https://inertiajs.com/the-protocol#the-page-object). 

In additional, Inertia passes data from Rails to Vue as props, simplifying the process since there is no need to pass data through an API or install additional gems (like gon)

5. Pros and cons

Pros:

1. Reactive Components: Vue.js's reactive components work seamlessly with Inertia.js, providing a dynamic and responsive user experience without full page reloads.
2. Simplified Development: Inertia.js allows you to write your Vue.js components and manage server-side interactions with less boilerplate, simplifying the development process.
3. No Need for an API: Since Inertia.js handles the communication between the server and the client, you can avoid the complexity of building and maintaining a separate API.
4. Unified Codebase: Both the frontend and backend code live in the same repository, which can streamline development workflows and reduce context switching.
5. Server-Side Routing: You can use server-side routing logic, which can be more familiar to developers with a traditional web development background.

Cons:

1. Tighter Backend-Frontend Coupling: The tight coupling between the backend and frontend might not be ideal for projects that require a more decoupled architecture, such as those with multiple frontend clients.
2. Learning Curve: Developers need to learn both Inertia.js and Vue.js, as well as understand how they work together, which can add to the initial learning curve.
3. Performance Overhead: Inertia.js sends page data with each navigation, which could lead to performance overhead compared to a fully decoupled frontend that only fetches the data it needs.
4. Less API Reusability: Without a dedicated API layer, reusing backend logic for other applications (like mobile apps) or third-party integrations can be more challenging.
5. Potential Overfetching: Inertia.js might send more data than necessary for each request, as it relies on the server to provide the entire page's data, which could be inefficient for large applications.

When deciding whether to use Inertia.js with Vue.js, it's important to weigh these pros and cons against the specific needs and goals of your project, as well as the preferences and expertise of your development team.

6. Conclusion

Inertia is not a bad choice if you're looking to experiment with something new. It is well-suited for small to medium services, being both simple and easy to implement. It still has limitations but it’s good in certain scenarios. I hope you find this article helpful.