如何在Svelte中装载组件之前获取数据

Question

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

Answer 1

您需要创建另一个组件，该组件在数据准备好之前不会渲染组件。

<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路由器。

Answer 2

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

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

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

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

请参阅官方文档

Answer 3

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

因为，你没有任何服务器可以预加载你的数据，并为用户提供预加载的前端(瘦页面(数据。因此，您需要sapper提供一种功能，服务器可以通过第一个用户请求获取数据，填充前端并将其发送给用户。。通过这种方式，用户在收到服务器的第一个响应时，就会收到填充了数据的纤细页面。

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

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

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

第页。S： 抱歉有任何误解或糟糕的英语：(