Hey guys - I just finished my side project - misheneye.com (creates brand guides) - recently and used an spa - react (nextjs.org flavor). Wanted to share some thoughts..

Advantages

I was able to use react’s ecosystem. I chose material-ui.com for the ui, which saved quite a bit of work. The user gets decent default behavior that works across browsers.

Apollo is the client side consumer of absinthe’s graphql api and provides great caching options. You’re able to store fetched data on the client side and have fine grained control over updates of that data.

As the user switches pages, the graphql queries needed to support that page/view fetch from cache first, only falling back to the network if necessary. So navigation is quick, and there’s less load on the server/lookups from the db.

Disadvantages

Missed out on some of the advantage of phx generators.

Hit issues with react code that should be client-side only instead of SSR/statically generated.

Had to google for syntax switching back and forth from elixir to react.

Spent more time on devops + configuration.

Neutral

Phoenix obviously delivers server side rendered html by default. Nextjs allows you to compile/export your react app as static HTML files, or SSR it. I chose static so it’s just hosted by phoenix for now. The static content makes it SEO friendly… but I know I could SSR it at a later date to get the same SEO benefit, for more user-generated content.

Overall

Due to aggressive client-side caching, it’s slightly more efficient with the spa for data fetching because it fetches data less frequently… but there’s a larger javascript bundle for the client to download initially. So . Developing, however, took more time.

Were I to do it again now, I’d work harder to see if the SPA was truly required before going down that route to save quite a bit of time.

Also, gotta say, I love this community and the ecosystem. Absinthe with dataloader is great, as is phoenix and elixir itself… and really all the packages I’ve used. So thanks guys =)