Few questions about nuxt
Hello!
1. I have external backend. It for example returns status of servers (is online, amount of users). When I use
useFetch backend receives 2 requests from client and server. Why? I found out that I can disable sendings requests from server, but it can make layout shift...
2. I have cookie based auth in my external backend. In vue I just was sending requests using axioms, and It worked, but now I want to do it proper way. Should I use nuxt-auth? I can change external api to use anything else. What are best practises?
3. I want to get random text from list with fretting messages with SSR. How to do it without hydration error? I can't just check if side is client, because it will also give error
4. When should I use hybrid rendering and when SPA? For example I have shop when user can but items on different paths, then he can go to bascket path where he can confirm buying items. Also there is complex dashboard where user can change parameters like address, password, name etc. Should I use SSR for bascket and items but SPA for user dashboard?
Sorry for taking your time, but I would like to create my nuxt app in proper way π6 Replies
Hi π
1 - we'd need a piece of code to see what's happening (in case of somethjing missing for example)
2 - nuxt-auth isn't fully ready yet, you can follow its progress here https://github.com/nuxt-community/auth-module. In the meantime you can use sidebase nuxt-auth
3 - there's some SSR friendly compsables/functions such as
useAsyncData, useFetch, useState you can take a look at !
https://nuxt.com/docs/api/composables/use-state#usestate
https://nuxt.com/docs/api/composables/use-async-data#useasyncdata
https://nuxt.com/docs/api/composables/use-fetch#usefetch (basically a useAsyncData for fetching)
4 - I don't really see the point of SSR in an auth context but you can still do it.1. https://nuxt.com/docs/getting-started/data-fetching#client-only-fetching Why it does that? What if backend returns different values (for example amount of requests in past minute, if you send request from client it will give hydration warning)?
2. Okay. But if I have external API should I use sidebase's nuxt-auth or create it myself? What about sending requests from server, server doesn't have cookie from browser... What do you recommend? Should I use cookie auth? I can implement auth using just fetch and middlewares.... But idk if it is good and recommended practice...
3. I don't get random text from api, I just have list in typescript and I show random element from this list.
4. So for every page with auth should I use SPA? Even if I use middleware
I found this: https://nuxt.com/docs/getting-started/data-fetching#pass-cookies-from-server-side-api-calls-on-ssr-response . So if server sends request it can set cookie in client. But their example is for what login in? I also don't understand useRequestEvent... They say
access the incoming request.. What it means? Request from browser to nuxt website? From website to somewhere else? From client to nuxt server?1- when you write nuxt/Vue SSR code, you write "universal" code that can be ran and will be executed on both client and server side. However composables can have different behaviour on client and server environment. For example, a useFetch in SSR will fetch and set the result in the payload. Once client side it will retrieve the payload (and not fetch again) to retrieve the state when SSR.
2- it's really up to you depending on you preferences. It's like using any library.when you use a library, bugs can occurs and you may not have the flexibility you wanted for some usage. When you write your own code, you can decide what you want as implementation and bugs can be fixed by yourself.
3- then you should use
useState
4- that depend, but usually I prefer using useLazyAsyncData/Fetch with server false to avoid any Auth issue.
5- when you make a call server side, the request doesn't have the request context. UseRequestEvent retrieve the event object (which has the request and response, it's part of nitro API) so it represent the incoming request (mostly from browser) of the current Vue app that is server side rendered.1. So when I useFetch in SSR it will send only one request to external backend (sends once from server and then in client it uses data from server's request)?
2. Okay
3. So I should run only on server, then set it using useState?
4. Okay
5. Thanks
3- use a useState as a Ref. The second argument is the initializer. Within it, return your randomised value.
1- yes except if you set
ssr: false. Also it's only fetched server side in SSR. Once in client side, you're app is basically an SPAGiant thanks for help!
I think I know how to create my first page π