7 ms·

Inertia.js – Build React, Vue, or Svelte apps with server-side routing

142 points by rob 2y ago

begueradj 2y ago
My experience with using Inertia.js for Laravel has always been smooth and pleasant. But I can't say the same with translations/localisation.
- 0xblinq 2y ago
  Translations are a pain in the "SPA world". Having to load every single string from your entire application is something I don't like at all. I wish at some point we have a solution where we can just create a bundle per language so we can get code splitting, etc and just ship what's necessary for your locale. For the Inertia project I work on at my job, we just use a "frontend" translation solution and keep the Rails translations system just for the backend.
  - cheald 2y ago
    We do actually have per-language code splitting with React/Vite. We essentially just have a map of [language, loader], where the loader utilizes lazy imports. Vite is smart enough to split those all out of the main bundle and they get loaded on demand as expected. const LOCALE_MAP: any = { en: () => document.body.dataset["appEnv"] === "development" ? Promise.resolve({ default: {} as LocaleMap }) : import("@locales/admin.en.compiled.json"), fr: () => import("@locales/admin.fr.compiled.json"), es: () => import("@locales/admin.es.compiled.json"), ... }; Then we consume it in a component which accepts the language key, lazy-loads the bundle by just calling `LOCALE_MAP[key]()`, and then uses it as the string translation set for a context function which looks up keys in a dict. Super simple.
    - 0xblinq 2y ago
      This is still loading all strings for the current language, right? (Don’t tell me about having the option to manually do separate bundles like “common”, “admin”, etc… that’s just more madness)
      - cheald 2y ago
        Yes, it's all the strings per language, for the SPA. We also have services which we can use to request a bundle of strings from the backend, which I guess could in theory be an avenue for JIT translation on the frontend, but so far the per-language bundle splitting has kept things managable for us.
- ncphillips 2y ago
  Really? What's been the issues? We have our app fully translated and it's seemed fine.
calexanderaz 2y ago
Inertia is pretty interesting! Recently, Elixir / Phoenix started supporting it: https://youtu.be/uyfyFRvng3c https://youtu.be/uyfyFRvng3c
rmsaksida 2y ago
How good is the Rails integration? I know Inertia is very popular in the Laravel community, but I rarely see it being mentioned among rubyists.
- efields 2y ago
  The React example is 2 years old but doesn't look that different than what I would do today: https://github.com/BrandonShar/inertia-rails-template https://github.com/BrandonShar/inertia-rails-template The rails adapter is up to date, sponsored: https://github.com/inertiajs/inertia-rails?tab=readme-ov-file https://github.com/inertiajs/inertia-rails?tab=readme-ov-fil...
- chao- 2y ago
  I became aware of Intertia from a Ruby shop some time in 2022, who had good things to say, along the lines of "We could not ship as fast as we do without it." At work we are exploring Inertia to migrate parts of a long-lived Rails application quickly-but-gradually into an SPA. Have not gone live with the first feature yet, but so far a proof-of-concept and our exploration have been positive. By "quickly-but-gradually", I mean that some pages will remain server rendered, and gradually more migrate to being browser-rendered, but each new page or slice of functionality is very quick to port over. If you have any sort of viewmodel, presenter, or form object abstraction in your server-rendering architecture, it is much faster to just turn that into JSON and use Interia than it is to convert everything into pure JS/TS and generalize a set of APIs to serve the frontend. Of course YMMV depending on your existing architecture and needs.
- 0xblinq 2y ago
  At work we replaced a super messy hotwire/stimulus frontend with Inertia+React and we're super happy about it, no issues at all. The project is a lot easier to maintain and Inertia just does what it says it does.
- dyogenez 2y ago
  Really curious about this too. react-rails is deprecated, so the choice seems to be react_on_rails or inertia.js.
