1

I have a server component that reads from the database:

import { db } from "@utils/database";

export async function UsersLayout() {
  let users = await db.query(...);
  // ...

  return (
    <ul>
      {users.map(user => 
        <li key={user.id}>{user.name}</li>
      )}
    </ul>
  )
}

How can I make this component re-render every 60 seconds? Since this is a server component I cannot use useEffect and setTimeout...

I'm playing around with Nextjs.13

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
  • 1
    Forget re-rendering every `60` seconds, you cannot re-render a server component, since it cannot have `useState`(https://beta.nextjs.org/docs/rendering/server-and-client-components#moving-client-components-to-the-leaves). You can think of them as PHP-style code, but in JSX. See [https://www.shivamjha.io/blog/react-server-components#when-not-to-use-server-components-](When to not use Server Components) – Shivam Jha Dec 26 '22 at 12:22
  • @ShivamJha thanks for the blog article. I don't understand one thing - I've read that you can interleave Server and Client Components. So if the server component is nested under the client component then by updating the client component, server component should re-render? – Tomasz Mularczyk Dec 26 '22 at 12:39
  • Server Components can be nested inside child component [as children only](https://beta.nextjs.org/docs/rendering/server-and-client-components#importing-server-components-into-client-components). So, the server component will be just sent as plain HTML & CSS. You can confirm this by adding a console inside the parent server component & check re-rendering the children (Client Component) in the browser – Shivam Jha Dec 26 '22 at 19:36
  • 1
    This may help you out: https://twitter.com/leeerob/status/1607475053351813120?s=20&t=15GWhrcWNh5jLT9DhbvoDQ – Shivam Jha Dec 27 '22 at 12:27

0 Answers0