问题标签 [react-suspense]

我目前正在努力在服务器端为 Vitesse SSR App 调用这个 Suspense 函数。（应用程序：https://github.com/frandiox/vitesse-ssr-template）在服务器端而不是在客户端使用 Suspense 是否有更好的效果。我确认 Suspense 在客户端可用，但是如果我渲染它，被 Suspense 标签包围的 HTML 组件会消失。所以，我想在服务器端使用 Suspense 来消除 SEO 风险。强文本

我有一个Image接收图像名称的组件，并使用一些逻辑来确定资产文件夹的位置。

我的图像组件看起来像这样：

我期望的是<div>loading...</div>在图像被延迟加载时被渲染，并且图像在加载后被正确渲染。

实际发生的情况是在资产的加载阶段没有渲染任何内容，并且每当加载最终发生时，我都会收到错误图像，因为img's 的来源是：[object Object].

新的 Relay hooks API 将重点放在“render-as-you-fetch”的 React 模式上，到目前为止我真的很喜欢这个。中继useQueryLoader和usePreloadedQuery钩子在大多数情况下使实现这一点非常简单。

然而，我正在努力寻找一个关于如何在路由方面实现这种模式的好模式。我发现有两种典型情况使这难以实现。

情况一：

1. 用户加载主页 ( example.com/)
2. 用户深入应用程序树的一部分 ( example.com/settings/user/security/authentication)
3. 然后他们点击一个链接将他们带到他们应用程序中完全不相关的部分（example.com/blog/post-1）

情况乙：

1. 用户使用 URL 栏转到应用程序的某个部分，而不是使用链接 ( example.com/blog/post-1)

example.com/blog/post-1对于这些示例，有两种结果，用户要么通过嵌套子组件或直接通过 URL转到路由 ( )。所以我们为这条路线获取数据的方式必须支持这两种方法。

我假设我们希望尽早触发此路由的获取，因此当用户单击链接或我们在页面加载时检测到此路由时。

我可以想到三个想法来实现这一点：

1. 改用一个fetch-then-render模式（比如 Relay 的useLazyLoadQuery钩子）
2. 存储一个函数（比如在上下文中），并让该路由的所有链接在其onClick方法useEffect中调用该函数，如果没有加载数据，或者查询的引用已过时，还有一个用于该路由的调用该函数
3. 使用render-as-you-fetch函数但实现它们以fetch-then-render支持

方法一：

这违背了render-as-you-fetch模式的目的，但它是一种简单的出路，更有可能是一种“更清洁”的方式来实现为路由获取数据。

方法二：

在实践中，我发现这很难实现。通常，指向路由的链接与组件渲染路由所在的组件树的一部分断开连接。并且使用上下文意味着我必须loadData为特定路线管理不同的功能（当涉及变量等时这可能会很棘手）。

方法3：

这就是我目前一直在做的事情。在实践中，它通常会导致能够将加载数据函数传递给附近的组件，但是如果断开连接的组件、URL 或页面重新加载等访问路由，则组件会退回到调用加载useEffect钩子中的数据函数。

有没有人对他们如何实现这一点有任何其他想法或例子？

我在反应应用程序中使用 ChartJS (v2)。我正在尝试创建图表的页面报告，并且发现它们加载/渲染速度很慢。

演示： https ://mfahelper.netlify.app/charts 如果单击“图表报告”，它将加载下面的各种图表。

我试过用悬念边界包围图表，但似乎没有任何效果。此外，如果我对过滤器进行更改，页面需要很长时间才能重新呈现。

当我有一个单一图表（如“交互式”图表）时，加载/渲染速度要快得多，所以我怀疑最好的解决方案是让我的每个 REPORTS 图表按顺序加载。我只是不确定现在该怎么做。

我的代码目前看起来像这样（为了简单起见，我删除了一些代码）：

谁能建议我需要介绍什么来处理单击“图表报告”按钮后页面冻结的几秒钟？

在我的应用程序中，我有两个大型组件，其中包括很多面板，每个面板都有几个或更多其他组件。这需要很长时间才能渲染。我猜1-2秒。

