LostKobrakai
wolfiton
PWA in general
Yes the biggest one is that your security will be a very low priority(JWT in localStoarge), so if you make a site that doesn’t deal with processing cards or payments you should be alright, if not then don’t use it.
Node SSR
I don’t use node for my approach but Phoenix absinthe apollo with graphql and NUXT, that said I think you can generate SSR without node.Haven’t tried it yet though.
But this link should offer some support to my theory
Also i am starting to feel that JavaScript frameworks are over rated and phoenix with html.eex templates plus minimal javascript is the way to go forward. Because losing some fancy animation at route change are nothing compared to data leaks or a lot of other attacks.
dorgan
I’m writing the frontend for my Phoenix app in Nuxt, it was previously a Vue SPA but now I need SSR.
I was able to set up Nuxt to use httponly cookies with the phoenix app by allowing the frontend domain/host/port with Corsica.
To get the initial state needed for nuxt I set up an endpoint that returns the current user, permissions and settings that the nuxt server calls to fill the store.
I don’t use “permissions” to do authorization in the client but to decide what options to show the user and what pages can ve viewed. Real authorization happens at the server side.
Just make sure the server is properly secured and never trust the client.
achempion
security will be a very low priority(JWT in localStoarge)
In such case with localStorage you wouldn’t be able to render server side because you don’t have an access to the local storage.
And from the link at vue forum:
Yes you will need nodejs in your server. Although you still can use Nuxt in spa mode and generate the static content using Nuxt generate command
If you want SSR you need the ability to execute JS on server side hence the need of nodeJS.
wolfiton
Your approach works well if you are only after SSR but I am after PWA(offline first), so my fronted will need to work without back-end when the app has no internet.
If it is true then this trade off is a high price on performance.
dorgan
Which is not a problem, my app is a PWA as well. Being an offline PWA has nothing to do with using cookies.
If you need user data for offline tasks(such as username, some settings, but nothing sensitive like credentials of course), then store it in, say, localStorage, and fall back to it when you can´t connect to the server, for example. When buildinga PWA you can even setup a worker to cache requests for when the network is unreachable.
SSR with node is quite fast, node is not really that slow, and you would be using it only for the SSR part, which usually happens only once per user session. So even if node is a little bit slow, most of the time it’s not a big tradeof. Subsequent requests will be handled by phoenix since most of them will be queries to the graphql api.
wolfiton
I will have to test this and come back with my findings.
But still something is bothering me if you put in the Vuex store your user info, what are you actually storing there?
Just the
username
and no credential info? and you are ignoring completely the auth middleware of nuxt in favor of the backend logic?
Also does the node server for SSR comes bundled with nuxt? or i will have to use express or fastify for this?
dorgan
Anything required by the nuxt app to render the page: username, avatar, settings(such as the theme styles), and a list of permissions.
I do use the auth middleware, based on the user info in the store. If there’s a User, then there was a successful authetication and the user can view auth restricted pages. I don’t need credentials for that. But the REAL authentication and authorization happens at the backend(which is where the core app is). If the user is not logged in or do not have rights to do some actions, event if the nuxt app thinks it can and shows the user a restricted page, the backend will say NOPE and return an error message.
Always remember that the frontend can be tricked by the user to think that it can do more than what it really can. This is true with or without nuxt.
It comes bundled with nuxt.