0

I'm trying to figure out a basic thing about Nuxt "Universal" mode with the help of my dev tools, but I am just not sure if I understand it correctly.

Every time I request a new route in the Universal Nuxt app it seems to send a 200 (OK) request to the Node server. Did I understand correctly that on every page request a new document gets requested and served up by the Node server?

Some people are claiming that even while running the Universal mode the Node server sends only one package and after that the navigation and subsequent pages are loaded on the client side, thus not hitting the Node server anymore, but this is not the case right, how could the search engine crawler index that?

Essentially on every new route instead, the page gets re-requested from the Node server in its pre-rendered form right? This is how the "Universal" mode is actually SEO friendly as the crawler can look through all the pages and index it correctly to Google or Bing?

I'm sorry as I'm just a beginner with Nuxt and I fully understand (I think) how SPA as well as the Nuxt Generate modes work but this Universal mode is still a mystery for me at this point.

I would be very thankful for any clarifications on this!!! It would be super valuable in my learning journey! Thanks!

iamsanteri
  • 3
  • 2

1 Answers1

1

It's important to understand different "kinds" of navigation.

If you are navigating to a route by typing it into browser's URL bar, browser is hitting server (and this has nothing to do with Nuxt specifically) and what you get back is HTML with HTML content of your route pre-rendered by Nuxt + js bundle. Same thing happens if you use F5 (reload).

If on the other hand you use <nuxt-link> inside of some Nuxt page pointing to a different route/page and you click it, underlying Vue router will be used to switch to a different page (Vue component), server is not requested (for HTML) and new component (page) will handle rendering client side only

There can be an Ajax request when navigating that way but request is not for server-side rendered HTML. It's for additional JS content. Its because Nuxt is using automatic code-splitting (so when you hit the server 1st time, only JS needed for that route to work is loaded). Once the JS bundle for a specific route is loaded, it will not load again on subsequent navigation and unless your page/components inside are loading data from some API, you will not see any requests to a server during navigation....

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • Thank you for the exact answer and description for what I was looking for! This is such a godsend for me as you also wrote this in an accessible form... Is there some further reading available on this, or is it an intuitive conclusion when one works more with Nuxt? So did I then understand correctly, that the crawlers essentially hit the server for every possible route that they can find via an xml sitemap, or the pre-rendered standard anchor tags, and thus everything gets indexed correctly for the search engines? Pretty cool stuff... – iamsanteri Dec 09 '19 at 16:19
  • Glad it helped. I didn't used Nuxt before so I was googling a bit but didn't found any useful information of that kind so I made a conclusion based on my experience with Vue a working with Vue Router specifically. I don't know much about how web crawlers work but I assume your understanding is correct.... – Michal Levý Dec 09 '19 at 16:37