我在我的best stocks页面上运行了Google PageSpeed Insights,得到了糟糕的结果,说它在近6秒内加载,而实际上它打开得更快。
理想情况下,我希望静态生成此页面,但由于使用了yahoo-finance 2包,因此报告称它是静态生成的+ 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运行构建报告说这个页面相对较大(FirstJS Load是180 KB,用黄色书写)。
我考虑的另一个选择是将这个逻辑移到一个单独的util\script文件中,这个文件将在网站构建过程中由webpack执行,并以普通的json格式输出价格,以便稍后由页面使用。
事情变得更糟了,因为yahoo-finance 2模块只有在NextJS 13中使用旧文件和文件夹布局时才能工作,但当我试图将所有内容移动到layout.js时,此模块开始破坏整个构建。
据我所知,NextJS 13 AppDir仍处于测试阶段,所以不能责怪雅虎金融2开发人员,但请记住,在即将到来的版本NextJS将依赖于服务器端生成,我正在寻找解决方案,将是完全自动化和快速。
此外,Turbopack是在阿尔法,但在面临一些问题与AppDir,我不想尝试它现在,因为猜测它甚至更不稳定。
也许有人已经成功地使用了雅虎金融2和NextJS 13?
1条答案
按热度按时间pdsfdshx1#
结果不是雅虎财经减慢了页面加载速度,而是JavaScript计算和ChartJS渲染减慢了页面加载速度,所以我牺牲了锐利的矢量股价图,用预渲染的图像来保持性能指标的绿色。