All Projects → galvez → Nuxt Static Render

galvez / Nuxt Static Render

Nuxt module for SSR without rehydration payload

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Nuxt Static Render

Sitemap Module
Sitemap Module for Nuxt
Stars: ✭ 539 (+1584.38%)
Mutual labels:  nuxt, nuxtjs, ssr
Wemake Vue Template
Bleeding edge vue template focused on code quality and developer happiness.
Stars: ✭ 645 (+1915.63%)
Mutual labels:  nuxt, nuxtjs, ssr
Vue Masonry Wall
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
Stars: ✭ 79 (+146.88%)
Mutual labels:  nuxt, nuxtjs, ssr
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (+21.88%)
Mutual labels:  nuxt, nuxtjs, ssr
Nuxt Ssr Firebase
Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting
Stars: ✭ 273 (+753.13%)
Mutual labels:  nuxt, nuxtjs, ssr
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (+68.75%)
Mutual labels:  nuxt, nuxtjs, ssr
Surmon.me
🆒 My personal website and blog, powered by @vuejs (3)
Stars: ✭ 1,767 (+5421.88%)
Mutual labels:  nuxt, nuxtjs, ssr
Virapro.ru
[E-commerce] Plumbing Store
Stars: ✭ 45 (+40.63%)
Mutual labels:  nuxt, nuxtjs, ssr
jooger.me
👍 My personal website,powered by @nuxt
Stars: ✭ 39 (+21.88%)
Mutual labels:  ssr, nuxt, nuxtjs
awrora-starter
Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.
Stars: ✭ 38 (+18.75%)
Mutual labels:  ssr, nuxt, nuxtjs
Sails Nuxt
Sails + Nuxt + Vuetify Combo <3
Stars: ✭ 92 (+187.5%)
Mutual labels:  nuxt, nuxtjs, ssr
Nuxt Firebase Sns Example
Nuxt v2 & Firebase(Hosting / Functions SSR / Firestore), Google Auth SNS Example.
Stars: ✭ 485 (+1415.63%)
Mutual labels:  nuxt, nuxtjs, ssr
laravel-nuxt
Laravel 5.6 + Nuxt 1.4: Auth Starter (SSR, SPA, Socialite)
Stars: ✭ 19 (-40.62%)
Mutual labels:  ssr, nuxt, nuxtjs
Blog Front
blog-front @nuxt
Stars: ✭ 305 (+853.13%)
Mutual labels:  nuxt, nuxtjs, ssr
Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+2103.13%)
Mutual labels:  nuxt, nuxtjs, ssr
Nuepress
📖 Nuxt.js + WordPress REST API
Stars: ✭ 524 (+1537.5%)
Mutual labels:  nuxt, ssr
Firebase Module
🔥 Easily integrate Firebase into your Nuxt project. 🔥
Stars: ✭ 493 (+1440.63%)
Mutual labels:  nuxt, nuxtjs
Hoppscotch
👽 Open source API development ecosystem https://hoppscotch.io
Stars: ✭ 34,569 (+107928.13%)
Mutual labels:  nuxt, nuxtjs
Doccano
Open source annotation tool for machine learning practitioners.
Stars: ✭ 5,600 (+17400%)
Mutual labels:  nuxt, nuxtjs
Awes Io
Awes.io // boilerplate based on Vue, Nuxt, TailwindCSS plus Laravel as a backend. 🤟
Stars: ✭ 599 (+1771.88%)
Mutual labels:  nuxt, ssr

nuxt-static-render

Nuxt's asyncData comes at a cost: the embedded __NUXT__ payload.

What if you could render some markup on the server and not hydrate it on the client? You'd get a dead component: unable to properly update (re-render) on the client-side following data updates. Even worse: you'd get a node mismatch error, since the client wouldn't have the actual data to rerender it.

Sometimes though, a dead component is exactly what you need: say you're just fetching data on the server to render some content, but won't ever update this fragment on the client-side.

nuxt-static-render gives you that functionality with some caveats.

Install with:

npm install nuxt-static-render --save

Add to your Nuxt project via modules:

export default {
  modules: ['nuxt-static-render']
}

Usage

Simply wrap your dead markup fragments in <nuxt-static-render> anywhere on the page, as many times as needed.

Use $staticData to access the static rendering data. It is automatically populated on the server by the serverData() handler, which you can add to any Nuxt page. From the included example:

<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>

The top div, rendered with <nuxt-static-render> should have markup based on $staticData.foobar, which is only populated on the server and is not added to the __NUXT__ payload. That means this data will only be used on the server to render markup and immediately discarded.

Why not call it $serverData instead of $staticData? Because it's static data populated via the serverData() function. The same data object ($staticData) can also be populated via clientData(), so it made more sense to use $staticData for the data object.

Caveats

If you tried to do this:

<nuxt-static-render class="top">
  <div>{{ $staticData.obj.foobar }}</div>
</nuxt-static-render>

It would result in the following error:

error-shot

Because in the first template compiler run, obj does not exist yet. In this implementation, data for static rendering must be readily available in $staticData. If you know how to circumvent this limitation, let me know. Yes, I tried v-once but it appears to requires hydration data to be available on the client-side for at least one render. cc @yyx990803 :)

Advanced

Say you have a huge chunk of markup that needs to be server-rendered for SEO, but you don't want a massive __NUXT__ payload to go with it. Still, once that markup is rendered on the client, you have bits of it that need hydration so they can continue to be updated on the client. For this specific case, you can provide clientData():

export default {
  serverData() {
    // This is used to instantly render the fragments
    // on the server and deliver ready-for-display markup
    return {
      foobar: 'This should not be in __NUXT__'
    }
  },
  clientData() {
    // This is loaded asynchronously post-mount, i.e.,
    // server-side content is immediately displayed while
    // the page silently hydrates and gets ready for 
    // further dynamic updates on the client
    return {
      foobar: 'This should not be in __NUXT__'
    }
  }
}

In this usage, you can also define:

export default {
  clientDataLoaded(data) {
  }
}

As a way of knowing when the data has been fully hydrated on the client.

Use this feature only if you absolutely must avoid __NUXT__-based hydration due to exceptionally large content.

Kudos

To Markus Oberlehner for vue-lazy-hydration, which served as inspiration for this module. The asyncFactory render() hack is mainly what makes this possible at all.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].