What should I use for sending data to server in next.js?
Answered
Anay-208 posted this in #help-forum
Anay-208OP
I want to know any pros and cons of using this method, where:
@/lib/actions/login.ts:
client:
The advantage of this method is we don't have to add additional lines of code for fetch, as its done in the background.
The other method is simple fetch, which method would you recommend with reason
@/lib/actions/login.ts:
"use server";
export const login = async (email : string, name: string) => {
console.log("login executed")
const data = await initiateUserRegistrationByEmail(email, name);
if (data.insertedId) {
return { success: true }
} else {
return { success: false }
}
}client:
import { login } from "@/lib/actions/login";
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
login().then(data {
// Process data
})
}The advantage of this method is we don't have to add additional lines of code for fetch, as its done in the background.
The other method is simple fetch, which method would you recommend with reason
Answered by joulev
The question is basically server actions versus manual updates. For which my answer is:
* For data fetched in server components, server actions are significantly better, since it is tightly coupled with the router so is the only thing that can properly revalidate the various caches.
* For data fetched by client side rendering (swr/rq), use the mutation hooks provided by these libraries is better.
* Use raw fetch() is always an inferior method.
* For data fetched in server components, server actions are significantly better, since it is tightly coupled with the router so is the only thing that can properly revalidate the various caches.
* For data fetched by client side rendering (swr/rq), use the mutation hooks provided by these libraries is better.
* Use raw fetch() is always an inferior method.
12 Replies
Anay-208OP
bump
Anay-208OP
Bump x2
do not bump more than once a day
Anay-208OP
...
ok
Anay-208OP
Bump x3
@Anay-208 I want to know any pros and cons of using this method, where:
@/lib/actions/login.ts:
ts
"use server";
export const login = async (email : string, name: string) => {
console.log("login executed")
const data = await initiateUserRegistrationByEmail(email, name);
if (data.insertedId) {
return { success: true }
} else {
return { success: false }
}
}
client:
js
import { login } from "@/lib/actions/login";
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
login().then(data {
// Process data
})
}
The advantage of this method is we don't have to add additional lines of code for fetch, as its done in the background.
The other method is simple fetch, which method would you recommend with reason
Saint Hubert Jura Hound
Ive been using the next-safe-action package, it has middleware and validation integration and provides an easy to way to handle errors and return data from ur actions. This package makes using server actions a lot more developer friendly imo
@Saint Hubert Jura Hound Ive been using the next-safe-action package, it has middleware and validation integration and provides an easy to way to handle errors and return data from ur actions. This package makes using server actions a lot more developer friendly imo
Anay-208OP
I hope you've read my question
My questions exactly are:
- Pros and cons of each method
- which of the above method would you recommend
- Pros and cons of each method
- which of the above method would you recommend
Anyways, thanks for suggesting it. I was planning on using it
However, I need Answers to these questions.
The question is basically server actions versus manual updates. For which my answer is:
* For data fetched in server components, server actions are significantly better, since it is tightly coupled with the router so is the only thing that can properly revalidate the various caches.
* For data fetched by client side rendering (swr/rq), use the mutation hooks provided by these libraries is better.
* Use raw fetch() is always an inferior method.
* For data fetched in server components, server actions are significantly better, since it is tightly coupled with the router so is the only thing that can properly revalidate the various caches.
* For data fetched by client side rendering (swr/rq), use the mutation hooks provided by these libraries is better.
* Use raw fetch() is always an inferior method.
Answer