1

Maybe this is a stupid question, I am using the fetch method but I observed that initially, it's showing the default title which I have set in my layout/default.vue but after half second the title is getting updated which is set from the head method of the page. Is this change in title bad for SEO.

I read on some other answers asyncData blocks the page transition until it resolves. does this mean fetch reduces initial server response time compare toasyncData

kissu
  • 40,416
  • 14
  • 65
  • 133
Kunal Rajput
  • 664
  • 1
  • 7
  • 21

1 Answers1

1

At the end, the best result that you can get regarding SEO is to have the whole thing totally static. So, having a static head meta-tag too.
As explained in this amazing video.

The best way to see what the Google crawler may see first (even if he is crawling your SPA but it delivers a lower score) is to preview your app without any JavaScript or view the source code (ctrl + u) directly.
You can disable JS via your devtools.

The half-second change that you see is basically the difference between:

  • the app initially served from the server
  • the hydrated app that brings the full power of your Vue.js SPA app

It would be best to have as little difference as possible between both.

asyncData is basically working as:

  • you're on page A
  • you load the content of page B
  • you move to page B

fetch is working like:

  • you are on page A
  • your move to page B
  • you load the content of page B

fetch() can mainly provide a better experience regarding skeletons/loaders but the total time between data readable on page A and page B is the same with both hooks (in exactly same conditions of course).

Finally, it will not reduce the initial loading time because there is no route transition initially (you "arrive" on the page, like when your press F5).

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    Thanks for explaining everything in detail, I just checked by disabling javascript and viewing the source code it is giving me proper page title, What would you advise should I keep ```fetch``` to update the head method or switch to ```asyncData``` . I really appreciate for sharing the video and all your support. Thanks – Kunal Rajput Apr 23 '22 at 18:18
  • 1
    @KunalRajput it doesn't really matter, both should work fine. Depends on the type of experience you do prefer. Blocking or non-blocking mainly, there are also some little quirks that the commented link under your question is explaining a bit more in-depth. – kissu Apr 23 '22 at 18:23
  • Downvoted because the answer does not explain the difference to SEO. "Going static" is no answer to why nuxt fetch does not do the documented server-rendering and delivers rendered HTML like asyncData does – ProblemsOfSumit Mar 30 '23 at 09:37
  • @ProblemsOfSumit `fetch` still can run on the server. Easy to debug if you follow the steps I gave above. – kissu Mar 30 '23 at 11:37