`<ServerOnly>` component (to render markup only once) · nuxt/nuxt#27073

(5 留言) (2 反應) (0 負責人)TypeScript (60,221 star) (5,607 fork)batch import

good first issueserver components🍰 p2-nice-to-have

描述

Describe the feature

I would like to add a footer to my page containing the generation timestamp. However, using new Date() does not really work as it is overriden with the current time after hydration. It would be great to have a <ServerOnly> component analog to the existing <ClientOnly> component.

I also tried to put it into defineAppConfig which is for "Public tokens that are determined at build time [...]" but that still leads to the date being hydrated on the client.

Additional information

Would you be willing to help implement this feature?
Could this feature be implemented as a module?

Final checks

Read the contribution guide.
Check existing discussions and issues.

貢獻者指南

技術棧: typescriptvuenodejs
領域: full stack
議題類型: feature
難度: 2
預計時間: 1-3 hours
活動狀態: fresh
清晰度: clear
前置要求: Vue component basicsNuxt project structureFamiliarity with ClientOnly component
新手友善度: 80
研究方向: Examine the existing `<ClientOnly>` component in the Nuxt codebase (likely in `packages/nuxt/src/app/components/` or similar). Understand its registration and usage within Nuxt's plugin system. Then create a corresponding `<ServerOnly>` component that renders its slot only during server side rendering, following the same patterns.