How to create an "always dynamic component" (client and server)

[verheyenkoen]

Summary

I wrote a component which displays the relative time for a give timestamp prop using dayjs, like this:

export default function RelativeTime({ timestamp }) {
  return <time dateTime={timestamp}>{dayjs(timestamp).fromNow(true)}</time>;
}

It doesn't really matter whether this is used as a server component or client component. Both will work fine. However I want to make all pages that include it as a server component to be "force-dynamic", so I don't accidentally have a statically built page with a fixed relative date from the build stage.

I initially made this a pure client component (using "use client";) to enforce this, however that isn't always necessary. I always prefer server rendering as much as possible.

I also tried the new await connection() to enforce dynamicity but that requires the component to be made async which makes it unusable as a client component.

How do you make this work in both scenario's with just one component?

Additional information

No response

Example

No response