reactjs - サーバー側レンダリング + レスポンシブ デザイン + インライン スタイル -> どのブレークポイントを使用するか?

Question

ReactJS で構築されたレスポンシブ Web アプリケーションがあり、いつかサーバー側のレンダリングをサポートしたいと考えています。

ビューポートのサイズに応じて、アプリケーションのレイアウト/動作が変わります。しかし、これらすべての変更はプレーンな CSS メディアクエリだけで行うことができるわけではありません。JS の動作と、基礎となる HTML 構造も幅に応じて変更する必要があります。

たとえば、次のことができます。

幅800px未満：

<div class="app">
  <div class="menu-mobile">...</div>
  <div class="content">...</div>
  <div class="mobile-left-menu">...</div>
  <div class="footer-mobile">...</div>
</div>

幅800px以上：

<div class="app">
  <div class="menu">...</div>
  <div class="main">
    <div class="left-menu">...</div>
    <div class="content">...</div>
    <div class="right-menu">...</div>
  </div>
  <div class="footer">...</div>
</div>

ここで、そのアプリケーションにサーバー側レンダリングを使用したいと考えています。しかし、サーバーでは幅がないため、どの HTML 構造をクライアントに返せばよいかわかりません。

静的なデフォルトのサーバー側ブレークポイントを使用するソリューションを探しているわけではなく、クライアントでアプリを修正することに注意してください。デバイスに応じて適切な html 構造をクライアントに返すソリューションを探しています。したがって、ブラウザで JavaScript を無効にすると、問題なく動作するはずです。

---

両方に必要な html をレンダリングし、プレーンな CSS メディアクエリと で必要な部分を表示/非表示にできると主張する人もいるかもしれませdisplay: noneんが、一般的にユーザーが移動する可能性は低いため、アプリが複雑になり、多くの未使用の html 要素がレンダリングされることになります。ブレークポイントの上/下 (つまり、彼がモバイル デバイスを持っている場合、デスクトップの html 要素は使用されません)

また、インライン スタイルを使用したい場合、これらのインライン スタイルをサーバー上で正しい幅にレンダリングする必要があるため、複雑になります。

ビューポートのサイズを推定するためにブラウザの UA をスニッフィングしようと考えている人を見てきました。しかし、セキュリティで保護されていない画面サイズの検出があったとしても、サーバー側でデバイスの画面の向きを知ることができるかどうかはわかりません。

この問題を解決するために何かできることはありますか?