한 페이지 앱에서 잘못된 URL(404 오류)에 대처하는 올바른 방법은 무엇입니까?

한 페이지 앱에서 잘못된 URL(404 오류)에 대처하는 올바른 방법은 무엇입니까?

저는 현재 angularjs를 사용하여 웹 어플리케이션을 작성 중이지만, 이 질문은 클라이언트 측에서 라우팅하는 클라이언트 측 자바스크립트 프레임워크(angular와 마찬가지로)에 해당된다고 생각합니다.

한 페이지짜리 앱에서 잘못된 URL을 처리하는 올바른 방법은 무엇입니까?

몇 개의 주요 사이트를 보면, https://mail.google.com/mail/ 아래에 임의의 URL을 입력하면 gmail이 수신 트레이로 리다이렉트 되는 것을 알 수 있습니다.이것은 잘못된 경로가 # 문자 앞인지 뒤에 있는지에 따라 서버 측(http 300 코드 포함) 또는 클라이언트 측)에서 발생합니다.한편, twitter 에서는 무효인 URL 에 대해서 실제의 HTTP 404 가 표시됩니다.세 번째 옵션은, 클라이언트측의 에러 페이지인 소프트 404 를 표시하는 것입니다.

이러한 솔루션은 상황에 따라 적절한 것 같습니다.Twitter는 twitter 사용자 및 트윗에 대한 링크가 실제 링크가 되기를 바라고 있으며, 이를 통해 사람들은 이를 공유하거나 뉴스 기사 등에 게시할 수 있기 때문에 무효 링크가 인식되는 것이 중요합니다(내 웹사이트에서 트윗 링크가 끊어진 경우 간단한 크롤링으로 알 수 있습니다).한편, gmail에서는 링크를 받은 편지함에 공유하지 않을 것으로 예상되며, 링크가 정말로 영구적인지 영속적인지조차 확신할 수 없습니다. URL 업데이트는 대부분 한 페이지 앱 내에서 브라우저 히스토리 내비게이션의 목적에 부합하는 것 같습니다.소프트 에러를 표시하는 세 번째 접근법은 gmail과 유사한 상황이지만 합리적인 "기본" 페이지가 없는 경우에 적합합니다.

이 긴 소개 후에 구체적인 질문을 몇 가지 드리겠습니다.

• 404 오류 대신 "소프트" 오류 페이지를 제공하는 것이 허용됩니까? 아니면 URL이 유효하지 않은 경우 한 페이지 앱이 항상 실제 404로 수정되어야 합니까?
• Gmail의 코드는 완벽하게 버그가 없을 수도 있지만, 만약 버그가 있다면, 결국 잘못된 링크로 이어져서 수신 트레이로 다시 리다이렉트 될 수도 있습니다.이것은 에러 페이지보다 사용자에게 더 혼란스러울 수 있습니다.gmail만큼 테스트되지 않은 대부분의 웹 앱은 오류 페이지를 표시하는 것이 좋을까요?
• 단일 페이지 앱에 실제 404를 구현하려면 서버 측에서 라우팅 로직을 복제해야 합니다.다른 방법이 없을까요?
• 404 로 리다이렉트 할 때는, 유저가 에러의 원인이 된 URL 를 확인할 수 있을 것이라고 생각합니다만, 아마 URL 바에서 확인할 수 있을 것입니다.html5 history api에서는 현재 페이지의 새로고침(잘못된 URL)을 트리거하는 것만으로 위의 서버측 라우팅과 조합하여 실행할 수 있다고 생각합니다.이를 지원하지 않는 브라우저 또는 해시방 표기법을 사용하는 경우 이 방법은 가능하지 않습니다.모든 브라우저를 지원하는 가장 좋은 방법은 무엇입니까?

SEO에 대해 관심이 있다면, angular.io가 이 문제를 해결할 수 있었던 방법 중 하나는 noindex 메타 태그를 사용하여 "soft-404 상태를 표시하여 크롤러가 페이지의 콘텐츠를 크롤링하지 못하도록 하는 것"입니다.JavaScript를 통해 문서에 추가할 수 있다고 합니다.

또는 JavaScript를 사용하여 실제 HTTP 404 상태 코드로 응답하는 페이지로 리디렉션할 수 있습니다.구글은 JavaScript의 리다이렉트를 잘 이해하고 있다.오리지널/does-not-exist 「」로 했을 경우./404-error?from=does-not-exist는 서버에 의해 반환된404 상태 코드와 관련지어집니다.URL url url url url 。여기에서는 상태 코드와 리다이렉트만 중요합니다.

다른 옵션은 SSR(Nuxt.js, Next.js, Angular Universal 등) 또는 사전 렌더링(prerender.io, puppeteer 등)입니다. 이 경우 사용자는 이전 버전의 봇 요청에 응답하면서 일반 클라이언트 측 렌더링된 앱을 얻을 수 있습니다.

tl;dr: 해시방 지원을 중지하고 SEO를 고려하는 경우 PJAX와 같은 동작을 선택합니다.

이나 웹웹 ?들 들? ?? ???가 반환이 404구글을 혼란스럽게 하지 않도록.은 진짜가 되어야 한다.404 "를 찾을 수 라는 메시지를 표시하는 것만이 아닙니다(즉, "를 찾을 수 없습니다").200페이지를 찾을 수 없다또한 어떤 브라우저를 지원하시겠습니까?

즉, 지저분한 SEO의 SEO입니다).#!pushstate를 지원하지 않는 브라우저(해시 변경이 아님)의 URL이 변경되면 실제 pushstate를 사용하거나 페이지 전체를 다시 렌더링합니다.

이 문제가 중요한 이유는#!을 반환해서는 안 된다404서버측을 모방하는 것은 의미가 없고 서버측을 모방하는 것은 불가능하기 때문입니다.서버는, 서버측을 모방한 후에 무엇을 취득할 수 없기 때문입니다.#!Javascript를 실행하지 않고.

따라서 SEO에 대해 정말로 관심이 있다면 PJAX와 같은 작업을 수행하여 라우팅에 진정한 푸시 스테이트만 사용하고 오래된 Web 1.0에 실패합니다.그 결과, 제가 추천하는 링크의 공유는, 정말로404하지 말았어야 했다#!(수평.#페이지 내용이 크게 바뀌지 않는 한 괜찮습니다.)

마지막으로 그404대부분 문제가 아니라 오히려30X즉, 응답을 리다이렉트 합니다.그 이유는 브라우저가 자동으로 리다이렉트를 처리하여 Javascript AJAX 콜이 다음 명령을 수신하지 않도록 하기 때문입니다.30X(대신 리다이렉트 응답을 받습니다).(200)취급하다30XPushstate 이력을 망치지 않도록 리다이렉트된 URL(즉, 리다이렉트된 URL)을 나타내는 헤더를 모든 요청에 대해 다시 전송해야 합니다.

물론 Twitter와 마찬가지로 해시방을 지원해야 하는 경우(해시방을 죽이기도 한 경우), Google Sitemaps 및 를 활용하여 불량 SEO를 완화할 수 있습니다.

언급URL : https://stackoverflow.com/questions/14779190/in-a-single-page-app-what-is-the-right-way-to-deal-with-wrong-urls-404-errors