Nuxtjs v2中不使用Vuex store实现服务端全局变量的方法

核心思路 #

要实现仅服务端加载、不传递到客户端、无需hydration的渲染数据，关键是让数据只在服务端生命周期内存在，客户端不渲染依赖该数据的DOM节点，同时避免将数据写入window.__NUXT__的data/state中。

方案1：服务端专属插件注入全局数据 #

通过Nuxt的服务端插件，将数据挂载到Nuxt上下文，仅服务端可访问：

1. 创建服务端插件文件 ~/plugins/server-only-data.js：

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    // 加载你的300KB数据（本地文件/API请求均可）
    const serverOnlyData = require('../assets/server-render-data.json')
    // 将数据挂载到Nuxt上下文
    nuxtApp.context.serverRenderData = serverOnlyData
  }
})

2. 在nuxt.config.js中配置插件为仅服务端运行：

export default {
  plugins: [
    { src: '~/plugins/server-only-data.js', mode: 'server' }
  ]
}

3. 在组件/页面中使用数据，客户端返回空值避免传递：

export default {
  asyncData({ context }) {
    if (process.server) {
      // 服务端获取数据用于渲染
      return { renderData: context.serverRenderData }
    }
    // 客户端返回空，数据不会进入window.__NUXT__.data
    return { renderData: null }
  },
  // 仅在服务端渲染数据相关DOM
  render(h) {
    if (process.server && this.renderData) {
      return h('div', this.renderData.map(item => h('p', item.content)))
    }
    // 客户端渲染空节点
    return h('div')
  }
}

方案2：自定义ServerOnly组件隔离服务端渲染内容 #

封装一个仅服务端渲染的组件，直接跳过客户端的DOM渲染，从根源避免hydration需求：

1. 创建~/components/ServerOnly.vue：

<template>
  <template v-if="isServer">
    <slot />
  </template>
</template>

<script>
export default {
  computed: {
    isServer() {
      return process.server
    }
  }
}
</script>

2. 在页面/组件中结合方案1的数据使用：

<template>
  <div>
    <!-- 客户端会跳过这部分渲染，无需hydration -->
    <ServerOnly>
      <div v-for="item in renderData" :key="item.id">
        {{ item.content }}
      </div>
    </ServerOnly>
    <!-- 客户端正常渲染的内容 -->
    <div>客户端可见内容</div>
  </div>
</template>

<script>
export default {
  asyncData({ context }) {
    if (process.server) {
      return { renderData: context.serverRenderData }
    }
    return { renderData: null }
  }
}
</script>

方案3：服务端中间件预加载数据 #

如果数据需要提前在请求阶段加载，可通过服务端中间件挂载到请求对象：

1. 创建~/server/middleware/preload-data.js：

export default function (req, res, next) {
  // 预加载服务端数据
  req.serverRenderData = require('../assets/server-render-data.json')
  next()
}

2. 在nuxt.config.js中配置中间件：

export default {
  serverMiddleware: [
    '~/server/middleware/preload-data.js'
  ]
}

3. 在页面中通过req获取数据：

export default {
  asyncData({ req }) {
    if (process.server) {
      return { renderData: req.serverRenderData }
    }
    return { renderData: null }
  }
}

关键注意事项 #

• 所有数据的获取逻辑必须包裹process.server判断，确保客户端不执行
• 客户端返回的asyncData结果中，依赖服务端数据的字段必须设为null，避免被序列化到window.__NUXT__.data
• 使用ServerOnly组件或process.server条件渲染，确保客户端不渲染依赖服务端数据的DOM，彻底避免hydration问题

内容的提问来源于stack exchange，提问作者alexkarpen