Vue.js SSR中‘async components are resolved’的含义是什么？

I was reading the Client Data Fetching section in Vue.js SSR documentation, and came across this code snippet with comments:

router.onReady(() => { 
  // Add router hook for handling asyncData. 
  // Doing it after initial route is resolved so that we don't double-fetch 
  // the data that we already have. Using `router.beforeResolve()` so that all 
  // async components are resolved. 
  router.beforeResolve((to, from, next) => { 
    // .... 
  }) 
})

The comment mentions Using router.beforeResolve() so that all async components are resolved — I'm confused about what exactly "async components are resolved" means here.

Answer: #

Great question! Let's break this down in plain terms:

First, let's recap what Vue async components are: these are components that aren't bundled with your main app code right away. Instead, they're loaded on-demand (usually via dynamic import(), like () => import('./AsyncProfile.vue')) to keep your initial app bundle small and speed up first load.

When the comment says "async components are resolved", it refers to three key steps that complete before the beforeResolve hook runs:

• The code for the async component has finished downloading from the server.
• Vue has fully processed the component (compiling its template, parsing its script, and setting up its styles if it's a single-file component).
• The component is totally ready to be instantiated, rendered, and have its logic executed (like calling its methods or accessing its data properties).

Why does this matter for SSR client-side data fetching?

Vue SSR's client-side data fetching relies on running logic (like the asyncData method referenced in the comment) to populate component data before rendering. If we used an earlier hook like router.beforeEach, it would trigger before any async route components finish loading. That means we couldn't access the component's asyncData method (or any component-specific logic) yet, leading to errors or missing data.

By using router.beforeResolve(), we ensure that:

• All async components linked to the target route (to route) are fully loaded and ready to use.
• Any nested async components (child components that are also loaded on-demand) are resolved too.
• We can safely run component-level data fetching logic without worrying about missing or uninitialized components.

In short, "async components are resolved" guarantees every piece of component code needed for the target route is available and prepared before we start fetching data, keeping the data fetching process reliable and in sync with component loading.

内容的提问来源于stack exchange，提问作者李文浚