• 목차

서버 측 렌더링 (SSR)

React Router의 가장 기본적인 서버 측 렌더링(Server Side Rendering)은 매우 간단합니다. 하지만 렌더링 할 올바른 경로(routes)를 찾는 것보다 고려해야 할 것이 더 많습니다. 고려해야 할 사항은 다음과 같습니다.

• 서버와 브라우저용 코드 번들링(bundling)
• 서버 전용(server-only) 코드를 브라우저 번들에 포함하지 않음
• 서버와 브라우저에서 작동하는 코드 분할(code splitting)
• 서버 측 데이터 로딩을 통해 실제 렌더링 할 항목 포함
• 클라이언트와 서버에서 작동하는 데이터 로딩 전략 (Data loading strategies)
• 서버와 클라이언트에서 코드 분할 처리 (handling code splitting)
• 적절한 HTTP 상태 코드(status code) 및 리디렉션(redirects)
• 환경 변수(environment variables) 및 비밀(secrets)
• 배포(deployment)

이러한 고려 사항을 모두 잘 설정하는 것은 꽤 복잡할 수 있지만, 서버 측 렌더링을 통해서만 얻을 수 있는 성능과 사용자 경험(UX) 향상을 기대할 수 있습니다.

React Router 앱을 서버 렌더링하려면 Remix를 사용하는 것이 좋습니다. Remix는 React Router를 기반으로 구축되었으며 앞서 언급한 모든 사항과 그 이상을 처리하는 프레임워크입니다. 한번 시도해 보세요*!*