새로운 사용자 지정 홈페이지 기능 사용

개발
45

저는 이 기능을 제 Homepage Blocks 컴포넌트와 함께 꽤 많이 사용해 왔습니다. 두 가지 제안이 있습니다:

기본 클래스

컴포넌트를 조정하여 본문에 homepage 클래스를, href="/custom"가 있는 사이드바 링크에 active 클래스를 항상 추가하도록 했습니다. 이러한 기능들은 수정자(modifier)의 기본값으로 설정할 수 있지 않을까요?

  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? 참조)

빠른 첫 페인트(Snappy First Paint)

이 부분을 기술적으로 어떻게 접근해야 할지 모르겠습니다. 하지만 제한적인 콘텐츠 선택을 보여주는 것이 일반적인 커스텀 홈페이지에 도착할 때, 나머지 앱이 로딩되는 동안 홈페이지를 먼저 렌더링하여 FCP(First Contentful Paint)를 개선할 수 있지 않을까요? 아마도 여기의 단일 앱(Single Page Application) 아키텍처의 특성을 오해하고 있는 것일 수 있습니다. 하지만 로딩 애니메이션을 먼저 본 후, 자체적으로는 거의 즉시 표시될 수 있을 만큼 단순한 페이지에 도달하는 과정은 다소 실망스럽게 느껴집니다.