Can Phoenix LiveView be used in multi-page applications or does it have to be a SPA?

Can Phoenix LiveView be used in multi-page applications, unlike React/Vue/Blazor which seems to be targeted for SPA?

2 Likes

Corresponding tweet for this thread:

Share link for this tweet.

I don’t see any reason why not. After all, you can always set a link to go to a fresh page, whether that one has LiveView on it or not.

2 Likes

Yeah, LiveView webapps are kind of like anti-SPAs. You can find dozens of descriptions like this but here goes: Phoenix apps with LiveView pages are multi-page apps where some pages are regular http pages and some are LiveView pages, and the router, back buttons, urls and so on all work just like normal. If you want to only use LiveView pages in a Phoenix app that’s possible, though I think that typically at least login pages will be http.

The difference between traditional http pages and LiveView pages is that instead of an http connection which connects, sends html and data transfers and immediately disconnects, LiveView pages use a websocket connection which remains open, more like a telephone connection as an example, and push html and data changes on that page without reconnecting. (Normal Phoenix http pages are also great at establishing websocket connections, but aren’t designed to automatically send html changes over the wire.)

When you navigate from one LiveView page to another in the same app you’ll do it using the router and a new connection will be established, quite normal and delightfully boring. You can also have LiveView components inside of your LiveView pages, so basically LiveViews nested inside of other LiveViews, kind of SPA-ish but simpler.

Last, nothing stops you from using Vue, React, Svelte and so on inside of an app that has LiveViews, and even inside of LiveViews themselves (not saying it’s a necessarily a good idea). Here’s a library to help with using React components directly inside of LiveViews:

2 Likes

Thanks. Because I have been trying to find something too in React or Vue lately on using them in a multi-page application, but to no avail.

Thank you for this. :slight_smile: