Nuxt - 仅在服务器端渲染 HTML

Question

我的页面有一个标题，我从服务器中的文件中获取：

data() {
  return {
    headerHTML: ''
  };
},
fetch() {
  this.headerHTML = fs.readFileSync('./header.html', 'utf8');
}

我使用 v-html 渲染标题：

<div v-html="headerHTML"></div>
<div class="container">
    <Nuxt />
</div> 

它工作正常，但标头从服务器发送到客户端两次 - 第一次在服务器端渲染过程中生成的 HTML 中，第二次作为 Vue 组件中的数据“headerHTML”。标头很大，因此会影响性能。 有没有办法只在服务器上渲染 HTML，而不向客户端发送数据？

Answer 1

AFAIK，没有办法让它只在服务器上渲染，因为这是 Nuxt 的主要目的（同构：服务器 + 客户端）。

可能还有其他方法可以提高性能效率。

Answer 2

我已经弄清楚了。

我创建了新的标题组件：

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 } });
  },
}

我在主要组件中使用它代替 v-html ：

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

以这种方式，在服务器端Nuxt将文件加载到变量，使用innerHTML设置html并将页面返回给客户端（没有存储在组件数据中的标头内容）。 在客户端 Header 组件渲染其中已有的内容。

Answer 3

所以我知道我迟到了，但如果有人现在读到这篇文章，Nuxt3 实际上有一个解决方案：

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

这些组件只会在服务器上渲染，并减少对水合作用的影响。