SvelteKit + Supabase -获取数据onMount，保持预取工作

Question

我正在建设的网站，似乎相当简单显示数据页上的数据库。

我希望它尽快。它已经工作/部分工作在3种方式：

#方法1

+page.server.js ->从Supabase获取数据

+page.svelte ->获取数据并创建一个网站。

优势：

• works

• 预取(悬停在链路上) works

缺点：

• 浪费了大量的时间(100到600 of )等待文档。我不知道为什么要等。只渲染站点(徽标、菜单、标题等)当检索到数据时，在页面上显示它。不要让用户在空白站点上等待下载文档。如这里所述：https://kit.svelte.dev/docs/load“一旦所有加载函数返回，页面就呈现出来。”如前所述，等待

似乎是浪费时间。

#方法2

如此处所述：https://languageimperfect.com/2021/02/17/data-fetching-in-svelte.html

我只对+page.svelte和onMount使用

优势：

• works

• 没有浪费时间等待文档检索数据

缺点：

• 预取不工作

。

因此，对于第一时间用户，这种方法通常更快，但是对于桌面用户来说则要慢得多(因为在悬停时没有预取)。

#方法3

仅在从Supabase导入数据时使用+page.svelte，并将其显示为：

{#await getDataFromSupabase}
<p>Loading ...</p>
{:then data}

{:catch error}
<p style="color: red">{error.message}</p>
{/await}

优势：

• 没有浪费时间等待文档检索数据

• 预取工场

缺点：

• 不使用任何其他参数。例如，我无法仅根据URL

检索所选数据的用户页路径。

这是我已经测试过的三种方法。

如何改进？

我的目标似乎相当简单：

1)尽快加载数据，而无需等待文档(方法#1没有这样做)

2)预取应该可以工作，所以如果桌面上的用户胡佛链接已经开始构建网页(方法2没有这样做)

3)我应该能够使用URL中的参数(方法3没有这样做)

知道怎么实现吗？

我尝试了上面描述的三种方法。这三种方法都有一些缺点。

我在寻找快速的网页。

Answer 1

你试过利用道具+反应性吗？例如，在您的page.ts (或我的例子中的page.server.ts )中，返回一个用户和一个表

  return {
    user: session.user,
    tableData
  };

然后在您的+page.svelte访问中使用

export let data;
$: ({ user, tableData } = data);

Answer 2

我还在读这篇文章，找到了半途而废

添加：= true；

在所有+page.svelte.js文件中

我的页面位于vercel上，当任何人访问页面(例如/product/123)时，它都会创建预先录制的版本，当任何人再次访问相同的url时，加载速度会更快。

预渲染仍然有效

我想我将能够在预制板中提供页面列表(就像我有/product这样的动态页面)：

prerender: {
  entries: [
    '/product/1',
    '/product/2',
    '/product/3'
  ],
},

但是，我不知道为什么它对我不起作用。此外，这不是完整的解决方案，因为我有很多(实际上很多)链接，所以Vercel需要在构建过程中访问每个链接来保存html。这会毁了我的数据库。

因此，总结一下:现在我实现了预录制器。这比在+page.svelte中包含js还要糟糕，因为这一页的文档加载量为100 ms。现在(在第二次访问时)它已经有了400毫秒，这比没有预光机的800毫秒要好得多。

我不使用js从数据库加载数据，因为这种方法不起作用。所以如果我悬停在链接上什么都不会发生。页面只在单击后加载。

这不是最好的解决办法。对于2000 url( Vercel自动获得)，构建过程持续50分钟。寻找另一种解决方案