Next.js Discord

Discord Forum

Can I be redirected to another route after a while in a Next.js server component?

Answered
Great Dane posted this in #help-forum
Open in Discord
Great DaneOP
Can I do something like the following in an async server component: after ui is rendered, wait 3 seconds and redirect to another route?
By analogy, how it done in a client component:
useEffect(() => {
  function delay(ms: number): Promise<void> {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  }
  delay(3000);
  router.push('/');
}, []);

But can I get the same result in the app route's server component?
Answered by joulev
Technically it can be done by making an async page that await delay(3 seconds) then redirect(), with the page “content” being in the loading.tsx file

That said this is where client components should be used. Suspense/loading.tsx are all client components behind the scenes anyway, it is good to use it where it makes sense such as this case
View full answer

1 Reply

@Great Dane Can I do something like the following in an async server component: after ui is rendered, wait 3 seconds and redirect to another route? By analogy, how it done in a client component: useEffect(() => { function delay(ms: number): Promise<void> { return new Promise((resolve) => { setTimeout(resolve, ms); }); } delay(3000); router.push('/'); }, []); But can I get the same result in the app route's server component?
joulev
Technically it can be done by making an async page that await delay(3 seconds) then redirect(), with the page “content” being in the loading.tsx file

That said this is where client components should be used. Suspense/loading.tsx are all client components behind the scenes anyway, it is good to use it where it makes sense such as this case
Answer