NextJS 中的雅虎财务加速答案

【问题标题】：Yahoo finance speedup in NextJSNextJS 中的雅虎财务加速
【发布时间】：2023-01-19 23:28:48
【问题描述】：

我在我的best stocks 页面上运行了 Google PageSpeed Insights，但得到了糟糕的结果，据说加载时间将近 6 秒，而实际上打开速度要快得多。

理想情况下，我希望静态生成此页面，但由于使用了 yahoo-finance2 包，据报道它是静态生成 + JSON（NextJS 术语中的 SSG）。

这是我的页面代码

import yahooFinance from 'yahoo-finance2'

export async function getStaticProps() {
const stocks = [{Ticker: "AAPL"},{Ticker: "ABNB"}]
await Promise.all(
    stocks.map(async (stock) => {
        stock['prices'] = await (await yahooFinance.historical(stock.Ticker, { period1: '2019-01-01', interval: '1mo' }))
        .map((stock) => ({[stock.date.toLocaleDateString('en-us', { year:"numeric", month:"short"})]: Math.round(stock.adjClose) }))
    })
)   
return {
    props: {
        ...posts.find(post => post.slug == 'best-stocks'),
        stocks: beststocks
    }
}

我以为NextJS会抓取最新的股票价格并在构建过程中为我生成一个静态页面，但它看起来不是这样，因为npm run build报告这个页面比较大（FirstJS Load是180KB并且用黄色写的）。

我正在考虑的另一个选择是将此逻辑移动到一个单独的 util\script 文件，该文件将在网站构建期间由 webpack 执行，并且仅以纯 json 格式输出价格，供页面稍后使用。

事情变得更糟，因为 yahoo-finance2 模块仅在使用 NextJS 13 中的旧文件和文件夹布局时才有效，但是当我尝试将所有内容移动到 layout.js 时，该模块开始破坏整个构建。

我知道 NextJS 13 AppDir 仍处于测试阶段，所以不能责怪 yahoo-finance2 开发人员，但请记住，在即将发布的版本中，NextJS 将依赖服务器端生成，我正在寻找完全自动化的解决方案，并且快速地。

此外，Turbopack 处于 alpha 阶段，但在遇到 AppDir 的一些问题后，我暂时不想尝试它，因为我猜它更不稳定。

也许有人已经成功地将 yahoo-finance2 与 Next JS 13 一起使用了？

【问题讨论】：

第一步是了解是什么让客户端捆绑包如此之大。见First Load JS shared by all is rather heavy in next.js。

标签： webpack next.js yahoo-finance

【解决方案1】：

事实证明，拖慢页面加载速度的不是 Yahoo Finance，而是 ChartJS 的 JavaScript 计算和渲染。因此，我为预渲染图像牺牲了锐利的矢量股票价格图表，以保持性能指标绿色。

【讨论】：