7

Node.js ベースの同形 React/Redux アプリの作成を開始しました。プロジェクトの要件の 1 つは、「モバイル」および「デスクトップ」ビューに基づく特定のコンポーネントの「適応」レンダリングです。ユーザーのビューに関する画面情報 (「小」、「中」、「大」のメディア クエリに基づく) を状態に格納する Redux アクションとリデューサーを実装しました。サイズを変更すると、状態/ストアが更新されます。デフォルトの状態は「小」です。

const defaultState = {
    isMobile: true,
    isTablet: false,
    isDesktop: false,
    sizes: {
        small: true,
        medium: false,
        large: false,
        huge: false,
    },
};

画面サイズに基づいて 2 つの異なるバージョンで「適応」する必要があるコンポーネントでは、次のことを行うだけです。

if (small) return バリエーション1

if (medium) return バリエーション2

すべての作業。

今、私は2つの問題に直面しています:

  1. 私のアプリは同形です。つまり、マークアップはサーバー側でもレンダリングされます。サーバーは、ユーザーのブラウザとメディア クエリについて何も知りません。したがって、私のデフォルトの状態は「小さい」ため、サーバーは常に「variation1」をレンダリングします。node-server は、サイトのエントリ ポイントです。React アプリが「配信」される前に、レンダリングを「遅延」(ミドルウェア?) する必要があり、サーバーはブラウザーの幅に関する情報をクライアントから取得する必要があるようです。この問題をどのように解決できるか考えていますか?

  2. レンダリングは状態に基づいているため、ブラウザのサイズが「デスクトップ」の場合でも、ロード後に必ず「バリエーション 1」が最初に数ミリ秒間 (ちらつき) 表示されます。これは、状態が現在の画面幅で更新されるまでに JS 検出に数ミリ秒かかるためです。これは、上記の問題とデフォルトの状態と一緒に機能すると思います。

1の解決策は見つかりませんでしたが、同形で応答性/適応性のあるものがあるに違いないと思います。

4

2 に答える 2