这是如何工作的一个简单示例。我有 2 个标签，我们可以称它们为 tab1 和 tab2。如果我点击 tab1，我将渲染 DummyPanel，如果我点击 tab2，我将渲染 ResponsivePanel。问题是，这些面板的渲染速度很慢，应用程序将冻结 1-2 秒。

所以我需要一些东西如果我渲染这些组件，它会设置加载，当组件准备好时，它会渲染它们。或者将渲染前 5 个面板并逐渐休息。

我发现 React.lazy + Suspense。在加载和第一个选项卡交换（tab1/tab2）时效果很好。它将设置加载，然后渲染组件。但问题是它只会在第一次尝试时起作用，如果我开始在选项卡之间交换后它会停止使用延迟加载 + 悬念。它只是冻结了一秒钟，然后重新渲染面板。

我猜是因为缓存，应用程序会下载部分。缓存它们并停止再次悬念。

所以问题是，有没有办法解决这个问题，在每个标签交换上强制懒惰+暂停？或者你们知道更好的解决方案吗？总是先加载加载，然后加载组件，或者它会渲染前 5 个面板，然后慢慢渲染其余的面板？

代码片段，我在其中渲染 suspense + 惰性组件。如果 tabIndex === 0 或 1，则只有“if”语句。所以 tab1 是 tabIndex = 0，而 tab2 是 tabIndex = 1

);

我正在尝试使用 suspense 从 Firebase 存储加载 GLTF 模型。为此，我需要先使用 getDownloadURL 方法异步获取模型的 URL，然后才能加载它。我所看到的是加载程序被反复调用，但从未使用过响应 - 我确定我错过了一些简单的东西..

我已将代码放入此代码沙箱中，它使用了在互联网上似乎相当常见的示例，我已替换了 firebase 访问器（因为它需要私有访问密钥才能按预期工作）但替换函数返回一个相当简单的超时后的网址。

总结一下沙盒，如果它是一个获取下载 url 的函数，它包裹在一个挂起函数中：

这在我的代码中使用如下：

挂起函数正确地抛出了它的promise，并且promise 解析了设置结果，但是挂起函数本身不断被调用并且result 方法总是未定义。

我尝试使用 React 延迟和 Suspense 加载。我有用于延迟加载的简单登录页面和动画页面。但是，如果我刷新或打开此页面，我将看不到动画。但是当fallback = <p> Loading... </p> 这样写它是工作。如何用动画做到这一点？
这是我延迟加载的主页：

这个动画页面：

我怎么能像上工作负载动画一样做到这一点？

我正在使用React.lazywithSuspense来设置加载。

在我的代码中，我将超时设置为3000，但我的目标是让它加载，直到它完全获取所有数据，然后一次呈现所有数据。

有没有办法做到这一点？还是有更好的方法来设置加载？

我的应用程序.jsx

我的场景.jsx

我的问题：

每次我启动应用程序时，环境都不会加载，并且出现以下错误：

如果我在实时服务器运行时更​​改预设，环境会立即更新并显示。

我已经尝试编写一个函数并仅在加载窗口时渲染环境，但我仍然遇到相同的错误。

我在某处读过我可以使用 setTimeout 但不确定这是否是正确的方法。

如果有人能指出我正确的方向。

更新：

我没有包括我正在使用 GizmoHelper 组件的事实。从场景中移除 GizmoHelper 解决了这个问题。我在上面的代码中添加了 GizmoHelper，以防其他人遇到同样的问题。

进一步更新：

我注意到错误仍然记录在控制台中，但现在它不再影响环境的初始渲染。不过，可能仍然会导致进一步的问题。

我的反应应用程序中有这个组件，它依赖于来自 api 服务器的一些数据。我使用了反应Suspense，但这只是延迟加载我的组件然后显示，即使数据尚未从 API 服务器到达。

然后我如何等到数据到达之前显示依赖于该数据的 UI，并且在组件等待时，应用程序应该让用户忙于加载程序。