Tutorial guy importing server component inside a client component, how is it safe?
Answered
Macao paper wasp posted this in #help-forum
Original message was deleted.
Answered by B33fb0n3
yes it is safe, because the function will be executed serverside as you can see on the directive on top
use server: (see attached). Like that this function will be executed serverside. But keep in mind, that everything that is passed to that function newTodo (in this case) is controlled by the client. So you might want to validate it before using it in sql statements to avoid sql injections22 Replies
Macao paper wasp
As you can see, he's importing this addTodo component into a client component, and inside this addTodo, he's creating entries in the database, is this safe?
@Macao paper wasp As you can see, he's importing this addTodo component into a client component, and inside this addTodo, he's creating entries in the database, is this safe?
yes it is safe, because the function will be executed serverside as you can see on the directive on top
use server: (see attached). Like that this function will be executed serverside. But keep in mind, that everything that is passed to that function newTodo (in this case) is controlled by the client. So you might want to validate it before using it in sql statements to avoid sql injectionsAnswer
@B33fb0n3 yes it is *safe*, because the function will be executed serverside as you can see on the directive on top use server: (see attached). Like that this function will be executed serverside. But keep in mind, that everything that is passed to that function newTodo (in this case) is controlled by the client. So you might want to validate it before using it in sql statements to avoid sql injections
Macao paper wasp
Got it! So if a component is imported into a client component, but I specifically write "use server" in the imported component, it will function as a server component still?
I'm validating inside this script with zod
@Macao paper wasp Got it! So if a component is imported into a client component, but I specifically write "use server" in the imported component, it will function as a server component still?
no, these things (
addTodo) are functions. Not components. The function will be translated to an endpoint and the client just calls this endpoint. That runs fully in the back and you don't need to worry about anything of doing that on your own@Macao paper wasp I'm validating inside this script with zod
good. If you want a full service solution, you might want to take a look at https://next-safe-action.dev/
@B33fb0n3 no, these things (addTodo) are functions. Not components. The function will be translated to an endpoint and the client just calls this endpoint. That runs fully in the back and you don't need to worry about anything of doing that on your own
Macao paper wasp
Okay, and what indicates that this is a function and not a component, so how can I distinguish the two? Sorry for this question, I'm really a beginner
@B33fb0n3 good. If you want a full service solution, you might want to take a look at https://next-safe-action.dev/
Macao paper wasp
Thank you, I will check it out
Macao paper wasp
And my last question, can I use NextRequest inside this addTodo function? I want to get the current url of the page somehow
@Macao paper wasp Okay, and what indicates that this is a function and not a component, so how can I distinguish the two? Sorry for this question, I'm really a beginner
For me components return only jsx (or null) and functions only return data (or nothing). And as you can see here, there is no jsx returned. This function will also be called as function
@Macao paper wasp And my last question, can I use NextRequest inside this addTodo function? I want to get the current url of the page somehow
you can't iirc. But the client can get the full url thought the window object. But be careful with it. I recommend you to get only parts of the url. You can get for example the dynamic parts with useParams or the searchparams with useSearchParams. You can also get nearly the full url when using usePathname
@B33fb0n3 you can't iirc. But the client can get the full url thought the window object. But be careful with it. I recommend you to get only parts of the url. You can get for example the dynamic parts with useParams or the searchparams with useSearchParams. You can also get nearly the full url when using usePathname
Macao paper wasp
I have a url like example.com/dashboard?project=example, and I want to get the 'project' value, so 'example', what's the best pracitce to get that?
@Macao paper wasp I have a url like example.com/dashboard?project=example, and I want to get the 'project' value, so 'example', what's the best pracitce to get that?
then you want to use
useSearchParams. Then you can get your project like:'use client'
import { useSearchParams } from 'next/navigation'
export default function SearchBar() {
const searchParams = useSearchParams()
const project = searchParams.get('project')
// URL -> `/dashboard?project=example`
// `project` -> 'example'
return <>Project: {project}</>
}@B33fb0n3 then you want to use ``useSearchParams``. Then you can get your project like:
tsx
'use client'
import { useSearchParams } from 'next/navigation'
export default function SearchBar() {
const searchParams = useSearchParams()
const project = searchParams.get('project')
// URL -> `/dashboard?project=example`
// `project` -> 'example'
return <>Project: {project}</>
}
Macao paper wasp
Thank you very much, I’m very grateful for your help!
@Macao paper wasp Thank you very much, I’m very grateful for your help!
happy to help. Please mark solution
Macao paper wasp
I will when I get back to my pc
for archival purposes, please do not delete the original question. if you want to get rid of it in the channel list, simply unfollow it.
Macao paper wasp
Sorry, it was a missclick
Wanted to mark it as solved