인증되지 않은 콘텐츠와 인증된 콘텐츠를 같은 페이지에 표시하려고 할 때 콘텐츠가 깜박입니다.

인증되지 않은 콘텐츠와 인증된 콘텐츠를 같은 페이지에 표시하려고 할 때 콘텐츠가 깜박입니다.

(Nuxt 프로젝트) 인증되지 않은 콘텐츠와 인증되지 않은 콘텐츠를 같은 페이지에 표시하기 위한 솔루션을 찾을 수 없습니다.

나는 두 가지 가능한 해결책이 있지만 몇 가지 경고가 있다.

첫 번째 사람은, 그 중 어떤 것을 결정한다.mounted방법 사용자가 인증된 콘텐츠를 볼 수 있지만 콘텐츠 깜박임 문제를 해결할 수 없는 경우 https://60f08a8293123d00e57c14e8--happy-minsky-1268c6.netlify.app/ 로그인 버튼을 클릭하여 페이지를 새로고침하면 콘텐츠 깜박임이 나타납니다.

제 두 번째 접근법은 이 시스템을null둘 다 피하기 위해 앱이 에 도달할 때까지 인증되지 않은 콘텐츠와 인증되지 않은 콘텐츠는mounted방법, 이 솔루션의 문제점은 정적 콘텐츠 생성이 없기 때문에 검색 엔진에 적합하지 않다는 것입니다.이 두 링크를 비교해 주십시오.

이 솔루션에서 생성: https://gist.github.com/ltroya-as/fbbdce2b3dc30063e9c4ec7e93e3aba1#file-index-generated-file-html-L522

예상: https://gist.github.com/ltroya-as/d37e3d0a89efebbfd66c2daf7700f50d#file-expected-generated-file-html-L523

두 번째 검색 엔진을 보다 쉽게 사용할 수 있는 방법이 있습니까?두 번째 솔루션이 검색 엔진 결과에 영향을 미칠까 봐 걱정입니다.

지시사항이 있는 저장소:https://github.com/ltroya-as/nuxt-rehydratation-example

--- 갱신

내 프로젝트가 완전 정적 모드로 구성됨

Vue는 클라이언트 측 프레임워크입니다.모든 HTML은 브라우저 내에서 JS에 의해 생성됩니다.이것은 일반적인 Vue 앱은 HTML이 거의 없고 CSS와 Javascript 태그가 있는 매우 단순한 HTMl 파일일 뿐이라는 것을 의미합니다.

대부분의 크롤러(Google, FB, Twitter)는 JS를 실행하지 않고 서버에서 반환된HTML만 스캔하기 때문에 SEO에 문제가 있습니다.

이를 해결하기 위해 Nuxt라는 프레임워크를 만들었습니다.이들은 서버에서 Vue 앱을 실행하고 HTML을 서버 상에서 렌더링함으로써 문제를 해결합니다.요청 시(Nuxt classic - new HTML이 생성될 때마다 노드 서버가 필요함) 또는 빌드 시(Nuxt generate - HTML이 생성될 때 파일에 생성되고 각 요청에 대해 동일한 HTML이 반환됨)

어떤 경우든 서버에서 반환되는HTML은 다르지만 그 외는 모두 동일합니다.Vue 앱은 여전히 클라이언트에서 실행되며, 한 번 시작하면(그동안 서버에 의해 전송된 콘텐츠만 표시되므로) 서버에서 반환된 HTML보다 우선됩니다.

이 때문에, 「점멸」이 발생하고 있어, 사이트가 완전히 정적으로 생성되었을 경우, 이 문제에 대한 간단한 해결책은 없습니다.

1. ★★★★★★★를 null SEO는 없습니다 .★★★★★★★★★★★★...
2. 타겟이 SEO인 경우 인증된 클라이언트에 대한 렌더링 콘텐츠는 기본적으로 Google(또는 다른 크롤러) 및 사용자에게 공개되기 때문에 의미가 없다고 생각합니다.따라서 애초에 인증 뒤에 숨겨야 하는 이유는 무엇입니까?
3. 남은 옵션은 인증되지 않은 사용자의 콘텐츠를 생성하고 이미 로그인한 사용자의 깜박임과 함께 작동하는 것뿐입니다.

예를 들어 auth/non-auth 콘텐츠를 한 페이지에 혼재시키지 않는 등 설계상 문제를 최소화할 수 있다고 생각합니다.그러나, 「실물이 아니다」라고 하는 간단한 예에서는, 해결 방법이 없습니다.

각(항법 가드) 전에 사용해야 합니다. 이 정도면 효과가 있을 것입니다.https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards 에서 사용자가 로그인하고 있는지 여부를 확인할 수 있습니다.

예를 들어 다음과 같습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

이 답변은 컴포넌트를 라우팅하기 위해 데이터를 전달하기 전에 Enter 키를 누르는데 도움이 될 것 같습니다.

언급URL : https://stackoverflow.com/questions/68400108/flickering-content-when-trying-to-show-non-authenticated-and-authenticated-conte