banashark 2y ago
Adonis has great support for inertia builtin. Very quick to get started. https://docs.adonisjs.com/guides/getting-started/installation#inertia-starter-kit https://docs.adonisjs.com/guides/getting-started/installatio... Docs here: https://docs.adonisjs.com/guides/views-and-templates/inertia https://docs.adonisjs.com/guides/views-and-templates/inertia Using inertia with SSR is very nice for the combination of: * I want to have simple server-rendered views, with added client side sprinkling * I want to be able to use off-the-shelf components like complex data grids to build fast * I want to minimize API communication headaches
deleted 2y ago
[deleted]
lessname 2y ago
I really like the server side routing part of Inertia and that you can pass data to the frontend directly in the first request without needing to do an additional http request (altough this might be a bit problematic for sensitive information in case the sites are cached). However, there are also things that make it feel gimmicky: - The resolve function createInertiaApp runs more than once (mainly) on the first page load causing a re-render and it seems like there is no plan to fix that in near feature https://github.com/inertiajs/inertia/issues/1595 https://github.com/inertiajs/inertia/issues/1595 / https://github.com/inertiajs/inertia/issues/1091 https://github.com/inertiajs/inertia/issues/1091 - There are issues like this where they could at least merge the PR to improve the documentation as there seem to be many people to misunderstand the usage the function but it did not happen https://github.com/inertiajs/inertia/issues/1631 https://github.com/inertiajs/inertia/issues/1631
- deleted 2y ago
  [deleted]
miohtama 2y ago
Is there any functionality that is not offered by SvelteKit? SvelteKit is batteries including SSR/web server solution for Svelte and works beautifully together, as they are tightly coupled.
- izietto 2y ago
  Yes, It works with any backend
- samldev 2y ago
  I switched from Svelte/SvelteKit to Svelte/Laravel and my productivity went through the roof. Same would apply with Rails or probably other batteries included backends. SvelteKit gives you SSR but that’s it. Laravel/Rails/etc gives you database, queues, real time support, authentication, authorization, the list goes on. I plan to make my next YouTube video making my case for why Laravel is better with Svelte than SvelteKit is https://youtube.com/@samldev https://youtube.com/@samldev
  - miohtama 2y ago
    Thank you. I asked about SvelteKit vs. Inertia, not Laravel.
    - halfcat 2y ago
      It’s not really a valid comparison. Inertia isn’t a full stack solution like SvelteKit. You pair Inertia with a backend. The whole point of it is it bridges the backend you know (Laravel, Rails, Django) with frontends (React, etc), without having to mess with JSON APIs.
      - miohtama 2y ago
        SvelteKit is not a “full” (depending on the definition what full means) stack solution either, and is commonly used with backends like Django or Rails. For example, it does not have its own ORM.
    - 2y ago
losthobbies 2y ago
There is a really good adocast channel on YouTube going over this and it's integration with Adonisjs https://youtube.com/playlist?list=PL9dIWiKCV571S3ILiADMKlZS4i6uDs3j8&si=EMqwWOKZ5dOfgfdK https://youtube.com/playlist?list=PL9dIWiKCV571S3ILiADMKlZS4...
halfcat 2y ago
How difficult is it to troubleshoot Inertia when something breaks? That was my only fear when I toyed with Inertia, Django, and Svelte for an afternoon. When I’d get an error it seemed obscure or not indicative of the underlying cause. What’s everyone’s experience? Inertia seems like magic. And that’s what scares me a little.
- ncphillips 2y ago
  My team of 5-6 devs has been using Inertia for a year now. I really don't think that Inertia is magic. Some of us have 10 years experience, some 2 years. I don't think anyone on the team has had to troubleshoot Inertia. Nothing with Inertia has ever broken. Juniors have never gotten confused by how it works. It is just a simple bit of glue between your Vue app and your backend. The docs are good, and it overall just feels solid/stable. Super excited to see the new changes that are coming too!
