服务器端渲染

¥Server-side rendering

Radix 基元可以在服务端渲染。然而，在 React 18 及以下版本中，基元依赖于 hydration 来获取 id。

概览

¥Overview

服务器端渲染或 SSR，是一种在服务器上将组件渲染为 HTML 的技术，而不是仅在客户端渲染。

¥Server-side rendering or SSR, is a technique used to render components to HTML on the server, as opposed to rendering them only on the client.

静态渲染是另一种类似的方法。它会在构建时而不是每次请求时将页面预渲染为 HTML。

¥Static rendering is another similar approach. Instead it pre-renders pages to HTML at build time rather than on each request.

你应该能够通过这两种方法使用我们所有的基础组件，例如使用 Next.js、Remix 或 Gatsby。

¥You should be able to use all of our primitives with both approaches, for example with Next.js, Remix, or Gatsby.

疑难解答

¥Gotcha

React 18 以下版本中的基础组件依赖于 id 的 hydration（用于 aria 属性）来避免服务器/客户端不匹配错误。

¥Primitives in React versions less than 18 rely on hydration for ids (used in aria attributes) to avoid server/client mismatch errors.

换句话说，对于屏幕阅读器用户来说，交互时间 的等效性将取决于 JS 包的下载速度。如果你想在服务器端生成 ID 以改善此体验，我们建议你升级到 React 18。

¥In other words, the equivalent of Time to Interactive for screen reader users will depend on the download speed of the JS bundle. If you'd like to generate ids server-side to improve this experience, we suggest upgrading to React 18.