[Vuejs]-Nuxt – render HTML only on server side

by

0👍

AFAIK, there is no way to have it rendered only on the server because it’s the main purpose of Nuxt (being isomorphic: server + client).

There is probably some other way to make it a bit more performance efficient.

0👍

I’ve figured it out.

I’ve created new Header component:

export default {
  render(createElement: CreateElement) {
    if (process.server) {
      const fs = process.server ? require('fs') : null;
      const file = fs.readFileSync('./header.txt', 'utf8');
      return createElement('div', { domProps: { innerHTML: f } });
    }
    return createElement('div', { domProps: { innerHTML: this.$el.innerHTML } });
  },
}

And I use it instead v-html in main component:

<Header />
<div class="container">
    <Nuxt />
</div>

In this way on the server side Nuxt loads file to variable, set html using innerHTML and returns the page to client (without header content stored in component data).
On the client side Header component render what is already inside it.

0👍

So I know I’m late to the party, but if anyone reads this now, Nuxt3 actually has a solution for this:

https://nuxt.com/docs/guide/directory-structure/components#server-components

These components will only be rendered on the server and will reduce impact on hydration.

Leave a comment