how can i save data in a server component, and access it from the client component?
Unanswered
American Robin posted this in #help-forum
American RobinOP
for example, i visit the /home site, and there generates a random number (5) on the server, how can i get that variable from the client component? without changin it?
78 Replies
American RobinOP
im just trying to build a little game, where the user has to guess a number for example, and the number is generated by the server side, and when the user makes a call, and trys 3, it will compare it with the server variable /data and then give an answer back if its correct or not, and even smth like "it has to be higher/it has to be smaller" without changin the value
is this possible?
You can use Server Actions for this. Just call the server action function from the client and return whatever response you need to
American RobinOP
could u give me an example? or a docs link
i dont know how this works
American RobinOP
mhmm oke
i hope this helps
do i still have to do this?
module.exports = {
experimental: {
serverActions: true,
},
}
module.exports = {
experimental: {
serverActions: true,
},
}
Yes
American RobinOP
1 question i dont know if my approach is good
An example from one of my projects https://github.com/leonlarsson/omnis-arg-next/blob/main/app/components/Input.tsx
American RobinOP
i did this so far-
ah lemme see
checkAnswer() returns some data from the server, which is them shown on the client
American RobinOP
mhmm
i see
i guess i have to read more about server actions
but what do u think about my approach
i dont know if its good or not
It works, but I don't really understand it
American RobinOP
api/guess/route.ts
import { NextResponse } from "next/server";
let secretNumber = Math.floor(Math.random() * 100) + 1;
export async function GET(request: Request) {
const users = [
{ id: 1, name: "things" },
{ id: 2, name: "random" },
{ id: 3, name: secretNumber },
];
return NextResponse.json(users);
}Guessing a number that is random each time doesn't make sense to me
American RobinOP
const FetchDataButton = () => {
return (
<button
onClick={() => {
fetchData();
}}
>
Get Data
</button>
);
};const fetchData = async () => {
try {
const response = await fetch("/api/guess");
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
};its always 19
so its not changin
when i refresh the site:
dunno tho if this is a good idea/approach
@American Robin so its not changin
Because you create the random number once
American RobinOP
ye
Move it inside the request if you want it to create it every request
American RobinOP
ye i dont want tocreate a new one
just after its guessed for example
I don't understand what you're trying to accomplish
American RobinOP
im trying smth like this:
u start the game
a random number gets generated on the server side
client side, you are guessing the number:
you send a 5 to the server, it look to the generated number, for example its 9
it tell you, its wrong, the number which has to be guessed is higher!
you send a 5 to the server, it look to the generated number, for example its 9
it tell you, its wrong, the number which has to be guessed is higher!
thats it
So you want to persist the generated number, but only per session?
American RobinOP
yes or if its guessed and the user says, "play again"
Then you'll likely need a database to store that data
American RobinOP
mhm :((
you sure??
No, but it's the first thing that came to mind
American RobinOP
ill try it one more time
but u think
i can do i with server actions?
Absolutely
American RobinOP
i guess i made it, but i dont know if this is good
tho
I think server actions technically just create endpoints for your app
American RobinOP
like an api?
Yes
American RobinOP
could you maybe add me?
as a friend, i cant add you
cause u disabled it
just if you want tho
No need
American RobinOP
oke :((
If you ask here, more people can see and help
American RobinOP
ill watch some videos about server actions i guess
@American Robin a random number gets generated on the server side
Rex
What did you want to do ? ur doing good
American RobinOP
hello!
i tried to make a simple game
where the number gets genereated by the server
and the client sends guesses to the server
at the server it gets evaluated
and then the client gets a response
i somehow got what i wanted
but i dont know if its clean code
Rex
what's the problem bro
Ur code is correct if that is what you wanted to do
American RobinOP
ye i guess x:
it works for now
Rex
xd