deleted 2y ago
[deleted]
nsonha 2y ago
Is this similar to React Server Actions?
mmerlin 2y ago
At the Laracon it was estimated the new version 2 of inertia will be released in October with new features like multiple async requests, polling, infinite page scroll with smart background loader, etc
jitl 2y ago
It’s funny, this is how we built apps in 2014-era Rails at Airbnb, and by 2015 we were doing server-side rendering of some React components too. We had a thing to pop a React component into our regular rails views as a “partial”. <%= render_react_component('MyComponent.js', :name => 'Hypernova The Renderer') %> https://github.com/airbnb/hypernova?tab=readme-ov-file#rails https://github.com/airbnb/hypernova?tab=readme-ov-file#rails
- jrajav 2y ago
  Wishing this (Hypernova) was still maintained at all! We've been eyeing it, and it would be an absolute perfect fit for our Rails / React-heavy shop that is close to requiring SSR. As is, it seems like the only viable, supported solution in this space is Shakacode's.
  - jitl 2y ago
    It’s really not a lot of code to do this. I’m sure you could study the codebase a bit and then write your own in-repo and have a great time. If I were writing a Rails app tomorrow I’d make my own, although the Shakacode docs looked fine too.
tamimio 2y ago
This is good if you would compile your node app into a binary, everything in one place.
dSebastien 2y ago
I really like Inertia. For my project, I have chosen yo use Laravel with the Jetstream starter kit, converted to React. It works quite well for my current use cases. https://github.com/knowii-oss/knowii https://github.com/knowii-oss/knowii
- adrum 2y ago
  I've used this package several times to automate the Vue to React chore. Works pretty well. https://github.com/ozziexsh/laravel-jetstream-react https://github.com/ozziexsh/laravel-jetstream-react
adrum 2y ago
Here's a server-side community adapter our team has been using for ASP.NET Core. It works pretty well! I helped contribute the Vite helper to bring HMR and ease of integration. https://github.com/kapi2289/InertiaCore https://github.com/kapi2289/InertiaCore
wetpaws 2y ago
[dead]
lakomen 2y ago
Eh... This needs Go support. In Go everyone doing SSR is a htmx goon, which is terrible. Also why use PHP or Ruby, both as slow as JS instead of Next Nuxt or SvelteKit? Only reason I could think is traditional shared hosting compatibility.
- deleted 2y ago
  [deleted]

142 points by rob 2y ago

My experience with using Inertia.js for Laravel has always been smooth and pleasant. But I can't say the same with translations/localisation.

0xblinq 2y ago
Translations are a pain in the "SPA world". Having to load every single string from your entire application is something I don't like at all. I wish at some point we have a solution where we can just create a bundle per language so we can get code splitting, etc and just ship what's necessary for your locale. For the Inertia project I work on at my job, we just use a "frontend" translation solution and keep the Rails translations system just for the backend.
- cheald 2y ago
  We do actually have per-language code splitting with React/Vite. We essentially just have a map of [language, loader], where the loader utilizes lazy imports. Vite is smart enough to split those all out of the main bundle and they get loaded on demand as expected. const LOCALE_MAP: any = { en: () => document.body.dataset["appEnv"] === "development" ? Promise.resolve({ default: {} as LocaleMap }) : import("@locales/admin.en.compiled.json"), fr: () => import("@locales/admin.fr.compiled.json"), es: () => import("@locales/admin.es.compiled.json"), ... }; Then we consume it in a component which accepts the language key, lazy-loads the bundle by just calling `LOCALE_MAP[key]()`, and then uses it as the string translation set for a context function which looks up keys in a dict. Super simple.
  - 0xblinq 2y ago
    This is still loading all strings for the current language, right? (Don’t tell me about having the option to manually do separate bundles like “common”, “admin”, etc… that’s just more madness)
    - cheald 2y ago
      Yes, it's all the strings per language, for the SPA. We also have services which we can use to request a bundle of strings from the backend, which I guess could in theory be an avenue for JIT translation on the frontend, but so far the per-language bundle splitting has kept things managable for us.
ncphillips 2y ago
Really? What's been the issues? We have our app fully translated and it's seemed fine.

calexanderaz 2y ago

Inertia is pretty interesting! Recently, Elixir / Phoenix started supporting it: https://youtu.be/uyfyFRvng3c https://youtu.be/uyfyFRvng3c

