material-uiの非表示コンポーネント、レンダリングを防ぐ方法

bugfix> reactjs > 投稿 2020-08-22 19:00

私はこれまでnextJSとmaterial-uiを使用して大成功を収めてきました。
しかし、私は最近概念的な問題にぶつかっています：
アプリがサーバー上でレンダリングされるときはいつでも、クライアントに届くとリフローしないようにします。
デスクトップとモバイルデバイスでレイアウトを異なる方法でレンダリングしているため、 <Hidden implementation='css'/> を使用してコンポーネントを分離しています成分。私は implementation=css を使用していますサーバーで使用できないため、ウィンドウの幅に依存できないためです。
今日の私の主な問題は、デスクトップとモバイルの両方のバージョンがレンダリングされることです。たとえ正しいバージョンが画面に表示されても、不必要なロジックの実行（特にAPI呼び出し）が発生します。
私は何か間違ったことをしたと思うが、それを修正する方法がわからない。
「理想的な」方法は <Hidden/> のようなコンポーネントになりますしかし、既にレンダリングされたコンポーネントを単に隠すのではなく、それはまったくレンダリングされません...そして、私は window.innerWidth を使用できませんもちろん、SSRが気になるので...

誰かがアイデアを持っているなら、私は感謝するでしょう。

だから、私は最終的に完璧ではなく、私の場合に最適なソリューションを見つけました：
レンダリングがサーバー側で行われると、material-ui <Hidden implementation='css'/> を使用しています（メディアクエリの反応コンポーネントでも同じことが実現できます）。そのため、コンポーネントはデスクトップバージョンとモバイルバージョンの両方をレンダリングし、すぐに正しいバージョンを非表示にします（画面にflickrはありません）。
次に、レンダリングがクライアント側で行われると、 window.innerWidth を計算していますコンポーネントが状態の変更ごとにモバイルバージョンとデスクトップバージョンを再計算しないようにします。
ここに私のコードがあります：
```
<Fragment>
  <Display format="mobile" css>
    {process.browser
      ? this.state.width < 960 ? mobile() : null
      : mobile()}
  </Display>
  <Display format="tablet-desktop" css>
    {process.browser
      ? this.state.width >= 960 ? tablet_desktop() : null
      : tablet_desktop()}
  </Display>
</Fragment>
```

bugfix

material-uiの非表示コンポーネント、レンダリングを防ぐ方法

reactjs

material-ui

nextjs

関連記事