angular17の@deferまとめ

@deferとは？

@deferはAngularのver17から搭載されたテンプレートで使用するための記法である。
この記法を使うことでテンプレート内の任意のパーツを後からロード&レンダリングすることができる。

どういう場面で使うか

あるページが複数のコンポーネントで構成されているとき、デフォルトだと全てまとめてローディング＆レンダリングを行ってしまう。もし、それらのコンポーネントの中に巨大なコンテンツがあった場合、レンダリングが終わるまでに時間がかかる。
これによってユーザーにストレスがかかってしまい、ユーザー体験が非常に悪いものになってしまう。
そのような時に@deferが使える。そのページを構成する主要なパーツ以外でかつコンテンツが大きいものを後から取得することによっていち早くユーザーにページを提供することができる。
「後から取得」とはユーザーがページをスクロールしてそのコンテンツ領域が画面内に入ってきたときやユーザがボタンをクリックしたときなどがある。

@deferと@placeholder

@deferを使うと、その内部で記述されたコンテンツは後からレンダリングされることになるので、瞬間的に空白が生まれてしまうことがある。
レンダリングされている最中であることをユーザーに示す時に @placeholder を使用する。

@placeholder は@defer内のコンテンツがローディングされている間に表示させておく初期コンテンツを記述しておくための記法である。

サンプルコードでよく見かけるのはこの中で「Content is Loaded」と記載している。

また、@defer内のコンテンツのロードとレンダリングが終わった際にこの初期コンテンツと入れ替える。

parameter : minimum

@placeholderにはオプションとしてminimumパラメーターというものがある。
これを使うことで、初期コンテンツをどれくらいの時間表示させるかを調節することができる。

@defer () {
    <div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore modi at quidem iste consequatur dolorum ex
            cupiditate nulla illo quae. Corporis autem delectus saepe blanditiis nemo ab voluptas laboriosam natus!</p>
    </div>
}@placeholder(minimum 2s){
    <h2>Content is Loaded...</h2>
}

通信速度によってはplaceholder内のコンテンツを一瞬表示した後にdefer内のメインコンテンツを表示することになり、ユーザにとっては画面が一瞬ちらつくように感じられ、ストレスを与えてしまいます。
よって、minimumで初期コンテンツの表示時間を指定してあげることで通信速度に依存することなく表示することができるので非常に便利なパラメーターとなっています。

@deferと@loading

@loadingは@defer内のコンテンツがバックグラウンドでバンドル(ここでは@defer内のメインコンポーネントのバンドル)をロードしている間に表示するために使用されます。
ローディングが完了すると初期表示していたコンテンツはメインコンテンツに差し替えられます。
この点は@placeholderの挙動と同様です。

parameter : minimum

@placeholderと同様なので割愛します。

parameter : after

読み込みが開始されてから@loading内のコンテンツを表示するまでの時間を指定します。
次のコード例だと、@defer内のコンテンツのロードが開始されてから1秒後に@loading内のコンテンツを表示し、2秒間表示し続けるような挙動をします。

@defer{
<div>
    <large-content-component/>
</div>
}@loading(after 1s;minimum 2s){
    <h2>Loading...</h2>
}

@placeholderと@loadingの違い

@placeholderは@defer内のコンテンツがレンダリングできるようになるまで指定した初期コンテンツを表示するのに使われます。なので、@placeholderのコンテンツはメインコンテンツのバンドルのローディングが開始される前にも表示されます。

一方で、@loadingはメインコンテンツのバンドルがローディングされそのローディングが完了するまでの間、初期コンテンツを表示しておきます。ローディングが完了すると即座にその初期コンテンツはメインのものと差し替えられます。

まとめ

ドキュメントを読みながら実際に記事にしてアウトプットすることで、今まで理解できていなかった@placeholderと@loadingの違いが明確になりました！
これからもわからないことは積極的に調べて記事にしていきたいです。