如何在Hapi与Next.js间传递数据以避免两次后端调用？

当然可以在页面加载时直接把数据传递给Next.js，彻底消除两次后端调用的问题，以下是具体实现方式：

核心思路 #

在Hapi的路由处理逻辑中提前获取页面所需的初始数据，然后将数据直接传递给Next.js的页面组件，避免getInitialProps再发起一次Ajax请求。

实现步骤 #

1. 在Hapi中预取数据并挂载到请求对象
   把原本在getInitialProps里的后端数据获取逻辑移到Hapi的路由处理函数中，然后将数据挂载到原生请求对象上：

   // Hapi server handling
   server.route({
       method: ['GET'],
       path: '/hello-world',
       handler: async (
           _request: hapi.Request,
           _response: hapi.ResponseToolkit
       ) => {
           const {
               raw: { req, res },
           } = _request;
   
           // 执行原本在getInitialProps中的数据获取逻辑
           const initialData = await fetchYourData(); // 替换为你的实际数据获取代码
   
           // 将数据挂载到req的自定义属性上（TS环境需添加类型断言）
           (req as any).initialData = initialData;
   
           return this.app.renderToHTML(req, res, '/hello-world', {});
       },
   });
   

2. 在Next.js页面中直接读取预传的数据
   修改getInitialProps，服务端渲染时直接从请求对象中获取预取的数据，无需再发起Ajax请求：

   // Next page
   public static async getInitialProps(ctx: NextPageContext) {
       const { req } = ctx;
       
       if (req) {
           // 服务端渲染时，直接使用Hapi预传的数据
           return { initialData: (req as any).initialData };
       }
   
       // 客户端渲染场景（如路由跳转），可从__NEXT_DATA__读取或按需重新请求
       return __NEXT_DATA__.props.pageProps;
   }
   

关于查询参数传递的合理性 #

用查询参数传递数据不推荐，存在以下问题：

• 容量限制：URL长度有浏览器上限，无法传递大量或复杂结构的数据
• 安全风险：敏感数据会直接暴露在URL中，易被拦截或篡改
• 体验糟糕：冗长的URL不利于调试，也会影响用户体验

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