Tutorial guy importing server component inside a client component, how is it safe?

[willow plover]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[rough elk]

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?

[crimson drift]

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

[rough elk]

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

[crimson drift]

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

[crimson drift]

good. If you want a full service solution, you might want to take a look at https://next-safe-action.dev/

[rough elk]

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

[rough elk]

Thank you, I will check it out

And my last question, can I use NextRequest inside this addTodo function? I want to get the current url of the page somehow

[crimson drift]

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

[crimson drift]

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

[rough elk]

This helped a lot, thank you

[rough elk]

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?

[crimson drift]

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}</>
}

[rough elk]

Thank you very much, I’m very grateful for your help!

[crimson drift]

happy to help. Please mark solution

[rough elk]

I will when I get back to my pc

[willow plover]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1257679137074708501 message)

[zinc jungle]

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.

[rough elk]

Sorry, it was a missclick