Question

我想使用sapper作为ssg。当我这样获得数据时：

<script context="module">
export function preload({ params, query }) {
    return this.fetch(`https://jsonplaceholder.typicode.com/posts`)
        .then(r => r.json())
        .then(posts => {
            return {posts} 
        })
}

我可以将站点导出到静态。但是在链接上，数据仍然会从jsonplaceholder中获取。仅在重新加载时，数据才会从静态文件夹中获取。如何使所有获取的数据静态？

Answer 1

因此，一开始这可能会使您感到困惑。要使此工作正常进行，您需要在本地代理您的提取。这是您可以执行的操作：

在/posts/index.json.js中：

let contents;

export function get(req, res) {
    const posts = fetch('do stuff here to fetch')

    contents = JSON.stringify(posts);

    res.writeHead(200, {
        'Content-Type': 'application/json'
    });

    res.end(contents);
}

在您实际的路线组件/posts/index.svelte中：

<script context="module">
    export async function preload({ params, query }) {
        return this.fetch(`index.json`).then(r => r.json()).then(posts => {
            return { posts };
        });
    }
</script>

<script>
export let posts;
</script>

官方Svelte website使用这种方法来获取帖子（从本地文件而不是使用获取）。您可能会从中得到一些启发。

值得一提的是，preload()函数既被运送到服务器，也被运送到前端，因此您不应在其中放置API密钥。

Answer 2

这现在似乎有效。现在将对其进行测试。欢迎发表评论，因为我不舒服，这只是尝试和错误。

posts / index.json.js

import fetch from 'node-fetch'

export async function get(req, res) {
    const posts = await fetch('https://jsonplaceholder.typicode.com/posts')

    const contents = await posts.text()

    res.writeHead(200, {
        'Content-Type': 'application/json'
    });

    res.end(contents);
}

posts / index.svelte

<script context="module">
    export async function preload({ params, query }) {
        return this.fetch(`posts.json`).then(r => r.json()).then(posts => {
           return { posts };
        });
    }
</script>

分配器作为静态站点生成器

2 个答案: