NextJs 13应用程序第一次渲染在EC2示例上非常慢

bnlyeluc 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(114)

我已经在AWS EC2示例中部署了我的NextJS 13.4应用程序，该示例具有2 Gb的RAM。我知道在开发模式下，nextjs会进行构建并显示结果，这可能会减慢页面的加载速度。但它需要近20秒加载第一次。
下面是RootLayout的代码，RootLayout是我网站的入口点，包含来自API的动态数据。

export default async function RootLayout({ children }) {
  let token = cookies().get("byg_tk");
  let cookie =
    cookies().get("Device_id")?.value || headers().get("Device_id") || uuidv4();

  const categories = await getCategory(
    { page: 1, limit: 1000000 },
    token,
    cookie
  );

  const product = await getProduct(
    {
      page: 1,
      limit: 100000,
    },
    token,
    cookie
  );
  const cartList = await getCartList({}, token, cookie);
  const contact_us = await getContactUs({}, token, cookie);
  const contact_number = await getContactNumber({}, token, cookie);
  let searchProducts = await getProductBySearch({}, token, cookie);
  let coupons = await getCoupons({}, token, cookie);
  let userdetails = await getUser({}, token, cookie);
  const recent = await getRecentViews({}, token, cookie);
  let cartDetails = {
    couponDiscount: 0,
    cod_price: 0,
  };

  return (
    <html lang="en">
      <GoogleAnalytics GA_TRACKING_ID={GA_TRACKING_ID} />
      <Script
        id="bookyourgiftSchema"
        dangerouslySetInnerHTML={{
           __html: JSON.stringify(byg_schema(), null, "\t"),
        }}
      />
      <Script
        id="bookyourgiftSocialSchema"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(byg_social_schema(), null, "\t"),
        }}
      />
      <body>
        <Providers
          data={{
            coupons,
            categories,
            product,
            cartList,
            searchProducts,
            userdetails,
            contact_us,
            contact_number,
            cartDetails,
            recent,
          }}
        >
          {children}
        </Providers>
      </body>
    </html>
  );
}

我试着删除未使用的依赖项，尽可能小地分割代码，但第一次渲染总是很慢。我知道服务器在给予回所需的html和数据方面起着很大的作用。但是，对于EC2示例中的单个项目，这不应该是一个很大的交易。
下面是根据大小过滤的网络选项卡的屏幕截图。
network tab result for first render
是什么因素影响了第一次渲染的速度？如何优化以立即获得第一次渲染？
我已经尝试删除所有未使用的依赖项，CSS和其他影响构建大小的重依赖项。我不太确定如何减少JS文件，所以我不能说我做到了。我还使用了react中的cache方法来缓存API调用。但这两种方式似乎都不起作用。我还使用了图像优化，并根据NextJs的建议添加了尖锐的包太多。

next.js

来源：https://stackoverflow.com/questions/76503991/nextjs-13-app-first-render-is-very-slow-on-ec2-instance

1条答案

按热度按时间

6tdlim6h1#

这是由foodsc数据获取的“瀑布”引起的，主线程等待直到所有数据都被解析：

const cartList = await getCartList({}, token, cookie);
  const contact_us = await getContactUs({}, token, cookie);
  const contact_number = await getContactNumber({}, token, cookie);
  let searchProducts = await getProductBySearch({}, token, cookie);
  let coupons = await getCoupons({}, token, cookie);
  let userdetails = await getUser({}, token, cookie);
  const recent = await getRecentViews({}, token, cookie);

Next.js有两个推荐的数据获取解决方案：

useEffect()挂钩
SWR库来自Next.js的创建者。

另外，我建议将其拆分为多个组件，并在每个组件中独立获取数据。

useEffect（）钩子数据获取

import { useState, useEffect } from 'react'
 
function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

取数SWR库

import useSWR from 'swr'
 
const fetcher = (...args) => fetch(...args).then((res) => res.json())
 
function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)
 
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

您可以在official documentation of Next.js中阅读更多信息

赞(0）回复(0）举报 2023-10-18

我来回答

NextJs 13应用程序第一次渲染在EC2示例上非常慢

1条答案

useEffect（）钩子数据获取

取数SWR库

相关问题

热门标签

最新问答