Next (또는 모든 SSR 프레임 워크)와 함께 웹 구성 요소 사용

나의 이전 기사에서는 웹 구성 요소를 사용하여 구축 된 시각적으로 매력적이고 접근 가능한 UX 구성 요소의 포괄적 인 세트를 제공하는 구성 요소 라이브러리 인 Shoelace를 탐색했습니다. 이 아키텍처는 프레임 워크 공유 사용을 허용합니다. React의 웹 구성 요소 통합은 최적이 아니지만 해결 방법이 존재합니다 웹 구성 요소의 상당한 제한은 현재 서버 측 렌더링 (SSR) 지원 부족입니다. DSD (Declarative Shadow Dom)는 개발 중이지만 현재 지원은 제한되어 있으며 서버 측 수정이 필요합니다. 이 분야의 JS 개발은 유망합니다. 이 기사는 현재 기술을 사용하여 Next.js를 포함하여 모든 SSR 프레임 워크 내에서 웹 구성 요소 관리에 중점을 둡니다. 이 접근법은 수동 단계와 초기 페이지로드에 약간의 성능 영향이 포함됩니다. 성능 최적화 전략을 다룰 것입니다. 이 솔루션은 트레이드 오프가없는 것이 아닙니다. 철저한 테스트 및 프로파일 링이 중요합니다 도전 : SSR 및 웹 구성 요소 왜 웹 구성 요소가 SSR과 완벽하게 통합되지 않는가? reft.js와 같은 프레임 워크는 코드를 반응하여 구성 요소를 일반 HTML로 변환합니다. React 구성 요소 트리가 서버에서 렌더링 되고이 HTML은 클라이언트 브라우저로 전송됩니다. 이 HTML과 함께 태그를로드하면 React 및 Component Code가 있습니다. 브라우저는 컴포넌트 트리를 다시 렌더링하여 서버 렌더링 된 HTML과 일치합니다. 수화로 알려진이 프로세스는 효과, 이벤트 핸들러 및 상태 관리를 활성화하여 응용 프로그램을 대화식으로 만듭니다. 웹 구성 요소는 이것을 복잡하게 만듭니다. Shoelace 's : 와 같은 구성 요소를 렌더링 할 때

반응 (또는 JavaScript 프레임 워크) 은이 태그를 직접 전달합니다. 렌더링 로직은 웹 구성 요소의 코드 (이 경우 Shoelace)에 있습니다. 이 코드 실행의 타이밍이 중요합니다 일반적으로 웹 구성 요소 등록은 수화 중에 JavaScript 가져 오기를 통해 발생합니다. 이는 수화 후에도 구성 요소가 올바르게 렌더링되지 않으므로 Unstyled 컨텐츠 (FOUC)가 플래시됩니다. 이론적으로 자리 표시 자 마크 업을 추가 할 수는 있지만, 특히 타사 라이브러리에서는 비현실적입니다. 사전 하이드레이션 웹 구성 요소 등록 문제는 수화까지 웹 구성 요소 등록 코드의 실행 지연입니다. 당사의 솔루션에는이 코드를 더 일찍 실행하는 것이 포함됩니다. 웹 구성 요소 코드를 사용자 정의하고 문서의

에 차단 스크립트를 추가합니다. 이것은 SSR의 목적과 모순되므로 일반적으로 바람직하지 않지만 즉각적인 렌더링을 보장합니다. 성능 영향은 캐싱에 의해 완화됩니다. 이것은 이상적인 장기 솔루션이 아닙니다. Future Next.js DSD 지원은 이러한 요구를 제거 할 것입니다 구현 세부 사항 완전한 코드는이 GitHub 리포지토리에서 사용할 수 있으며 Vercel을 사용하여 여기에 배포됩니다. 응용 프로그램은 수화 후 변경되는 텍스트와 함께 신발 부품을 렌더링합니다. 텍스트는 "Hydrated"로 업데이트되며 Shoelace 구성 요소는 처음부터 올바르게 렌더링됩니다. 커스텀 번들링 먼저, 모든 웹 구성 요소 정의를 가져 오는 JavaScript 모듈을 만듭니다. 신발 끈 :

이 모듈

는 직접 가져올 수 없습니다. 정기적 인 자바 스크립트 다발에 포함을 방지하려면 맞춤형 구매해야합니다. vite를 사용하겠습니다. 그것을 설치하고 (

)를 설치하고

: 를 만듭니다

이것은 에 번들을 만듭니다. 다음.js 서빙을 위해 폴더로 이동하십시오. 노드 스크립트는 이것을 관리하고 번들 파일 이름을 내보내는 모듈을 만듭니다 : .

및 해당 NPM 스크립트 :

스크립트로드 다음 .js의 에서 번들 경로를 가져 와서 에 를 추가하십시오.

<sl-tab-group ref="{tabsRef}">
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>

이것은 초기 HTML 렌더링 전에 웹 구성 요소 등록이 실행되는지 확인합니다. <:> 성능 최적화 : 캐싱 Caching 헤더 추가 다음 페이지로드를 개선하기 위해 JS 구성.

이것은 브라우저 캐싱을 효과적으로 활용합니다 결론 이 방법에는 수동 단계가 필요하지만 웹 구성 요소 및 SSR의 현재 제한 사항에 대한 해결 방법을 제공합니다. 프레임 워크 공수 구성 요소의 이점과 새로운 프레임 워크에 대한 쉬운 실험은 초기 구현 복잡성을 능가합니다. 웹 구성 요소의 향후 개선 SSR 지원은이 프로세스를 단순화 할 것입니다.

위 내용은 Next (또는 모든 SSR 프레임 워크)와 함께 웹 구성 요소 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!