How would one create a SPA with Phoenix?

so on my website you’d login and afterwards you are able to watch some videos. Each user has some videos to his disposal but these are specific to the user (which courses he is taking etc.). My first question overall is:

  • Is this even a good usecase for an SPA? The reasons I am thinking about an SPA are these: After login, I do not need SEO, so there goes that drawback. While the user is on one site, the other sites could be prefetched already, so when he clicks on another video, the change to that video page is immediate (of course the video itself would need to get fetched only then, but the site change is immediate). There is also some stuff on each site which I would like to be reactive.

Now how I wanted to build this is as follows:

I have some server A that serves a public-facing part of the website (where google can land, users can register and login) and also serves an API. This server does user management. (and also payment for creating new accounts)

After login I just serve my SPA from a Next.js server B. The served react app interacts with server A by querying the API. A user will have normally 10-20 videos which are available to him, but these are specific to the user. Therefore all the sites of the SPA actually need some kind of server interaction (they need to fetch video on that site and maybe some other data about the video).

I have a few questions:

  • Is this the right way to build this kind of application?
  • What kind of authentication would server A use? JWT? Sessions? And why? What about cors?
  • Are there any drawbacks from using Phoenix for Server A instead of a javascript-based framework?

If you are using Next.js, why not just use it for All your Front End, since you are able to statically generate pages and server render. So you can make landing pages for front facing website and then continue with the same UI for the logged in part. Use Phoenix as an API at this point. It would handle all your registrations, payments and all the other business logic.

With this approach you can keep the UI/Theme consistent across all the front end, and if you ever wanted to expand the App to a mobile platform, you can use the same Phoenix API