TIL 32
Optimistic-UI
楽観的UI
データ転送が遅い場合、実際のデータはサーバに到着しませんが、まず出力結果を変更し、データを送信します.
成功したデータ転送でのみ発生するイベント.
ex)投稿内を右クリック->UIを1上げて表示->サーバにデータを送信->DBに登録してbrに変更したデータに戻る->変更したデータを使用して再パッチ(成功した場合)
ネットワークの不安定さなどで失敗した場合、+1の賛数は直ちに元の状態に戻ります
もちろん、重要なデータや安定性が必要な場合(支払いなど)は使用できません.
URLプレビュー
上図のように、URL送信時にページの要約データをプレビューする(OG)
ページを構成する要素のプロパティにogが含まれている場合は、データのロードを許可するように構成されています.
Headラベルをインポートします.
SSR
商品詳細ページなどはSSRで整理し、SSRを適用した後、他の機器がリンクなどを共有した場合、OGでプレビューを出力します.
各詳細ページには異なるアドレス(ダイナミックルーティング)があるため、対応するアドレス値を正確に取得する必要がある.
SSRを適用すると、リンクを共有すると、FEのサーバがすぐにBEに要求を送信し、DBがデータを受信するので、正しいアドレスを得ることができます.
SSRを適用しない場合、FEはすぐに戻り値を与えるので、詳細ページのアドレスがハードコーディングされていない限り、正しいアドレスは得られません.
すなわち,動的データが適用されたページに対しては,SSRを適用しなければならない.
SEO
Search Engine Optimization
検索エンジンの最適化
SSRの影響を最も受けるオプション
楽観的UI
データ転送が遅い場合、実際のデータはサーバに到着しませんが、まず出力結果を変更し、データを送信します.
成功したデータ転送でのみ発生するイベント.
ex)投稿内を右クリック->UIを1上げて表示->サーバにデータを送信->DBに登録してbrに変更したデータに戻る->変更したデータを使用して再パッチ(成功した場合)
ネットワークの不安定さなどで失敗した場合、+1の賛数は直ちに元の状態に戻ります
もちろん、重要なデータや安定性が必要な場合(支払いなど)は使用できません.
URLプレビュー
上図のように、URL送信時にページの要約データをプレビューする(OG)
ページを構成する要素のプロパティにogが含まれている場合は、データのロードを許可するように構成されています.
Headラベルをインポートします.
<Head>
<meta property='' content='' />
</Head>
構成SSR
商品詳細ページなどはSSRで整理し、SSRを適用した後、他の機器がリンクなどを共有した場合、OGでプレビューを出力します.
各詳細ページには異なるアドレス(ダイナミックルーティング)があるため、対応するアドレス値を正確に取得する必要がある.
SSRを適用すると、リンクを共有すると、FEのサーバがすぐにBEに要求を送信し、DBがデータを受信するので、正しいアドレスを得ることができます.
SSRを適用しない場合、FEはすぐに戻り値を与えるので、詳細ページのアドレスがハードコーディングされていない限り、正しいアドレスは得られません.
すなわち,動的データが適用されたページに対しては,SSRを適用しなければならない.
SEO
Search Engine Optimization
検索エンジンの最適化
SSRの影響を最も受けるオプション
Reference
この問題について(TIL 32), 我々は、より多くの情報をここで見つけました https://velog.io/@chanpoong/TIL-32テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol