从 S3 加载数据时，我应该如何构建 Sapper/Svelte 路由？

Question

假设我有一堆数据文档，它们是 S3 中的 JSON 文档，每年一个。我在 Sapper 中通过 dir 结构定义了一条路线：

├── routes
│   ├── _error.svelte
│   ├── _layout.svelte
│   ├── about.svelte
│   ├── data
│   │   ├── [year].svelte

以及我的script 块中的代码：

  let yearData;
  onMount(async () => {
    const f = await fetch(yearDataUrl(year), {
      headers: { 'Access-Control-Allow-Origin': '*' }
    });
    const jsonResults = await f.json();
    yearData = jsonResults;
  });

每个数据集在 S3 中为 [s3 url]/[year here].json。导航栏中有一组链接显示每个数据集。我可以在onMount 中加载数据，但随后单击导航栏链接不会加载新数据。所以onMount 可能是错误的选择。

我应该如何构建它？另外值得注意的是，我想将这些页面呈现为静态文件（数据很少更改，尤其是前几年）。

Answer 1

有两种选择。第一个也是最惯用的——在你的情况下也是正确的，因为听起来你想使用服务器端渲染——是使用preload：

<script context="module">
  export async function preload(page) {
    const f = await this.fetch(yearDataUrl(page.params.year), {
      headers: { 'Access-Control-Allow-Origin': '*' }
    });

    return {
      yearData: await f.json()
    };
  }
</script>

<script>
  export let yearData;
</script>

<!-- use yearData here -->

preload 函数将在组件创建之前运行，并为其提供 yearData 属性。每当page.params 发生变化时，preload 就会再次运行，设置一个新的属性。

因为这适用于服务器和客户端（因此使用this.fetch 而不是fetch，这两种环境都适用）您将获得服务器呈现的页面，而不是闪烁的加载消息onMount 运行后立即进入页面。

为了完整起见，第二个选项是使用page store：

<script>
  import { stores } from '@sapper/app';

  const { page } = stores();

  let yearData;

  $: if (process.browser) {
      fetch(yearDataUrl($page.params.year))
        .then(f => f.json())
        .then(data => {
          yearData = data;
        });
  }
</script>

在这种情况下，yearData 不会被服务器渲染。 （为了完整起见，您还需要处理竞争条件和错误，preload 不存在这些问题。）