단일 페이지 응용 프로그램

12월 16, 2020 admin 0 Comments

기 때문에 이 스파에는 진화에서는 상태가 저장되지 않는 페이지를 다시 그리기 모델로는 브라우저가 원래 설계를 위해,새로운 도전이 등장했다. 가능한 솔루션(다양한 복잡성,이해력 및 작성자 제어)은 다음과 같습니다.

클라이언트 측 JavaScript 라이브러리.
SPA 모델을 전문으로하는 서버 측 웹 프레임 워크.
브라우저의 진화와 SPA 모델 용으로 설계된 HTML5 사양.,

검색 엔진 optimizationEdit

의 부족 때문에 자바스크립트 실행에 크롤러의 일부 인기있는 웹 검색 엔진,SEO(Search engine optimization)는 역사적으로 제시 문제에 대한 공개 웹사이트에는 스파 모델입니다.

사이 2009 년 및 2015 년,구글은 웹마스터 센트럴 제시한 다음 권장하는”아약스 크롤링 방식을 사용하여”처음에 느낌표는 조각 식별자에 대한 상태를 저장 AJAX 페이지에(#!)., 특수 동작은 검색 엔진”의 크롤러에 의해 관련 메타 데이터의 추출을 허용하기 위해 스파 사이트에 의해 구현되어야한다. 이 URL 해시 체계를 지원하지 않는 검색 엔진의 경우 SPA 의 해시 Url 이 보이지 않습니다. 이러한”시뱅”Uri 간주 되었습니다 문제가에 의해 작가의 수를 포함하여 Jeni Tennison W3C 기 때문에 그들은 확인 페이지에 액세스하지 않는 사람들을 자바스크립트가 활성화에서 자신의 브라우저입니다. 또한 브라우저가 리퍼러 헤더의 조각 식별자를 보낼 수 없으므로 HTTP 리퍼러 헤더를 중단합니다., 2015 년,구글은 자신의 해시 뱅 아약스 크롤링 제안을 비추천.

또는 응용 프로그램은 서버의 첫 번째 페이지로드 및 클라이언트의 후속 페이지 업데이트를 렌더링 할 수 있습니다. 렌더링 코드는 서버와 클라이언트에서 다른 언어 나 프레임 워크로 작성해야 할 수도 있기 때문에 전통적으로 어렵습니다. 로직을 사용하여 보다 적게 템플릿,크로스 컴파일에서 다른 하나의 언어를 사용하거나 동일한 언어에 서버와 클라이언트을 높이는 데 도움이 될 수 있습는 코드의 양을 공유할 수 있습니다.,

에서 2018 년,구글은 동적으로 렌더링되는 또 다른 옵션에 대한 사이트를 제공하고자 하는 크롤러는 자바스크립트가 아닌 무거운 버전의 페이지를 인덱싱 목적입니다. 동적 렌더링에 사이에 스위치 버전의 페이지를 렌더링되는 클라이언트 측면에 대한 특정 사용자 에이전트. 이 접근법은 웹 서버가 크롤러를(사용자 에이전트를 통해)감지하고 렌더러로 라우팅하여 더 간단한 버전의 HTML 컨텐츠를 제공합니다.,

기 때문에 SEO 호환성은 사소한 일에 스파,그것은 스파는 일반적으로 사용하지 않는 상황에서 검색 엔진의 색인을 생성은 하나의 요건,또는 바람직합니다. 사용 사례에는 인증 시스템 뒤에 숨겨진 개인 데이터를 표면화하는 응용 프로그램이 포함됩니다. 는 경우에는 이러한 응용 프로그램은 소비자 제품,자주식”페이지를 다시 그리기”모델은 사용되는 응용 프로그램에 대한 방문 페이지와 마케팅 사이트가 제공하는 충분한 메타 데이터에 대한 응용 프로그램으로 나타나중에서 검색 엔진 쿼리가 있습니다., 블로그,지원 포럼,그리고 다른 전통적인 페이지를 다시 그리기 유물들을 둘러 앉아서 스파 수 있는 씨앗은 검색 엔진 관련 용어입니다.

또 다른 방법을 사용하여 서버 중심의 웹 프레임워크를 좋아하는 Java 기반 ItsNat 가를 렌더링하는 모든 하이퍼텍스트를 사용하여 서버에서 같은 언어와 템플릿 기술입니다. 이 방법은 서버와 알고 정밀도의 돔 상태에서 클라이언트,크고 작은 페이지의 업데이트가 필요합니다.에서 생성되는 서버,그리고 수송으로 Ajax,정확한 JavaScript 코드는 클라이언트를 가지고 페이지를 새로운 상태를 실행하 DOM 방법이 있습니다., 개발자를 결정할 수 있는 페이지국어야 합 크롤링에 의해 web 거미 SEO 및을 생성할 수 있 필요한 상태에서 부하를 시간 생성 평가 아닌 HTML JavaScript. 의 경우에 ItsNat 프레임워크이기 때문에 자동 ItsNat 유지하는 클라이언트 DOM 트리에서버로 자바 W3C DOM 트리의 렌더링이 DOM 트리에서 서버가 생성 평 HTML 로드시 및 자바스크립트 DOM 작업에 대한 Ajax 를 요청합니다., 이중성을 위해 매우 중요 SEO 기 때문에 개발자를 만들 수 있습니다으로 동일한 자바 코드와 순수한 HTML 기반의 템플릿을 원하는 DOM 상태에서 서버에 페이지 로딩 시간,전통적인 HTML 의해 생성 ItsNat 이 DOM 상태 SEO 호환됩니다.

버전 1 로.,3,ItsNat 제공하는 새로운 무국적자 모드로 및 클라이언트 DOM 지 않은 서버에 보관하기 때문에,으로 상태가 저장되지 않는 클라이언트 모드,DOM 상태는 부분적으로 또는 완전히 재구성 서버에서 처리할 때 어떤 아약스에 따라 요청을 필요한 데이터를 보낸 클라이언트에게 알리는 서버의 현재 DOM 상태는 상태가 저장되지 않는 모드를 수 있습니다 또한 서구 호환되기 때문에 SEO 호환성에서 일어나는 짐 시간의 초기 페이지에 의해 영향을 받는 상태 또는 무국적자 모드가 있습니다., 또 다른 가능한 선택은 프레임워크처럼 사전 렌더링,조종,Rendertron 는 쉽게 통합될 수 있는 모든 웹사이트 미들웨어로 웹 서버의 구성 가능 로봇 요청(구글은 로봇 및 다른 사람)를 제공해 미들웨어를하는 동안 비 로봇 요청사가 제공됩니다. 이러한 프레임워크 캐시 관련 웹사이트의 페이지를 정기적으로 허용하는 최신 버전을 사용할 수 있을 검색 엔진입니다. 이러한 프레임 워크는 공식적으로 구글에 의해 승인되었습니다.

웹 사이트가 크롤링 가능한 것처럼 보이게하는 몇 가지 해결 방법이 있습니다., 둘 다 SPA 의 내용을 반영하는 별도의 HTML 페이지를 만드는 것과 관련이 있습니다. 서버를 만들 수 있습 HTML 기반 버전의 사이트하고 제공하는 크롤러,또는”s 를 사용하는 것이 가능하 헤드리스 브라우저와 같은 PhantomJS 를 실행하 JavaScript 응용 프로그램이 출력하는 결과 HTML.

이 두 가지 모두 꽤 많은 노력이 필요하며 큰 복잡한 사이트에 대한 유지 관리 두통을 줄 수 있습니다. 잠재적 인 SEO 함정도 있습니다. 서버 생성 HTML 이 SPA 콘텐츠와 너무 다르다고 판단되면 사이트가 처벌됩니다., 실행 PhantomJS 출력 HTML 느리게 할 수 있는 응답의 속도 페이지를위한 무언가가 있는 검색 엔진–구글에서 다운그레이드 순위입니다.

클라이언트/서버 코드 partitioningEdit

을 증가시킬 수있는 방법 중 하나는 양의 코드 간에 공유할 수 있는 서버 및 클라이언트가 사용하고 논리 적 템플릿 언어 같은 콧수염 또는 핸들. 이러한 템플릿은 서버의 Ruby 및 클라이언트의 JavaScript 와 같은 다른 호스트 언어에서 렌더링 할 수 있습니다., 그러나 템플릿을 공유하기 만하면 일반적으로 올바른 템플릿을 선택하고 데이터로 채우는 데 사용되는 비즈니스 로직을 복제해야합니다. 렌더링은 템플릿에서도 부정적인 성능에 미치는 영향을 때에만 업데이트의 일부분 페이지 값과 같은 텍스트 입력에서 큰 템플릿입니다. 대체 전체 템플릿을 수도 있습을 방해 사용자가”s 선택 또는 커서 위치를 업데이트만 변경된 값지 않을 수도 있습니다., 이러한 문제를 방지하기 위해 응용 프로그램을 사용할 수 있습 UI 데이터 바인딩 또는 세분화된 DOM 조작에만 업데이트 적절한 부품의 페이지를 대신 다시 연출 전체 템플릿이 있습니다.

브라우저 historyEdit

스파되고,정의에 의하여,”하나의”페이지 모델을 나누기는 브라우저”s 페이지에 대한 디자인의 역사를 사용하여 탐색”앞으로”또는”다”버튼이 있습니다., 이것은 유용성에 장애를 누를 때 뒤로 버튼을 기대하고,이전 화면 상태에서 스파,하지만 그 대신,응용 프로그램”s 싱글 페이지를 언로드 및 이전의 브라우저에서 페이지”의 역사가 제공됩니다.

SPAs 의 전통적인 솔루션은 현재 화면 상태와 일치하여 브라우저 URL 의 해시 조각 식별자를 변경하는 것이 었습니다. 이것은 JavaScript 로 달성 될 수 있으며 url 기록 이벤트가 브라우저 내에 구축되도록합니다., SPA 가 URL 해시 내에 포함 된 정보에서 동일한 화면 상태를 부활시킬 수있는 한 예상되는 뒤로 버튼 동작이 유지됩니다.

이 문제를 더 해결하기 위해 HTML5 사양은 실제 URL 및 브라우저 기록에 대한 프로그래밍 방식의 액세스를 제공하는 pushState 및 replaceState 를 도입했습니다.

AnalyticsEdit

분석 도구와 같은 Google 웹로그 분석에 크게 의존하는 전체 새 페이지 로드,브라우저에서 시작하여 새로운로드 페이지. 스파는 이런 식으로 작동하지 않습니다.,

후 첫 페이지 로드,이후의 모든 페이지 및 내용 변경 사항은 내부적으로 처리되는 응용 프로그램에는 단순히 부르 업데이트 기능을 분석 패키지입니다. 실패를 통화했다는 기능면,브라우저 결코 트리거 새로운로드 페이지,아무것도 추가되는 브라우저에 역사,그리고 분석 패키지 아무 생각이 없는 사람입니다 무엇을하고 있습니다.

SPAEdit 에 페이지로드 추가

HTML5 히스토리 API 를 사용하여 SPA 에 페이지로드 이벤트를 추가 할 수 있습니다., 어려움을 제공 관리에 이고 그 모든 것이 추적되는 정확하게 작업이 포함됩에 대한 검사 보고서 누락 된 두 번 항목이 있습니다.일부 프레임워크를 제공하는 오픈 소스 분석 통합 주소 대부분의 주요 분석 제공자. 개발자들이 그들을 통합한 응용 프로그램으로 확인되는 모든 것이 제대로 작동하지만,없이 모든 작업을 수행 할 필요가 처음부터.

초기 loadEdit 의 속도

단일 페이지 응용 프로그램은 서버 기반 응용 프로그램보다 첫 페이지로드가 느립니다., 첫 번째로드는 브라우저에서 필수보기를 HTML 로 렌더링하기 전에 프레임 워크와 응용 프로그램 코드를 가져와야하기 때문입니다. 서버 기반 응용 프로그램은 필요한 HTML 을 브라우저에 밀어 넣기 만하면 대기 시간과 다운로드 시간이 줄어 듭니다.

가속화 페이지 loadEdit

수있는 몇 가지 방법이 있습니다 가속화의 초기 로드 스파의 등 무거운 접근 방식을 캐싱하고 게으른-로딩이 모듈을 필요합니다., 하지만 그것은”s 를 얻을 수 없다는 사실에서 요구하는 다운로드 프레임워크의 적어도 일부 응용 프로그램 코드 및 가장 가능성이 충돌 API 를 위한 데이터를 표시하기 전에 뭔가에서는 브라우저입니다. 이것은”지금 지불하거나 나중에 지불하십시오”트레이드 오프 시나리오입니다. 성능 및 대기 시간에 대한 질문은 개발자가 반드시 결정해야 할 결정으로 남아 있습니다.