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

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

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

以及我的

脚本

块中的代码：

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

每个数据集在S3中都是

[S3URL]/[year here].json

。导航栏中有一组显示每个数据集的链接。我可以在一个

onMount

fine中获得要加载的数据，但是随后单击导航条链接不会加载新数据。因此，

onMount

可能是错误的选择

---

我应该如何构造这个？还值得注意的是，我希望将这些页面作为静态文件呈现（数据很少更改，尤其是在前几年）

有两种选择。在您的情况下，第一个也是最惯用的方法（也是正确的方法，因为听起来您希望使用服务器端渲染）是使用：

导出异步函数预加载（第页）{
const f=wait this.fetch（yearDataUrl（page.params.year）{
标题：{“访问控制允许源代码”：“*”}
});
返回{
yearData:await f.json（）
};
}
出口数据；

预加载功能将在创建组件之前运行，为其提供

yearData

prop。每当

page.params

更改时，

preload

将再次运行，设置新的道具

因为这在服务器和客户端上都有效（因此使用

this.fetch

而不是

fetch

，这两种环境都有效），所以您将获得服务器呈现的页面，而不是在

onMount

运行时立即闪烁到页面中的加载消息

第二个选项（为完整起见）是使用：

从'@sapper/app'导入{stores}；
常量{page}=stores（）；
让我们看看数据；
$：if（process.browser）{
获取（yearDataUrl（$page.params.year））
.then（f=>f.json（））
。然后（数据=>{
年份数据=数据；
});
}

---

在这种情况下，

yearData

不会被服务器渲染。（完整地说，您还需要处理竞态条件和错误，这不是预加载的问题）

有两个选项。在您的情况下，第一个也是最惯用的方法（也是正确的方法，因为听起来您希望使用服务器端渲染）是使用：

导出异步函数预加载（第页）{
const f=wait this.fetch（yearDataUrl（page.params.year）{
标题：{“访问控制允许源代码”：“*”}
});
返回{
yearData:await f.json（）
};
}
出口数据；

预加载功能将在创建组件之前运行，为其提供

yearData

prop。每当

page.params

更改时，

preload

将再次运行，设置新的道具

因为这在服务器和客户端上都有效（因此使用

this.fetch

而不是

fetch

，这两种环境都有效），所以您将获得服务器呈现的页面，而不是在

onMount

运行时立即闪烁到页面中的加载消息

第二个选项（为完整起见）是使用：

从'@sapper/app'导入{stores}；
常量{page}=stores（）；
让我们看看数据；
$：if（process.browser）{
获取（yearDataUrl（$page.params.year））
.then（f=>f.json（））
。然后（数据=>{
年份数据=数据；
});
}

---

在这种情况下，

yearData

不会被服务器渲染。（为了完成，您还需要处理比赛条件和错误，这不是

预加载

的问题）

我想

导出

这个，这会改变我应该如何构建它吗？我想使应用程序成为JAMStack应用程序。在您的情况下，否，因为文件是外部托管的。如果您是动态生成数据（例如

yearDataUrl（1999）

返回

data/1999.json

），那么您肯定希望使用

preload

，因为这样Sapper知道

data/1999.json

是必要的，并将其包含在导出的输出中。

page

应该是

$page

我想

export

这会改变我应该如何构建它吗？我想使应用程序成为JAMStack应用程序。在您的情况下，否，因为文件是外部托管的。如果您是动态生成数据（例如，

yearDataUrl（1999）

返回的

data/1999.json

），那么您肯定希望使用

preload

，因为这样Sapper知道

data/1999.json

是必要的，并且会将其包含在导出的输出中。

page

应该是

$page