为什么nuxt.js会调用SSR中的beforeCreate,created hook？

Question

Currently, we are developing SPA using nuxt.js. One question arises is that the beforeCreate and created hooks are called in SSR mode, and when the SSR is finished, they are called again in CSR.

Just looking at the nuxt.js life cycle image, I am confused because there is no explanation for the content.

Any answers would be appreciated!

Answer 1

Nuxt use the Vue SSR under the hood and you can find a start of explanation in it documentation: https://ssr.vuejs.org/guide/universal.html#component-lifecycle-hooks

Component Lifecycle Hooks

Since there are no dynamic updates, of all the lifecycle hooks, only beforeCreate and created will be called during SSR . This means any code inside other lifecycle hooks such as beforeMount or mounted will only be executed on the client.

First, the Vue SSR server runs the lifecycle hooks to build the HTML content from the Vue app. Then after the Vue Hydratation on client side, the front-end have to re-play all the Vue livecycle hooks in order to run the JS app in your browser.