점점 더 많은 웹사이트가 "단일 페이지 구조"(단일 페이지 애플리케이션)를 채택하기 시작했습니다.
전체 웹사이트에는 단 하나의 웹페이지만 있으며 Ajax 기술을 사용하여 사용자 입력에 따라 다양한 콘텐츠를 로드합니다.
이 접근 방식의 장점은 좋은 사용자 경험과 트래픽 절약이지만, 단점은 검색 엔진에서 AJAX 콘텐츠를 크롤링할 수 없다는 것입니다. 예를 들어, 웹사이트가 있습니다.
<code> http://example.com </code>
해시마크 구조의 URL을 통해 사용자는 다양한 콘텐츠를 보게 됩니다.
<code> http://example.com#1 http://example.com#2 http://example.com#3 </code>
그러나 검색 엔진은 example.com만 크롤링하고 파운드 기호를 무시하므로 콘텐츠를 색인화할 수 없습니다.
이 문제를 해결하기 위해 구글은 '파운드 기호 느낌표' 구조를 제안했습니다.
<code> http://example.com#!1 </code>
Google이 위와 같은 URL을 찾으면 자동으로 다른 URL을 크롤링합니다.
<code> http://example.com/?_escaped_fragment_=1 </code>
이 URL에 AJAX 콘텐츠를 넣으면 Google에서 이를 포함합니다. 그런데 문제는 "파운드 기호 느낌표"가 매우 보기 흉하고 번거롭다는 것입니다. 트위터는 한때 이 구조를 사용했는데
<code> http://twitter.com/ruanyf </code>
이
으로 변경되었습니다.<code> http://twitter.com/#!/ruanyf </code>
이로 인해 이용자들의 불만이 거듭됐고, 불과 반년 만에 폐지됐다.
그렇다면 검색 엔진이 AJAX 콘텐츠를 크롤링하도록 허용하면서 URL을 보다 직관적으로 유지할 수 있는 방법이 있습니까?
이틀 전 Discourse의 창립자 중 한 명인 Robin Ward의 솔루션을 보기 전까지는 항상 방법이 없다고 생각했고, 놀라움을 금할 수 없었습니다.
Discourse는 Ajax에 크게 의존하는 포럼 프로그램이지만 Google이 콘텐츠를 포함할 수 있도록 허용해야 합니다. 그 해결책은 파운드 기호 구조를 버리고 History API를 채택하는 것입니다.
히스토리 API라고 불리는 것은 페이지를 새로 고치지 않고 브라우저 주소 표시줄에 표시된 URL을 변경하는 것(정확히 말하면 웹페이지의 현재 상태를 변경하는 것)을 말합니다. 다음은 위의 버튼을 클릭하여 음악 재생을 시작하는 예입니다. 그런 다음 아래 링크를 다시 클릭하여 어떻게 되는지 확인해 보세요.
주소 표시줄의 URL이 변경되었지만 음악 재생은 중단되지 않습니다!
History API에 대한 자세한 소개는 이 글의 범위를 벗어납니다. 간단히 말하면, 그 기능은 브라우저의 History 객체에 기록을 추가하는 것입니다.
<code> window.history.pushState(state object, title, url); </code>
위 명령줄을 사용하면 주소 표시줄에 새 URL이 표시됩니다. History 개체의 pushState 메서드는 세 번째 매개변수를 허용합니다. 처음 두 매개변수는 null일 수 있습니다.
<code> window.history.pushState(null, null, newURL); </code>
현재 Chrome(26.0), Firefox(20.0), IE(10.0), Safari(5.1), Opera(12.1) 등 모든 주요 브라우저에서 이 방법을 지원합니다.
로빈 워드의 방법은 다음과 같습니다.
먼저, History API를 사용하여 해시 마크 구조를 대체합니다. 그러면 각 해시 마크가 일반 경로 URL이 되어 검색 엔진이 모든 웹 페이지를 크롤링할 수 있습니다.
<code> example.com/1 example.com/2 example.com/3 </code>
그런 다음 Ajax 부분을 처리하고 URL을 기반으로 콘텐츠를 크롤링하는 JavaScript 함수를 정의합니다(jQuery가 사용된다고 가정).
<code>function anchorClick(link) {<br> var linkSplit = link.split('/').pop();<br> $.get('api/' + linkSplit, function(data) {<br> $('#content').html(data);<br> });<br> }</code>마우스 클릭 이벤트를 재정의합니다.
<code> $('#container').on('click', 'a', function(e) {<br> window.history.pushState(null, null, $(this).attr('href'));<br> anchorClick($(this).attr('href'));<br> e.preventDefault();<br> }); </code>또한 사용자가 브라우저의 '앞으로/뒤로' 버튼을 클릭하는 것도 고려하세요. 이때 History 객체의 popstate 이벤트가 발생합니다.
<code> window.addEventListener('popstate', function(e) { <br> anchorClick(location.pathname); <br> });</code>위 세 가지 코드를 정의한 후 페이지를 새로 고치지 않고도 일반 경로 URL과 AJAX 콘텐츠를 표시할 수 있습니다.
마지막으로 서버측을 설정합니다.
파운드 기호 구조를 사용하지 않기 때문에 각 URL은 서로 다른 요청입니다. 따라서 서버는 404 오류를 방지하기 위해 이러한 모든 요청에 대해 다음 구조의 웹 페이지를 반환해야 합니다.
<code> <html><br> <body><br> <section id='container'></section><br> <noscript><br> ... ...<br> </noscript><br> </body><br> </html></code>
위 코드를 자세히 보면 noscript 태그를 찾을 수 있는데, 이것이 바로 비밀입니다.
우리는 검색 엔진이 포함하기를 원하는 모든 콘텐츠를 noscript 태그에 넣습니다. 이 경우 사용자는 페이지를 새로 고치지 않고도 AJAX 작업을 수행할 수 있지만 검색 엔진에는 각 웹 페이지의 주요 콘텐츠가 포함됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
