5

与SvelteJSonMount中没有beforeMount生命周期事件不同。那么，我们如何在挂载之前获取页面所依赖的数据呢？onMountfetches 产生故障。可以说我可以将依赖 DOM 包装在 if 条件中。但我认为这不是正确的解决方案。与 Sapper 非常相似，有一个preload功能可以在挂载之前加载页面相关数据。SvelteJS中这种（Sapper 的preload）行为的替代方法是什么？

4

3 回答 3

3

您可以将fetch代码放在<script>标签下

<script>块包含在创建组件实例时运行的 JavaScript 。

还有带有标签的context="module"属性。<script>它

在模块首次评估时运行一次，而不是针对每个组件实例

见官方文档

于 2019-10-29T12:33:37.067 回答
3

您将创建另一个组件，该组件在数据准备好之前不会呈现组件。

<script>
import Post from "./Post.svelte";

const url = 'https://jsonplaceholder.typicode.com/posts/1';
const promise = fetch(url).then(response => response.json());
</script>

{#await promise then data}
    <Post title={data.title} />
{/await}

REPL

根据场景，您可以使用支持数据加载的路由器，例如sveltekit路由器。

于 2020-09-04T10:39:54.620 回答
1

菜鸟在这里，你的子问题：不是只有苗条的前端吗？这意味着没有 SSR 支持，因此没有第一个用户请求预加载数据的选项。

因为，您没有任何服务器可以预加载您的数据并为用户提供数据预打包的前端（精简页面）。因此，您需要 sapper 提供一种功能，服务器可以通过第一个用户请求获取数据，填充前端并将其发送给用户。这样，用户在服务器第一次响应时接收到填充数据的纤细页面。

由于您只使用 svelte，因此用户需要更频繁地联系您的服务器。首先，它获取前端，然后前端从后端获取数据。此外，它对 SEO 不友好，因为机器人不会等待后续服务器响应。因此，您的页面将无法正确分析，因为机器人会分析“空白”页面，尚未安装数据，然后移动到下一个，然后才能处理响应。

如果我错了，请纠正我；）

我相信上面的答案是正确的： 1. 在脚本标签中创建空变量 2. 在 onMount 调用下方添加并从服务器获取数据到声明的变量上方 3. 检查 var 是否为空并显示加载按钮 4. 如果 var 不为空，则显示用户内容 6. 利润？

PS：抱歉有任何误解或英语不好:)

于 2019-12-12T10:30:21.360 回答