How to execute client side code before everything with App routing
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
Hi! I want to run client side code before everything (or at least before every api request that i do in my different components).
With old pages routing, we were able to do int with the _app.tsx file, but I'm currently not able to find a good way of doing it.
I thought use the default layout, but it's only server side (because of metadata).
Does someone have an idea how I could do this?
Thanks in advance for your help!
With old pages routing, we were able to do int with the _app.tsx file, but I'm currently not able to find a good way of doing it.
I thought use the default layout, but it's only server side (because of metadata).
Does someone have an idea how I could do this?
Thanks in advance for your help!
Answered by Sloth bear
I've use a little "hack" I put a component containing nothing (with a UseEffect() running some code) in the Layout,
33 Replies
Sloth bearOP
I've use a little "hack" I put a component containing nothing (with a UseEffect() running some code) in the Layout,
Answer
Hi! I want to run client side code before everything (or at least before every api request that i do in my different components).
The reason for server side rendering is to run everything in the server first before hitting the client. Why would you want to run client side code first
@ᴉuɐpɹɐɐ > Hi! I want to run client side code before everything (or at least before every api request that i do in my different components).
The reason for server side rendering is to run everything in the server first before hitting the client. Why would you want to run client side code first
Sloth bearOP
To choose which url to do all the api call depending the website (localhost or production)
@Sloth bear To choose which url to do all the api call depending the website (localhost or production)
you can get that via the
headers().get('referer') and see if it has localhost or not in the serveralso if you host on vercel, then
process.env.VERCEL_URL becomes available (which is not on localhost)@ᴉuɐpɹɐɐ you can get that via the `headers().get('referer')` and see if it has localhost or not in the server
Sloth bearOP
I don't totally understanded the server vs client, I just put "use client" when my ide ask me honestly
There is it a limit on vercel on the number of things managed with the server? Isn't better to put everything on client side, so less compute on the server side?
There is it a limit on vercel on the number of things managed with the server? Isn't better to put everything on client side, so less compute on the server side?
@Sloth bear I don't totally understanded the server vs client, I just put "use client" when my ide ask me honestly
There is it a limit on vercel on the number of things managed with the server? Isn't better to put everything on client side, so less compute on the server side?
up to your use case, less client -> faster loading, more client -> less load on the server
but if you are using next.js id assume that you want to server render some stuff
since they are trying to tackle the problem of request waterfall
which is what you are currently.. doing 🫠
Sloth bearOP
the problem of request waterfall?
yeah, the problem of request waterfall
Sloth bearOP
I don't understand how I do a request waterfall in what I'm doing
I just check on google what is the request waterfall which seems to be a repetitive request (parent doing the request, child doing the request...)
But I don't understand how it fit with my case, can you explain more?
@ᴉuɐpɹɐɐ but if you are using next.js id assume that you want to server render some stuff
Sloth bearOP
I didn't choose the stack ahah 😅
@Sloth bear I don't understand how I do a request waterfall in what I'm doing
during initial request to site,
1. you request to the server, then the server return some pages
2. pages are sent to the client. but client still need more data,
3. client make request to the server (again) and return some data
4. but client still need more data...
1. you request to the server, then the server return some pages
2. pages are sent to the client. but client still need more data,
3. client make request to the server (again) and return some data
4. but client still need more data...
Here is why, again, you dont have to if it doesnt fit your use case
Sloth bearOP
We already have a python backend, which access to every database, etc
So I guess it doesn't fit for our case
You can still use Next.js as a backend proxy so that your user wont know the real URL of your python backend
@ᴉuɐpɹɐɐ You can still use Next.js as a backend proxy so that your user wont know the real URL of your python backend
Sloth bearOP
So how I'm suppose to do that? I need to do some routes on my Next "backend", do my request on the route of my next backend and make my next backend do request on the python backend?
yeah, dont need to use manual routes, you can use Server Actions to instantly create a route
you can fetch everything in the next.js backend to your python backend before sending the result to your client so that your client components dont have to make unecesary api fetch at request time
the client-server waterfall still applies even if you have custom backend :/
@ᴉuɐpɹɐɐ you can fetch everything in the next.js backend to your python backend before sending the result to your client so that your client components dont have to make unecesary api fetch at request time
Sloth bearOP
I don't completely understand how I'm suppose to do the call without manual routing, I guess you're talking about this : https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
I will read it tomorrow at work, is it ok for you if I ping you here or direcly DM you if I have other question?
I will read it tomorrow at work, is it ok for you if I ping you here or direcly DM you if I have other question?
here is fine
in terms of initial request you can fetch any necessary data in the server component then pass it to client component
in terms of data mutation, like performing an action in the runtime, you exclusively use server action to trigger next.js's backend code that run post request to your python server
in terms of data mutation, like performing an action in the runtime, you exclusively use server action to trigger next.js's backend code that run post request to your python server
@ᴉuɐpɹɐɐ in terms of initial request you can fetch any necessary data in the server component then pass it to client component
in terms of data mutation, like performing an action in the runtime, you exclusively use server action to trigger next.js's backend code that run post request to your python server
Sloth bearOP
Ok thanks I will look at this. But at the moment we use a hook, it necessary needed to be a client component right?
yeah
@ᴉuɐpɹɐɐ yeah
Sloth bearOP
Ok, I will try to look at this and will talk about it to my team to see what we prefer, longer loading time for the client or better performance for the server.
Thanks a lot for your help!
Thanks a lot for your help!
And have a good night (depending on your time zone ahah)