使用服务器端渲染延迟加载第三方 React 组件

问题描述

我有一个页面，在该页面上正在渲染并在可见视口下方播放一些动画。在我们的例子中，我们使用 react-lottie 来渲染动画，尽管我认为这个问题与任何第三方 React 组件相关。

import React from 'react'
import Lottie from 'react-lottie'

const MyPage = () => {
    return (
        <div>
            {* VarIoUs other tags and components here *}
            <Lottie style={animationStyle} options={animationoptions} />
        </div>
    )
}

页面本身正在服务器端呈现，并将完全呈现的页面发送到客户端进行显示。我想要实现的是在我的页面上延迟加载动画组件，因为它位于折叠下方，并且只有在滚动组件时我才会加载该组件并从 CDN 等获取任何所需的资源。

我阅读了一些关于 React 延迟加载和特别是动态导入的文章，并在我的 @loadable/component 中包含了一个 package.json。

然后，我可以这样做：

import loadable from '@loadable/component'
const Lottie = loadable(() => import('react-lottie'),{ ssr: true })

但是，这似乎不会延迟加载组件，因为如果我打开浏览器开发人员工具的“网络”选项卡并访问该页面，我会看到在呈现页面时从 CDN 获取动画文件。我希望在呈现页面时不会看到它被获取，而是在我滚动到实际使用组件的位置附近时被获取。

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）