Granular SSR/client rendering of components

[galvez]

This is a petition to move nuxt-static-render to the nuxt-community namespace.

nuxt-static-render is a lightweight, Nuxt-targeted alternative to vue-lazy-hydrate. It offers the ability to render components on the server without delivering the data used in __NUXT__, with optional ability to rehydrate on the client only if needed.

<template>
  <div class="wrapper">
    <nuxt-static-render class="top">
      <div>{{ $staticData.foobar }}</div>
    </nuxt-static-render>
    <div class="bottom" @click="counter++">
      <div>
        <p>This component should remain operational.<p>
        <p>Here's a counter: {{ counter }}. Click to increment.</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  serverData() {
    return {
      foobar: 'This should not be in __NUXT__'
    }
  },
  asyncData() {
    return {
      counter: 1
    }
  }
}
</script>

Moreover, due to the simplicity of the implementation and small footprint of the module, perhaps we can also considering add a <nuxt-render> core built-in?

[husayt]

@galvez what is different between this and #22. The latter is about to be release shortly.

[pi0]

@husayt With full static, we still have a payload which includes server data and hydration happens for all nodes. This RFC is to avoid transferring unnecessary data to client side and extra hydration

[ElMatella]

Quick question, when navigation happens on client side, does the serverData hook triggers on client side to hydrate html?

[jpsc]

Will nuxt-static-render still be relevant when Vue 3 is added with partial hydration?

[galvez]

@jpsc I don't think so.