时间戳

首页 > 解决方案 > getInitialProps 和 getServerSideProps 中的多个 API 请求会降低性能 - Next.js

javascript - getInitialProps 和 getServerSideProps 中的多个 API 请求会降低性能 - Next.js

问题描述

请帮助解决此问题

我正在建立一个动态网站来显示现场比赛比分和统计数据，一切都很好。

在服务器上部署之前，我们在暂存环境中测试性能和压力测试。

在性能测试中，移动端得分为 50，桌面端得分为 80 。
Lighthouse 报告google 代码管理器和DFP需要时间来执行和初始服务器响应时间需要时间

我的问题是如何减少服务器初始响应时间和 Javascript 执行时间。我如何提高性能以下是我在代码中所做的详细信息

  1. 如何在不阻塞时间的情况下加载第三方脚本，如Google 跟踪代码管理器和DFP 脚本。我在_document.js和使用react-dfp包的 DFP 上添加了GA代码，但这会降低性能

  2. header，header2和Right bar和post list组件应该在我使用useEffect()钩子的 1 分钟间隔后刷新

  3. 借助Axios从getInitialProps中的 API获取Header、Footer、Rightbar、LeftBar组件数据。这些组件对所有页面都是通用的

  4. 借助Axios包在getServerSideProps中获取滑块和发布列表组件数据

页眉、页眉 2、左、右、页脚

dynamic () import使用函数导入的上述组件ssr:false

正常导入以下组件

滑块，帖子列表

在示例代码下方。

 ********** _app.js **********

 MyApp.getInitialProps = async (appContext) => {    
       const appProps = await App.getInitialProps(appContext);
       const header = await axios(header_api)
       const header2 = await axios(header2_api)   
       const left = await axios(left_api)
       const right = await axios(right_api)
       const footer = await axios(footer_api)
    
       return {        
           appProps:{
               header,
               header2,
               left,
               right,
               footer
           } 
        }
     }


    ************* Home.js ***********
    export async function getServerSideProps(context){    
       const slider = await axios(slider_api)
       const postlist = await axios(postlist_api)    
       return {
          props :{ 
                  slider,
                  postlist
          }    
     }


*********** _document.js ***************
class MyDocument extends Document {  
  
  render() {
    console.log('__document.js');    
    return (
      <Html lang="en">
      <Head>        
                ******* other third party scripts *** 
                <script async dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','XXXXXXXXX');`}}/>
      </Head>
      <body id="body-wrap">
      <noscript dangerouslySetInnerHTML={{ __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>`}}></noscript>
        <Main />        
        <NextScript />        
      </body>            
    </Html>
    )
  }
}

标签： javascriptreactjsnext.jsserver-side-rendering

解决方案

推荐阅读