Nuxt 3 ready钩子未触发问题排查及单次API获取实现

问题根源 #

你之前用插件绑定ready钩子失效，是因为：

1. ready是客户端专属钩子，服务端渲染场景下不会触发，且每个客户端实例加载时都会执行，不符合「仅调用一次」的需求
2. 要实现服务器启动后全局复用结果，必须在Nitro服务器引擎的启动阶段执行API调用，这是Nuxt3服务端唯一的全局初始化时机

实现步骤 #

1. 创建Nitro服务器插件（启动时单次调用API） #

在项目根目录新建server/plugins/block-height.ts（无对应文件夹则手动创建）：

export default defineNitroPlugin(async (nitroApp) => {
  // 服务器启动时仅执行一次API请求
  try {
    const response = await fetch('https://mempool.space/api/v1/blocks')
    if (!response.ok) throw new Error(`请求失败：${response.status}`)
    
    const blocks = await response.json()
    const commitBlockHeight = blocks[0].height.toString()

    // 将结果写入公共运行时配置，让客户端可访问
    nitroApp.options.runtimeConfig.public.commitBlockHeight = commitBlockHeight
    console.log('区块高度初始化完成：', commitBlockHeight)
  } catch (err) {
    console.error('获取区块高度失败：', err)
    // 兜底默认值
    nitroApp.options.runtimeConfig.public.commitBlockHeight = '0'
  }
})

2. 配置Nuxt启用插件 #

在nuxt.config.ts中添加Nitro插件配置：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      commitBlockHeight: '' // 预留字段，由Nitro插件赋值
    }
  },
  nitro: {
    plugins: ['~/server/plugins/block-height.ts'] // 注册服务器插件
  }
})

3. 页面中使用全局结果 #

在任意页面组件中，直接通过运行时配置或NuxtApp获取值：

<template>
  <div>当前区块高度：{{ blockHeight }}</div>
</template>

<script setup>
// 方式1：通过useNuxtApp获取（如果需要封装逻辑可扩展插件provide）
const { $commitBlockHeight } = useNuxtApp()

// 方式2：直接读取运行时配置
const runtimeConfig = useRuntimeConfig()
const blockHeight = parseInt(runtimeConfig.public.commitBlockHeight)
</script>

效果验证 #

执行nuxt build或nuxt start后，控制台会输出一次初始化日志，之后所有页面访问都会复用同一个区块高度值，不会重复调用API。

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