app shell model은 최소한의 필수 HTML을 포함하는 앱 셸, CSS & JavaScript가 먼저로드 된 다음 나중에 콘텐츠가 동적으로로드됨을 나타냅니다. 이것은 자바 스크립트와 API를 사용하여 콘텐츠를 느슨하게로드하는 것을 의미합니다.서버 측 렌더링 및 앱 셸 모델
예를 들어 Google I/O 2016에 언급 된 PWA.
그러나 이러한 접근 방식은 콘텐츠가 자바 스크립트 사용 브라우저에서만 사용할 수 있음을 의미합니다.
예를 들어 Google I/O 2016 웹 사이트를 테스트 할 때 자바 스크립트를 사용 중지하면 콘텐츠를 사용할 수없는 등 검색 엔진 색인 생성에 영향을 줄 수 있습니다.
권장 접근 방식은 점진적 향상 원리에 어긋나지 않으므로 어떻게해야합니까?
(경고 : 서버 측 렌더링을 구현하는 다른 많은 방법이있다.)
서버 측 렌더링의 "적절한"사용 후 서버에 전송되는 모든 탐색 요청에 응답해야 할 경우 완전한 HTML 문서로 URL에 고유 한 컨텐츠를 제공합니다. 이 모델에서는 대화 형 기능이나 단일 페이지 응용 프로그램 스타일 탐색을 위해 필요할 수도 있지만 화면에 콘텐츠를 가져 오기 위해 JavaScript가 필요하지 않습니다.
일단 서비스 작업자가 설치되면 App Shell 모델을 활용하면 브라우저가 더 이상 응답을 얻기 위해 서버에 탐색 요청을 보낼 필요가 없다는 것이 주범입니다. 이전에 캐시 된 App Shell HTML을 사용하여 네트워크를 완전히 우회하여 요청을 수행 할 수 있습니다.
서비스 근로자를 지원하지 않는 브라우저 또는 이론적 사용자 에이전트는 탐색 요청을 계속 서버로 보내며 서버는 전체 HTML 문서로 계속 응답합니다. https://youtu.be/jCKZDTtUA2A?t=1428, 나는 같은 전원이 질문을 닫으 투표 해요 https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo
iFixit 예에서 사용자 에이전트에 JavaScript가 활성화되어 있지 않으면 서버 측 데이터를 올바르게로드하지만 사용자 에이전트에서 JavaScript를 사용할 수있는 경우 a) 서비스 작업자와 캐시를 설치합니다. 현재 '색인'페이지 (가능하지 않을 수 있음) b) API에서 최신 콘텐츠를 검색하고 '색인'페이지의 콘텐츠를 덮어 씁니다. –
세 가지 동작이 있습니다. 1) JS가 아예 없음 : SSR은 모든 네비게이션 응답에 콘텐츠가 있음을 보장하고 링크는 실제 네비게이션을 트리거합니다. 2) JS이지만 SW 지원 (예 : Safari)이 없음 : SSR은 초기 네비게이션 응답을위한 콘텐츠가 있음을 보장하고, DOM 콘텐츠는 새 콘텐츠로 업데이트 된 링크에 SPA 스타일 탐색이 사용됩니다. 3) JS 및 등록 된 SW : App Shell을 채우기 위해 캐시 된 App Shell에서 초기 탐색이 즉시 수행되고 링크에는 SPA 스타일 탐색이 사용됩니다. –
에이 기술을 활용하는 샘플 애플리케이션 : 더 자세하게 설명 내가 몇 년 준 이야기의 비디오가있다
왜냐하면 그것은 SEO에 관한 것이지 프로그래밍에 관한 것이 아니기 때문입니다. SEO 관련 질문은 [Webmasters.SE] (// webmasters.stackexchange.com/)에서 물을 수 있습니다. – Machavity
귀하의 의견은 잘못되었습니다. 문제는 프로그램 셸 모델 아키텍처와 점진적 향상 원리에 대한 프로그래밍입니다. SEO는 JavaScript를 통해 콘텐츠를로드 할 때의 단점 중 하나이기 때문에 언급되었습니다. "SEO"에 대한 언급을 수정하고 삭제하는 질문을 편집했습니다. –