Login Form
Answered
JJSenpai posted this in #help-forum
JJSenpaiOP
I have a login form in NextJs 14. The login page consists of 3 screens, first is email and name, second is create password , third is select list items. The first screen in frontend checked for regex, second screen calls api for create account, if all is ok the third screen is loaded where user can add list of items which will be posted on database and later fetched on navbar. I am confused whether to create this form Server Side or Client side as I dont really understand the advantages of both. Do let me know if you can help.
Also I have a progress bar which is common in all three screens. Will be helpful if you can tell me how to handle this as well.
Also I have a progress bar which is common in all three screens. Will be helpful if you can tell me how to handle this as well.
Answered by averydelusionalperson
check this once, I'm fetching data required in the page (server component), showing form (client component), search bar (client component), showing data through table (server side rendered), custom pagination (client component).
29 Replies
the steps would be client ofcourse
and use server actions for calling api
login
-> page.tsx (server component)
-> MainForm.tsx (client component, main steps logic)
-> Step1.tsx (client component)
-> ... other steps (client component)
Or you can have all those steps in MainForm.tsx itself
-> page.tsx (server component)
-> MainForm.tsx (client component, main steps logic)
-> Step1.tsx (client component)
-> ... other steps (client component)
Or you can have all those steps in MainForm.tsx itself
Nile Crocodile
i stick to client components when it comes to forms still
doing it with a server action means its making a request before validating, causing a delayed error message and an extra request
id say do the whole thing is a client componentent since it still get SSR'd
@Nile Crocodile doing it with a server action means its making a request before validating, causing a delayed error message and an extra request
making a request before validatingWDYM by this
@averydelusionalperson and use server actions for calling api
JJSenpaiOP
How does server action help in all this?
use multiple server actions?
1st for creating account, and next for adding list of items.
JJSenpaiOP
I don't exactly understand what server action does, can you help?
I mean, you can use server actions instead of fetching api, but if you already have external api not written in next.js, you can use fetch ig.
but, you're gonna have all forms in client component.
but the page is gonna be server component.
JJSenpaiOP
Ok, so you think I should create form in page.tsx, and sent the data from the form to login flow component
Correct?
check this once, I'm fetching data required in the page (server component), showing form (client component), search bar (client component), showing data through table (server side rendered), custom pagination (client component).
Answer
JJSenpaiOP
Thanks for your help @averydelusionalperson , I'll remention you if that's alright for further questions.
Sure, glad I can help 🫡
@averydelusionalperson > making a request before validating
WDYM by this <:thinq:1158595784938365018>
Nile Crocodile
server action still means making a request to the backend. if you do the validation only in the server action that means you are waiting for a trip to the backend to check for validity of the data
I do validation in frontend using zod, and react-hook-form
Nile Crocodile
exactly
thats what i meant
thats the better approach imo instead of attaching a server action to the form and validating the from data there
yeah, I don't use action to the form, I've client form, and just have a submit function
better IMO
Nile Crocodile
you can have server action as a submit function as well
yeah, that's what I meant
Nile Crocodile
yep