rmsaksida 2y ago

How good is the Rails integration? I know Inertia is very popular in the Laravel community, but I rarely see it being mentioned among rubyists.

efields 2y ago
The React example is 2 years old but doesn't look that different than what I would do today: https://github.com/BrandonShar/inertia-rails-template https://github.com/BrandonShar/inertia-rails-template The rails adapter is up to date, sponsored: https://github.com/inertiajs/inertia-rails?tab=readme-ov-file https://github.com/inertiajs/inertia-rails?tab=readme-ov-fil...
chao- 2y ago
I became aware of Intertia from a Ruby shop some time in 2022, who had good things to say, along the lines of "We could not ship as fast as we do without it." At work we are exploring Inertia to migrate parts of a long-lived Rails application quickly-but-gradually into an SPA. Have not gone live with the first feature yet, but so far a proof-of-concept and our exploration have been positive. By "quickly-but-gradually", I mean that some pages will remain server rendered, and gradually more migrate to being browser-rendered, but each new page or slice of functionality is very quick to port over. If you have any sort of viewmodel, presenter, or form object abstraction in your server-rendering architecture, it is much faster to just turn that into JSON and use Interia than it is to convert everything into pure JS/TS and generalize a set of APIs to serve the frontend. Of course YMMV depending on your existing architecture and needs.
0xblinq 2y ago
At work we replaced a super messy hotwire/stimulus frontend with Inertia+React and we're super happy about it, no issues at all. The project is a lot easier to maintain and Inertia just does what it says it does.
dyogenez 2y ago
Really curious about this too. react-rails is deprecated, so the choice seems to be react_on_rails or inertia.js.

banashark 2y ago

Adonis has great support for inertia builtin. Very quick to get started. https://docs.adonisjs.com/guides/getting-started/installation#inertia-starter-kit https://docs.adonisjs.com/guides/getting-started/installatio... Docs here: https://docs.adonisjs.com/guides/views-and-templates/inertia https://docs.adonisjs.com/guides/views-and-templates/inertia Using inertia with SSR is very nice for the combination of: * I want to have simple server-rendered views, with added client side sprinkling * I want to be able to use off-the-shelf components like complex data grids to build fast * I want to minimize API communication headaches

deleted 2y ago

[deleted]

lessname 2y ago

I really like the server side routing part of Inertia and that you can pass data to the frontend directly in the first request without needing to do an additional http request (altough this might be a bit problematic for sensitive information in case the sites are cached). However, there are also things that make it feel gimmicky: - The resolve function createInertiaApp runs more than once (mainly) on the first page load causing a re-render and it seems like there is no plan to fix that in near feature https://github.com/inertiajs/inertia/issues/1595 https://github.com/inertiajs/inertia/issues/1595 / https://github.com/inertiajs/inertia/issues/1091 https://github.com/inertiajs/inertia/issues/1091 - There are issues like this where they could at least merge the PR to improve the documentation as there seem to be many people to misunderstand the usage the function but it did not happen https://github.com/inertiajs/inertia/issues/1631 https://github.com/inertiajs/inertia/issues/1631

deleted 2y ago
[deleted]

miohtama 2y ago

Is there any functionality that is not offered by SvelteKit? SvelteKit is batteries including SSR/web server solution for Svelte and works beautifully together, as they are tightly coupled.

izietto 2y ago
Yes, It works with any backend
samldev 2y ago
I switched from Svelte/SvelteKit to Svelte/Laravel and my productivity went through the roof. Same would apply with Rails or probably other batteries included backends. SvelteKit gives you SSR but that’s it. Laravel/Rails/etc gives you database, queues, real time support, authentication, authorization, the list goes on. I plan to make my next YouTube video making my case for why Laravel is better with Svelte than SvelteKit is https://youtube.com/@samldev https://youtube.com/@samldev
- miohtama 2y ago
  Thank you. I asked about SvelteKit vs. Inertia, not Laravel.
  - halfcat 2y ago
    It’s not really a valid comparison. Inertia isn’t a full stack solution like SvelteKit. You pair Inertia with a backend. The whole point of it is it bridges the backend you know (Laravel, Rails, Django) with frontends (React, etc), without having to mess with JSON APIs.
    - miohtama 2y ago
      SvelteKit is not a “full” (depending on the definition what full means) stack solution either, and is commonly used with backends like Django or Rails. For example, it does not have its own ORM.
  - 2y ago

