Stream data from server component in NextJS 14 App Router

Question

I have two components: one on the client side, which is a form for writing comments, and another one on the server side for fetching data (comments). My question is, when I add a comment, the page does not refresh when the comment is added. However, when I add a delete button in the client-side component (because it must be mapped and have logic for authorization), the page refreshes when I delete a comment.

FYI, when I tried to add a delete button in the server-side component, the page did not refresh for the comment to disappear.

Is my server component :

<div>
     <h2 className='font-light text-xl justify-center flex'>Comment Section</h2>
            {blogs?.map((blog, index) => (
                <div key={index} className='m-8'>
                    <hr className='p-2' />
                    <div className="flex space-x-3 justify-between">
                        <div className="">{blog.name}</div>
                        <div className="">
                            <div className="text-sm font-light text-gray-500">{new Intl.DateTimeFormat('en-US', {
                                timeZone: 'Asia/Jakarta',
                                year: 'numeric',
                                weekday: 'long',
                                month: 'long',
                                day: 'numeric',
                                hour: 'numeric',
                                minute: 'numeric',
                                second: 'numeric',
                                hour12: false, // Format 24 jam
                            }).format(new Date(blog.created_at!))}</div>
                        </div>
                    </div>
                    <div className="font-light p-2">{blog.comment}</div>            
                    <DeleteComment blog={blog} />
                </div>
            ))}
        </div>

is the DeleteButton (client side) :

const DeleteComment = (blog: any) => {
    const user = useUser((state) => state.user)

    const deleteComment = async (blog: any) => {
      const result = await deleteCommentById(blog.blog.uuid)

       const { error } = JSON.parse(result)
        if (error?.message) {
            toast({
                title: "Fail to create Comment",
                description: (
                    <pre className="mt-2 w-full rounded-md bg-slate-950 p-4">
                        <code className="text-white">{error.message}</code>
                    </pre>
                ),
            })
            alert(error.message)
        } else {
            toast({
                title: "Successfully created " + blog.blog.id,
            })
        }
    }

  
  
    const isAuthorized = user?.id === blog.blog.user_id
    return (
        <div>
            {isAuthorized && <form ><Button onClick={() => deleteComment(blog)} className='flex items-center gap-2'>Delete</Button></form>}
        </div>
    )
}
export default DeleteComment

is my client component (form) :

<Form {...form}>
            {user && (
                <form onSubmit={form.handleSubmit(data => onSubmit({ id: id?.id, name: user?.display_name, user_id: user?.id, ...data }))} className="w-2/3 space-y-6">
                    <FormField
                        control={form.control}
                        name="comment"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className="text-semibold">Comment</FormLabel>
                                <FormControl>
                                    <Textarea
                                        placeholder="Write your comment here"
                                        className="resize-none"
                                        {...field}
                                    />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <Button type="submit">Submit</Button>
                    <Button onClick={test}>Delete</Button>
                </form>
            )}
        </Form>

I'm so curious about what the main problem is. Sorry, I did not find it in the documentation. Thank you very much for your assistance.

I try to add delete button to client component is works, but the problem is, it cant be maped and add authorize.

If you want to see problem, the project is deployed at yusufafif.vercel.app

here's the full code https://github.com/yusufmafif/blog

EDIT :

After one day, finally, I found the answer. I must create an action in the form tag to call the async function with the "use server" tag. Here is the code:

const DeleteComment = (blog: any) => {
const user = useUser((state) => state.user)

async function deleteComment () {
    const uuid = await blog.blog.uuid
    // "use server"
    deleteCommentById(uuid)
}
const isAuthorized = user?.id === blog.blog.user_id || user?.role === "admin"
return (
    <div>
        {isAuthorized && <form action={deleteComment}><Button type="submit" className='flex items-center gap-2'>Delete</Button></form>}
    </div>
)}