Next.js Discord

Discord Forum

Running Server Action 2 times

Answered
Mallow bee posted this in #help-forum
Open in Discord
Mallow beeOP
Why does this run my server action function 2 times so it uses the router.push

export default function page({ params }) {
  const { data: session } = useSession();
  const [loading, setLoading] = React.useState(true);
  const router = useRouter();

  getUser(session?.user?.email).then((user) => {
    setTimeout(() => {
      const guildIds = user?.guildIds;

      if (!guildIds?.includes(params.guildId)) {
        router.push("/dashboard");
      } else {
        setLoading(false);
      }
    }, 1000);
  });

  return <div>{loading ? <>Loading</> : <>{JSON.stringify(params)}</>}</div>;
}
Answered by aardani
you use async function page and when you await something like await getUser() it will show the loading state
View full answer

23 Replies

Mallow beeOP
It works perfect when go to the route but when you reload it redcirets me to "/dashboard"
aardani
You can do all that without opting in to client components.
Loading: use loading.tsx
Push: use redirect()
getUser: just write the logic directly
useSession: use getServerSession()
its an antipattern to set the page.js or layout.js into client component
aardani
ofc
Mallow beeOP
Alr
@aardani ofc
Mallow beeOP
so the loading should just look like this right:

export default function Loading() {
  return (
    <div>Loading....</div>
  )
}
aardani
yeah
Mallow beeOP
Also where do comes the navigate comes from "next/navigation"
aardani
redirect() from next/navigation yes
@aardani redirect() from next/navigation yes
Mallow beeOP
how do i control the loading
is it automaticly
aardani
you use async function page and when you await something like await getUser() it will show the loading state
Answer
aardani
when its done awaiting it will swap out the return
@aardani It works' thank you!!
aardani
No problem! dont' forget to mark which message answers your question @Mallow bee
@aardani No problem! dont' forget to mark which message answers your question <@508700048452878347>
Mallow beeOP
Yes sure, but so i cannot use react in a server component, with the "getServerSession" etc
aardani
im sorry, but what do you mean?
"cannot use react in server component"
@aardani "cannot use react in server component"
Mallow beeOP
like "useState" etc, in this

import { getUser } from "@/app/actions";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";

export default async function page({ params }) {
  const session = await getServerSession();
  await getUser(session.user.email).then(async (user) => {
    if (!user.guildIds.includes(params.guildId)) {
      redirect("/?error=missing-permissions");
    }
  });

  return <div>page</div>;
}
aardani
well, useState is no longer needed to achieve your goal. But if you need more control, you can always opt in to client components
however, id advice to not mark the page.tsx itself as "use client". Instead, create, delegate, import a client component into it