Server-side rendering

Radix Primitives는 서버에서도 렌더링할 수 있어요. 다만 React 18 미만 버전에서는 Primitives가 id를 위해 hydration에 의존해요.

출처: 문서

본문

서버 사이드 렌더링(SSR)은 클라이언트에서만 렌더링하는 대신 서버에서 컴포넌트를 HTML로 렌더링하는 기법이에요. Next.js, Remix, Gatsby 등과 함께 지원돼요.

서버 사이드 렌더링 또는 SSR은 컴포넌트를 클라이언트에서만 렌더링하는 대신 서버에서 HTML로 렌더링하는 기법이에요.

정적 렌더링(Static rendering)도 유사한 또 다른 접근 방식이에요. 각 요청마다가 아닌 빌드 시점에 페이지를 HTML로 미리 렌더링하는 방식이에요.

Next.js, Remix, Gatsby 같은 도구와 함께 두 접근 방식 모두에서 우리의 모든 primitive를 사용할 수 있어야 해요.

React 18 미만 버전의 Primitives는 서버/클라이언트 불일치 오류를 피하기 위해 id(aria 속성에 사용)를 hydration에 의존해요.

즉 스크린 리더 사용자의 Time to Interactive는 JS 번들의 다운로드 속도에 달려 있을 수 있어요. id를 서버에서 생성해 이 경험을 개선하고 싶다면 React 18로 업그레이드하는 것을 권장해요.