ServerActions/ API and questions on "server only" and "use server"
Answered
Amur catfish posted this in #help-forum
Amur catfishOP
Question :
- Why would it work in the first case and not now?
- What are the conditions to call a function from "server only"?
- This temporary solution doesn't seem "clean/optimal", what would be the proper way?
- Is a route the optimal solution? If yes why, and what would be the point of serverAction if using the api is always the best solution?
Context:
I have 2 important files :
- action.tsx -> "use server"
- session.tsx -> import "server only"
To log in (register works similarly),
I use a hook useActionState -> call login function -> do things + call function createSession from session.tsx
Works well !
However when I want to do the exact same for logout:
Hook useActionState -> call logout function -> call function deleteSession from session.tsx
I have an issue saying that I am importing a function for server only in a client and it doesn't work.
Solution:
Copy the function from session.tsx to action.tsx
Let me know if you need more content to understand my questions
- Why would it work in the first case and not now?
- What are the conditions to call a function from "server only"?
- This temporary solution doesn't seem "clean/optimal", what would be the proper way?
- Is a route the optimal solution? If yes why, and what would be the point of serverAction if using the api is always the best solution?
Context:
I have 2 important files :
- action.tsx -> "use server"
- session.tsx -> import "server only"
To log in (register works similarly),
I use a hook useActionState -> call login function -> do things + call function createSession from session.tsx
Works well !
However when I want to do the exact same for logout:
Hook useActionState -> call logout function -> call function deleteSession from session.tsx
I have an issue saying that I am importing a function for server only in a client and it doesn't work.
Solution:
Copy the function from session.tsx to action.tsx
Let me know if you need more content to understand my questions
Answered by James4u (Tag me if needed)
@Amur catfish The difference between "server only" vs "use server" is that
- "use server" is a next.js directive that declares a server action (for mutation)
- "server only" prevents it being shared to the client
- "use server" is a next.js directive that declares a server action (for mutation)
- "server only" prevents it being shared to the client
53 Replies
@Amur catfish The difference between "server only" vs "use server" is that
- "use server" is a next.js directive that declares a server action (for mutation)
- "server only" prevents it being shared to the client
- "use server" is a next.js directive that declares a server action (for mutation)
- "server only" prevents it being shared to the client
Answer
you can find a discussion here as well
https://github.com/vercel/next.js/discussions/55314
https://github.com/vercel/next.js/discussions/55314
Amur catfishOP
Thank you, I think i understand better the difference now 😁 .
Would you have any answers to the last 4 questions of my post?
Would you have any answers to the last 4 questions of my post?
Also I have a new one ahah.
If a file with 'use server' call an action from the file 'server only' it's not going to crash unless the file 'use server' has been shared to the client right?
If a file with 'use server' call an action from the file 'server only' it's not going to crash unless the file 'use server' has been shared to the client right?
Amur catfishOP
Correct me if I am wrong :
In the log in case, because we use a form, it is sent to the server, so it's calling from the server the createSession function to the 'server only' so no conflict.
However when I call the logout function when the button is clicked, the file is shared to the client. So calling a function of the "server only" create a conflict and crash .
The correct solution would be to use a route who would call the function from the 'server-only' because in that cas it would call it from the server and not from the client
In the log in case, because we use a form, it is sent to the server, so it's calling from the server the createSession function to the 'server only' so no conflict.
However when I call the logout function when the button is clicked, the file is shared to the client. So calling a function of the "server only" create a conflict and crash .
The correct solution would be to use a route who would call the function from the 'server-only' because in that cas it would call it from the server and not from the client
Fuck yeah I don't know if I am 100% correct but I feel like it thanks man!!!
yeah, it won't be crashed as long as it's not used in the client side
but not sure why a file with "use server" is gonna call an action from the file with "server only"
as using "use server" it's already a server action
Amur catfishOP
For safety
The correct solution would be to use a route who would call the function from the 'server-only' because in that cas it would call it from the server and not from the clientCan't agree with you on this
Amur catfishOP
how would you do?
before we go along away form the point
can you show me your codebase with "server only"?
if it's not private
Amur catfishOP
Yes sure!
I am using this function:
export async function deleteSession() {
const cookieStore = await cookies();
cookieStore.delete('session');
console.log('log out')
redirect('/');
}
const cookieStore = await cookies();
cookieStore.delete('session');
console.log('log out')
redirect('/');
}
why do you use "server only" for this codebase? I think "use server" is enough
Amur catfishOP
It's a session.tsx file, actually this function is not really important just like you said, but I thouthg that it was more "readable" to make everything session related inside this file
But it's also faster to do it directly in the action.ts file.
@Amur catfish please be clear on the communication, I am not much following you
I only asked in for which codebase you use "server only"
oh, I found it
session.tsx -> import "server only"it was originally posted
Amur catfishOP
yes
so can you show me the codebase of session.tsx?
I don't think it's valid
Amur catfishOP
It's too big to be sent but basically it's this:
function encrypt, decrypt, createSession, verifySession, updateSession, deleteSession, getUserIdFromSession
function encrypt, decrypt, createSession, verifySession, updateSession, deleteSession, getUserIdFromSession
I thought it's a UI component or something
you can copy paste it, if you are allowed
I really need to know the code to see if it's really something requires "server only"
Amur catfishOP
no no. I am building the profile page which is a Client component but I have a button to log out, which call action from action.ts 'use server' which call function from session.tsx 'server only'
well @Amur catfish as I see, there's nothing requires "server only"
and also Next.js 15 has security updates on server actions
https://nextjs.org/blog/next-15#enhanced-security-for-server-actions
https://nextjs.org/blog/next-15#enhanced-security-for-server-actions
jic you missed this
personally I think you are overkilling
also why is it
.tsx ? - it was confusing meAmur catfishOP
Ok ok, well actually this is just a project to learn next so i try to go deep. But if it's uncessary then I don't need it i guess
Mb i meant ts ahah
in case you will also like this
I feel like this is action.ts
Amur catfishOP
yes
I mean, the component where your "Log out" button is located in
Amur catfishOP
ah sorry
I am still working on it so it's not "cleaned"
okay no worries
just wanted to see if it's a server component but yeah it's a client component
no way to pass a server action to this client componnt as it uses a function inside "server only" code
just use "use server", it should be enough
@Amur catfish also feel free to close this thread by marking a solution if you don't have any futher questions
Amur catfishOP
Thanks for your time