新しいカスタムホームページ機能を使ってみる

開発
45

このコンポーネントをHomepage Blocksコンポーネントと一緒にかなり活用しています。2つの提案があります。

デフォルトクラス

コンポーネントを調整して、常にbodyにhomepageクラスを、href=\"/custom\"を持つサイドバーリンクにactiveクラスを追加するようにしました。これらの機能は、モディファイアのデフォルトとしておそらく利用できるのではないでしょうか？

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href=\"/custom\"]'
    );

    if (currentRoute === "discovery.custom") {
      document.body.classList.add("homepage");
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      document.body.classList.remove("homepage");
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});

(当初はサイドバーリンクをデフォルトで追加したかったのですが、インターフェースでそのようなリンクを編集できないのは、私にとって大きな欠点だと感じています。How can I edit sidebar links that are added with api.addCommunitySectionLink? を参照)

スピーディーな初回ペイント

技術的にはどのようにアプローチすればよいかわかりません。しかし、カスタムホームページに着地した場合、通常は限定的なコンテンツ選択が表示されますが、ホームページのFCPを改善し、アプリの他の部分がロードされている間にすでにレンダリングすることは可能でしょうか？これはシングルアプリアーキテクチャの性質を誤解しているのかもしれません。ローディングアニメーションが表示され、その後かなりシンプルなページに着地するのは、少し残念に感じます。そのページ自体はすぐに表示できるはずなのに。

「いいね！」 4