feat(vue-app): context.beforeSerialize method

[dovca]

Edited by @Atinux

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR adds a beforeSerialize method in the context that can be used to modify window.__NUXT__ after waiting for serverPrefetch, fetch and asyncData, store actions and so on. This will solve hydration issues with plugins like @nuxtjs/apollo and others.

⚠️ Note that beforeSerialize expects a function to be synchronous now since the rendered method is synchronous in Vue: https://github.com/vuejs/vue/blob/dev/src/server/create-renderer.js#L89

The official documented way to wait until the ssr renderer has finished and inject the final state is using ssrContext.rendered.

Resolves: #9155, resolves #8620, resolves #8852 and possibly resolves nuxt-modules/apollo#352 after some more work in that repo.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: feat: add beforeSerialize website-v2#1475)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

Will be happy to write up the docs if/when this gets accepted.

[codecov-commenter]

Codecov Report

Merging #9332 (cfb9816) into dev (fa12cf1) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #9332   +/-   ##
=======================================
  Coverage   65.15%   65.15%           
=======================================
  Files          94       94           
  Lines        4107     4107           
  Branches     1125     1125           
=======================================
  Hits         2676     2676           
  Misses       1153     1153           
  Partials      278      278           

Flag	Coverage Δ
unittests	65.15% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fa12cf1...cfb9816. Read the comment docs.

[Atinux]

Hi @dovca

Thank you for the pull request, I believe this is a nice implementation and needed since the new fetch.

I let Pooya and Daniel take a look too at it, if good, you can start adding a PR to nuxt/nuxtjs.org repo to document it.

[Atinux]

Another thing in mind, we may also just move beforeNuxtRender so it works for any scenario.

afterNuxtRendermethod is not really good: we are still before Nuxt render the HTML

EDIT: we have no choice since using a method in rendered() has to be synchronous (see https://github.com/vuejs/vue/blob/80e7730946538e0371e213100a0fe81299c2f4b2/src/server/create-renderer.js#L89)

[Atinux]

Ideally, we should have beforeNuxtRender inside rendered and force it to be synchronous, but this would lead to a breaking change.

One solution might be to rename beforeNuxtRender to beforeRender and deprecate beforeNuxtRender.

[pi0]

We can keep beforeNuxtRender since name is valid, asynchronous hook and already used by many plugins (deprecating is not necessary) but agree that afterNuxtRender naming is not good. What about beforeSerialize() ?

[Atinux]

Added the PR for docs: nuxt/website-v2#1475

[fabis94]

Hi, when will this be released?

[pi0]

Hi @fabis94 it will be released with 2.16 (next minor -- no eta now) but in the meantime, you can try switching from nuxt to nuxt-edge