losthobbies 2y ago

There is a really good adocast channel on YouTube going over this and it's integration with Adonisjs https://youtube.com/playlist?list=PL9dIWiKCV571S3ILiADMKlZS4i6uDs3j8&si=EMqwWOKZ5dOfgfdK https://youtube.com/playlist?list=PL9dIWiKCV571S3ILiADMKlZS4...

halfcat 2y ago

How difficult is it to troubleshoot Inertia when something breaks? That was my only fear when I toyed with Inertia, Django, and Svelte for an afternoon. When I’d get an error it seemed obscure or not indicative of the underlying cause. What’s everyone’s experience? Inertia seems like magic. And that’s what scares me a little.

ncphillips 2y ago
My team of 5-6 devs has been using Inertia for a year now. I really don't think that Inertia is magic. Some of us have 10 years experience, some 2 years. I don't think anyone on the team has had to troubleshoot Inertia. Nothing with Inertia has ever broken. Juniors have never gotten confused by how it works. It is just a simple bit of glue between your Vue app and your backend. The docs are good, and it overall just feels solid/stable. Super excited to see the new changes that are coming too!

deleted 2y ago

[deleted]

nsonha 2y ago

Is this similar to React Server Actions?

mmerlin 2y ago

At the Laracon it was estimated the new version 2 of inertia will be released in October with new features like multiple async requests, polling, infinite page scroll with smart background loader, etc

jitl 2y ago

It’s funny, this is how we built apps in 2014-era Rails at Airbnb, and by 2015 we were doing server-side rendering of some React components too. We had a thing to pop a React component into our regular rails views as a “partial”. <%= render_react_component('MyComponent.js', :name => 'Hypernova The Renderer') %> https://github.com/airbnb/hypernova?tab=readme-ov-file#rails https://github.com/airbnb/hypernova?tab=readme-ov-file#rails

jrajav 2y ago
Wishing this (Hypernova) was still maintained at all! We've been eyeing it, and it would be an absolute perfect fit for our Rails / React-heavy shop that is close to requiring SSR. As is, it seems like the only viable, supported solution in this space is Shakacode's.
- jitl 2y ago
  It’s really not a lot of code to do this. I’m sure you could study the codebase a bit and then write your own in-repo and have a great time. If I were writing a Rails app tomorrow I’d make my own, although the Shakacode docs looked fine too.

tamimio 2y ago

This is good if you would compile your node app into a binary, everything in one place.

dSebastien 2y ago

I really like Inertia. For my project, I have chosen yo use Laravel with the Jetstream starter kit, converted to React. It works quite well for my current use cases. https://github.com/knowii-oss/knowii https://github.com/knowii-oss/knowii

adrum 2y ago
I've used this package several times to automate the Vue to React chore. Works pretty well. https://github.com/ozziexsh/laravel-jetstream-react https://github.com/ozziexsh/laravel-jetstream-react

adrum 2y ago

Here's a server-side community adapter our team has been using for ASP.NET Core. It works pretty well! I helped contribute the Vite helper to bring HMR and ease of integration. https://github.com/kapi2289/InertiaCore https://github.com/kapi2289/InertiaCore

wetpaws 2y ago

[dead]

lakomen 2y ago

Eh... This needs Go support. In Go everyone doing SSR is a htmx goon, which is terrible. Also why use PHP or Ruby, both as slow as JS instead of Next Nuxt or SvelteKit? Only reason I could think is traditional shared hosting compatibility.

deleted 2y ago
[deleted]