Server Action on client-component

Answered

Noronha posted this in #help-forum

2024-01-14T08:49:12.000Z

I'm using a server actions to fetch data from the backend from a client-component (Datatable).
Since I cant call the async server action from the client-component, my datatable changes the url params like:
?page=1&q=andr&sortField=driverName&sortDirection=asc

And then the page reloads and passes down the new data. It works great.
So then I was designing the page's skeleton. I put a 3sec delay to help design it.

No problem so far but when I clicked to change page (for example), the URL changes but there's no indication for the users that something is loading.
The page just changes when its done.
I have a video showcasing that here: https://we.tl/t-93kqolB5Fv

Any idea how can I improve the feedback to the user in those cases?
Is there a better way to do it (with server actions, I really dont want to use fetch and api endpoints) without changing the URL?

PS: I'm new to react/next. Its my first project, but I'm loving it!
Thank you guys

Answered by Ray

https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template/blob/365328a77aca93970527e580b534e7066d1bd990/app/search.tsx#L20

View full answer

24 Replies

@Noronha I'm using a server actions to fetch data from the backend from a client-component (Datatable). Since I cant call the async server action from the client-component, my datatable changes the url params like: `?page=1&q=andr&sortField=driverName&sortDirection=asc` And then the page reloads and passes down the new data. It works great. So then I was designing the page's skeleton. I put a 3sec delay to help design it. No problem so far but when I clicked to change page (for example), the URL changes but there's no indication for the users that something is loading. The page just changes when its done. I have a video showcasing that here: https://we.tl/t-93kqolB5Fv Any idea how can I improve the feedback to the user in those cases? Is there a better way to do it (with server actions, I really dont want to use fetch and api endpoints) without changing the URL? PS: I'm new to react/next. Its my first project, but I'm loving it! Thank you guys

Ray

2024-01-14T09:04:10.000Z

are you changing the url with router.push()?

try using it with useTransition hook

const [isPending, startTransition] = useTransition()
const router = useRouter()

const changeUrl = () => {
  startTransition(() => {
     router.push()
  })
}

NoronhaOP

2024-01-14T09:10:30.000Z

I'm using replace:

import { usePathname, useRouter, useSearchParams } from 'next/navigation'

 const searchParams = useSearchParams()
 const { replace } = useRouter()
 const pathname = usePathname()

 params.set('page', newPage.toString())
 replace(`${pathname}?${params}`)

@Noronha I'm using replace: import { usePathname, useRouter, useSearchParams } from 'next/navigation' const searchParams = useSearchParams() const { replace } = useRouter() const pathname = usePathname() params.set('page', newPage.toString()) replace(`${pathname}?${params}`)

Ray

2024-01-14T09:10:53.000Z

yep try useTransition

NoronhaOP

2024-01-14T09:11:10.000Z

Cool, thank you my friend. I'll try that ASAP

@Noronha Cool, thank you my friend. I'll try that ASAP

Ray

2024-01-14T09:11:29.000Z

https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template/blob/365328a77aca93970527e580b534e7066d1bd990/app/search.tsx#L20

Answer

NoronhaOP

2024-01-14T09:19:03.000Z

I think I did something wrong, but when I added the transition I'm now getting:

Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "13/01/2024, 21:44" Client: "13/01/2024 21:44"
See more info here: https://nextjs.org/docs/messages/react-hydration-error

I just added the hook and called before replace:

  const [isPending, startTransition] = useTransition()

    startTransition(() => {
      replace(`${pathname}?${params}`)
    })

// and disabled the button
      <Button
        onClick={() => handleClick('prev')}
        disabled={!hasPrev || isPending}
      >

Ray

2024-01-14T09:20:47.000Z

 startTransition(() => {
      replace(`${pathname}?${params}`)
    })

is this inside handleClick?

@Noronha I think I did something wrong, but when I added the transition I'm now getting: Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: "13/01/2024, 21:44" Client: "13/01/2024 21:44" See more info here: https://nextjs.org/docs/messages/react-hydration-error I just added the hook and called before replace: const [isPending, startTransition] = useTransition() startTransition(() => { replace(`${pathname}?${params}`) }) // and disabled the button <Button onClick={() => handleClick('prev')} disabled={!hasPrev || isPending} >

Samyar

2024-01-14T09:22:12.000Z

you should not write code directly inside your component it should be inside a useEffect or some callback funtion

@Ray ts startTransition(() => { replace(`${pathname}?${params}`) }) is this inside handleClick?

NoronhaOP

2024-01-14T09:23:34.000Z

Yes:

  const handleClick = (type: 'prev' | 'next') => {
    const params = new URLSearchParams(searchParams)
    const newPage = type === 'prev' ? page - 1 : page + 1

    params.set('page', newPage.toString())
    startTransition(() => {
      replace(`${pathname}?${params}`)
    })
  }

I use that function like:
onClick={() => handleClick('prev')}

@Noronha Yes: const handleClick = (type: 'prev' | 'next') => { const params = new URLSearchParams(searchParams) const newPage = type === 'prev' ? page - 1 : page + 1 params.set('page', newPage.toString()) startTransition(() => { replace(`${pathname}?${params}`) }) }

Ray

2024-01-14T09:25:32.000Z

does it work?

NoronhaOP

2024-01-14T09:25:54.000Z

Yes, it still works even with the error messages

Ray

2024-01-14T09:26:24.000Z

yes the error should be come from somewhere

where do you render the date 13/01/2024, 21:44"

NoronhaOP

2024-01-14T09:28:02.000Z

Inside the table I have a FormatDate:

export default function FormatDate ({ date }: { date: string }) {
  return (
    <span>
      {new Date(date).toLocaleString('pt-BR', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        timeZone: 'America/Sao_Paulo'
      })}
    </span>
  )
}

@Noronha Inside the table I have a FormatDate: export default function FormatDate ({ date }: { date: string }) { return ( <span> {new Date(date).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: 'America/Sao_Paulo' })} </span> ) }

Ray

2024-01-14T09:31:02.000Z

this is going to cause hydration warning, since the server and the client may not be in the same timezone

try to pass suppressHydrationWarning to the <span />

NoronhaOP

2024-01-14T09:32:29.000Z

aaaaaaah, yeah that worked

Thank you Ray, you're awesome. Should we fix t his hydration error in some other way, or its ok just to suppress the warning?

Ray

2024-01-14T09:33:52.000Z

I think it is ok