How to get data from the frontend in my server side page?
Answered
British Shorthair posted this in #help-forum
British ShorthairOP
Hi, I'm new to NextJS! 👋
I want to do a login form and therefore made a client component called LoginForm with a html form in it and two inputs. Now, I want to pass the form data onSubmit into the parents ssr-page. The LoginForm Client Component is located in the LoginPage, which is a server side rendered component. There I'm also handling my database operations with mysql. Now, I want to get the data from the client component as soon as the data gets submitted by the user and then work with it in the LoginPage server side component.
What's the easiest way for this?
Thanks in advance!
I want to do a login form and therefore made a client component called LoginForm with a html form in it and two inputs. Now, I want to pass the form data onSubmit into the parents ssr-page. The LoginForm Client Component is located in the LoginPage, which is a server side rendered component. There I'm also handling my database operations with mysql. Now, I want to get the data from the client component as soon as the data gets submitted by the user and then work with it in the LoginPage server side component.
What's the easiest way for this?
Thanks in advance!
Answered by B33fb0n3
the jsx inside your LoginPage is for rendering content. You can use an api route, to handle the inputs of your user. After that your flow looks like this:
User clicks submit button -> form
User clicks submit button -> form
onSubmit function will be called -> the function calls fetch to your api endpoint -> your api endpoint handles the request -> returns data if needed -> client (onSubmit function) handles the result -> done.7 Replies
@British Shorthair Hi, I'm new to NextJS! 👋
I want to do a login form and therefore made a client component called LoginForm with a html form in it and two inputs. Now, I want to pass the form data onSubmit into the parents ssr-page. The LoginForm Client Component is located in the LoginPage, which is a server side rendered component. There I'm also handling my database operations with mysql. Now, I want to get the data from the client component as soon as the data gets submitted by the user and then work with it in the LoginPage server side component.
What's the easiest way for this?
Thanks in advance!
the jsx inside your LoginPage is for rendering content. You can use an api route, to handle the inputs of your user. After that your flow looks like this:
User clicks submit button -> form
User clicks submit button -> form
onSubmit function will be called -> the function calls fetch to your api endpoint -> your api endpoint handles the request -> returns data if needed -> client (onSubmit function) handles the result -> done.Answer
British ShorthairOP
Thank you, I'll give that a shot! :)
@B33fb0n3 the jsx inside your LoginPage is for rendering content. You can use an api route, to handle the inputs of your user. After that your flow looks like this:
User clicks submit button -> form onSubmit function will be called -> the function calls fetch to your api endpoint -> your api endpoint handles the request -> returns data if needed -> client (onSubmit function) handles the result -> done.
British ShorthairOP
So the SSR Page Component is not involved in any way?
The client component directly fetches the API and gets its data back from it? 👀
The client component directly fetches the API and gets its data back from it? 👀
@British Shorthair So the SSR Page Component is not involved in any way?
The client component directly fetches the API and gets its data back from it? 👀
Yes, that’s correct. SSR is just rendering 🙂
British ShorthairOP
Thank you so much, I'll try that! :)
sure thing