大厂外包工#
外注の 1 週間です。火曜日に危機的な状況に直面し、チームの AI コンテストのためにデモを作成するように依頼されました。ゼロからバックエンドの情報管理システムのフレームワークを構築しました。火曜日の朝に開発内容を整え、デモ版の締め切りは木曜日（後に金曜日に変更）です。
中後半は、工場では外注の学生だけが行う業務です（注：職種を差別するつもりはありません、🐶助けてください）。
アレクサンダー#
アレクサンダーの理由は、この期間に工場で行った作業が非常に断片的であり、システム全体の能力向上にはあまり役立たなかったためです。さらに、中後半のプロジェクトに長い間触れていなかったため、非常に不慣れで、自分に 2〜3 日しか与えられていないと、このタスクを完了できないと感じていました。
難局を打破する#
プレッシャーに耐えて難局を打破しました。火曜日の当日、私はチームにフレームワークを完成させることを約束し、水曜日にはみんなが各自の役割を果たして開発を順調に進めることができるようにしました。それぞれが担当するページをしっかりと作り、水曜日と木曜日にデモ版の 80% の作業を完了しました。木曜日 / 金曜日には、上司 / トップマネージャーによる点呼で、私たち数人は非常に達成感を感じました。私自身も比較的満足しています。時には本当に追い詰められることがあります！
選択#
簡単なリストを作成しますが、恥ずかしくありません：
- ベースフレームワーク：
webpack5+React18+react-router-dom - コンポーネントシステム：
antd - 言語：
ts+sass - その他：
immer、schedule-x、dayjs
深く考えずに進めたことがわかります。思いついたものをインストールするだけで、すべては速さのためです。
唯一の収穫は、webpack-dev-server --host 0.0.0.0+devServer.host = 0.0.0.0の設定によって、プロジェクトを実行した後、IPv4/6 のプロジェクト実行アドレスが同時に表示され、ローカルネットワーク内の他のマシンからアクセスできることを知ったことです。
摸鱼学习#
throttle vs debounce#
スロットルは、一定の時間内に 1 回だけ実行され、複数回のトリガーは無効になります。スクロールイベントなどに使用されます。
デバウンスは、一定の時間後に実行され、複数回のトリガーがある場合はタイマーがリセットされます。入力クエリの検索などに使用されます。
パッケージの検索方法#
実際には、npmでキーワードを検索して、必要なパッケージを見つけるのが最も速い方法です。以下のように検索します：
keywords:react schedule
検索結果を参考に、いくつかのスケジュールコンポーネントをおすすめします：
さらに Google 検索と組み合わせると、必要なパッケージを見つけることができるでしょう。
パフォーマンスの最適化#
ブラウザの互換性#
Google が提供するcore-web-vitalsパッケージweb-vitalsの API は、一部のブラウザでは正確な指標値を計算できない場合があります。これはブラウザの互換性の問題です。疑問を抱くのは合理的です。
Next.js の学習#
Next.js 学習チュートリアルを通じて、パフォーマンスの最適化について学びました。
フォントの最適化#
next/font/google、next/font/localを提供し、フォントリソースを静的リソースに統合して読み込むことで CLS を最適化します。
画像の最適化#
Imageコンポーネントを提供します。
- 異なるデバイスやサイズに応じたレスポンシブ画像の表示
- 明確なサイズ指定による CLS の最適化
- レイジーロードによるビューポート内の画像のみの読み込み（手動ではなく）
import Image from 'next/image';
export default function Page() {
return <Image
src={'/hero-desktop.png'}
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
}
リンクの最適化#
Linkコンポーネントを提供し、CSR ナビゲーションをサポートします。ページ全体のリフレッシュではなく、リンク先のみを更新します。
import Link from 'next/link';
export default function Page() {
return <Link
key={link.name}
href={link.href}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
>{link.name}
</Link>
}
本番環境では、Link タグがビューポート内に表示されると、プリフェッチの最適化が行われ、ほぼ即座に開く体験が向上します。
ページ#
Next.js の特別なファイルpage.tsx - パスセグメント、ルーティングベースのコード分割サポート、異なるページ間で相互に独立して影響を受けません
レイアウト#
Next.js の特別なファイルlayout.tsx - 共有の UI 部分の再レンダリング
ローディング#
Next.js の特別なファイルloading.tsx - ルートレベルの非同期コンポーネントの Suspense フォールバック
エラー#
Next.js の特別なファイルerror.tsx - 予期しない例外をキャッチし、エラー UI バウンダリを定義します
404NotFound#
Next.js の特別なファイルnot-found.tsx - リンク / リソースが見つからない場合に 404 の UI バウンダリを定義します。error.tsxよりも優先されます。定義されていない場合はerror.tsxが表示されます。
静的レンダリング vs 動的レンダリング#
静的レンダリング：
- より高速なユーザーエクスペリエンス
- 静的コンテンツはキャッシュに適しており、サーバーの負荷を軽減します
- SEO に有利
動的レンダリング：
- 頻繁に変化するデータ
- 個別のデータ、個別の表示
- リアルタイム情報
ストリーミングレンダリング#
ページ内の異なるチャンクを並行して読み込み、解析、レンダリングし、遅いリクエストがページ全体の読み込みに影響を与えるのを防ぎます。Next.js では、ストリーミングレンダリングを実現するための 2 つの方法があります：
loading.tsxは、Next.js の特別なファイルであり、React Suspense コンポーネントのフォールバック UI として機能し、ページ全体をストリーミングします- React Suspense は、コンポーネント / コンポーネントグループの遅延レンダリングであり、条件に基づいて動的にコンポーネントをレンダリングします
いつ考慮すべきか？
- ユーザーエクスペリエンス、優先的なインタラクション
- モジュールの表示優先度
- データの取得
ベストプラクティス：
- ページ全体：
loading.tsxはページレベルのローディングトランジションを実現できますが、個々のコンポーネントが遅いためにユーザーが長時間待たされる可能性があり、コンテンツのレンダリング速度が遅くなる可能性があります - 各コンポーネント：コンポーネントが次々と表示されるため、あまり意味がありません
- ページセクション：複数のコンポーネントをラップするラッパーコンポーネントを作成する必要があります
PPR - 実験段階の読み込みモデル#
Pre Partial Render、部分的なプリレンダリング、フォールバック部分を静的コンテンツとして HTML に埋め込み、ダイナミックコンテンツはユーザーが対応するルートにアクセスしたときに動的にロードされます
URL Search Params#
メリット：
- リンクをブックマークや共有できる
- SSR に適しており、サーバー側でもパラメータを取得してデータを取得し、レンダリングできる
- ユーザーのクエリパラメータを持ち運び、ユーザーの行動分析に役立つ
- URL クエリで値を渡すだけで、コンポーネントの状態を個別に管理する必要がない
フック：
- useSearchParams
- usePathname
- useRouter：プログラムによるナビゲーション
CSC vs SSC#
クライアントサイドレンダリングでは使用できず、サーバーサイドレンダリングでは使用できるもの：
- イベントリスナー
- フック
- document、window などの API
SEO#
TDK、Open Graph Metadata