What should be my front facing server, Vue or Phoenix?

Does Vue contain a server? I thought it’s a frontend framework. In any case you should use Phoenix to serve the HTML and the related JS/CSS files. There’s no reason to have two servers on the backend where one can do the job.

I have developed with both a. Phoenix at front-end and b. VueJS on front-end with Phoenix on back-end including authentication and authorization.

My suggestion based on my experience is to use Phoenix on front end while integrating some VueJS components as needed in the html.eex files (if VueJS is used to render data from the server, then JSON based API end must be used, i.e. render results as JSON to be consumed by VueJS).

Maybe its a matter of personal taste, but Vue as a standalone SPA (with a phoenix JSON API) is way easier to work with than trying to integrate directly into phoenix. Not to mention the logical separation of concerns (e.g. you can’t just assign everything on a conn and hope for the best).

Edit:
Rereading the question again, why use Vue at all if you want to do purely SSR?

The Benefits of Server Side Rendering Over Client Side Rendering:

That means your browser will start rendering the HTML from your server without having to wait for all the JavaScript to be downloaded and executed. In both cases, React will need to be downloaded and go through the same process of building a virtual dom and attaching events to make the page interactive — but for SSR, the user can start viewing the page while all of that is happening.

I was under the impression Vue made much more sense for CSR when integrating with phoenix, as phoenix templates + jquery could handle pretty much everything you’d need if you wanted SSR.

We have a React clientside app that talks to Phoenix backend with token auth for API access access.

In your case you can have server-side rendering with Phoenix auth (cookie based) and ALSO frontend architecture talking to that API via token auth.

It’s really a balance for you to answer. I don’t recommend going 100% clientside. There are times when a server side rendered page is better, like for example a simple static about us page.

I view SSR as an optimization as your web app is less of a static page with some interactivity (ala jQuery) sprinkled in and becomes more of a SPA towards a progressive web app - specifically targeted to replace a native app on mobile devices. The initial CSR rendering on a mobile device can take long enough for the user to get bored and move on to something else. With SSR the first HTML is already there for the user to view (but not interact with) while JavaScript is still setting things up in the background.

Have a look at the various numbers on Hacker News readers as Progressive Web Apps to see loading times for various SSR/CSR approaches.

That being said Polymer HN does pretty well without SSR.

If you want SSR you can either let Phoenix render all the HTML and sprinkle in JS/Vue where needed, or you can completely decouple the frontend and the backend. In the latter case you acheive SSR using something like Nuxt.js, while the Phoenix app is a pure API serving only JSON.

If I were to make a JS-heavy app I would probably choose a decoupled solution. I think that’s that real question — what kind of app are you building and how much JS will it need.

sir, I want to use the goodness of Phjoenix and vue, actually it would be a csr + ssr thing.
to keep my code secure from hydration problem, i want to use vue as it handle things pretty well.
thanks for the replay

Thanks for your suggestion. Would like to discuss some more details regarding this phoenix - vue ssr setup. Dont want to clutter here. Can we discuss over some private channel - mail/slack or something that’s convenient for you?