gdub01
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 =)
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
mbuhot
Thanks for sharing your experience!
What would the key criteria be for you to confidently use a SPA architecture again?
gdub01
Good question! After thinking about it, I’d say:
1 offline support
2 large-traffic site that can use client-side caching to meaningfully reduce server load/cost
3 cross-browser support for complex ui components
4 building out clients for web and mobile apps simultaneously (ala react native for web, or perhaps flutter for web)
The first 3 things can totally be solved without an SPA too… but I think after a certain amount of JS additions, managing JS without an SPA can be worse than with an SPA.
The 4th item works if you know up front you’ll need ios, android and web clients, and you don’t need too many platform-specific features. In that case, I think it can be faster to use an SPA. A frontend developer can make changes across all three platforms in the same language… and there would be quite a bit of code reuse around data fetching and other things. I’ve often heard about 80% code reuse.