React Router の defer で重要でないデータの取得を遅延させる
付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えばブログの記事のページへ遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに付随するコメントやいいねの数はそれほど重要ではありません。このような場合にはコメントやいいねの数の取得を待たずに、記事のコンテンツが取得できたタイミングでページ遷移できるとユーザー体験が向上します。 この記事では React Router の loader を使用して重要なデータの完了したタイミングでページを表示する方法を試してみます。 通常通り loader を使用する場合 まずは特別なことを考えずに通常通り loader を使用してデータの取得してみましょう。以下のように <ArticlePage> コンポーネントを作成します。 import { LoaderFunction,
Playwright でコンポーネントテスト
Playwright は Cypress Puppeteer と並ぶ E2E テストのための Node.js フレームワークです。Chromium, Chrome, Edge, Firefox, Webkit (Safari)と多くのブラウザに対応しているという特徴があります。 そんな Playwright ですが v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまり、もともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。 Playwright のコンポーネントテスティングの特徴と使い方を見ていきましょう。 Playwright でテストを書くメリット 現状フロントエンドにおいて、コンポーネントテスティングを実施する際に使用されるフレームワークとして Te
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
