如何判断 SvelteKit 的 "load" 函数是在服务器端还是客户端运行？

Question

我正在尝试从SvelteKit页面的load函数中进行API调用，但我不想使用本地端点对这些调用进行代理，因为我希望保持Web服务器尽可能轻量。

我特别想做的是，在从服务器发出调用时，API的URL应与从客户端调用时不同（例如，“http://localhost:1234”与“https://example.com:1234”）。

但更普遍的是，是否有一种方法区分当前代码是在服务器上运行还是在客户端上运行？

- cambraca

Answer 1

在load函数中，导入$app/environment后，可以使用browser标志选项。

<script context="module">
    import { browser } from '$app/environment'; 
    ...
    export async function load({ fetch }) {
        if (!browser) {
            // code here runs only on the server
        }
        return {
           ...
        }
    }
    ...
<script>

以下内容来自于SvelteKit文档:

如果应用程序在浏览器或服务器上运行，browser属性会根据情况是true或false。

- phaleth

---

只使用 process.browser 有什么问题吗？ - koo5

@koo5 那是不是意味着需要添加process依赖项？不确定它是否是ES模块。CJS模块可能不适用于SvelteKit，除非进行一些不必要的解决方法（常见问题解答）。 - phaleth

我可以在 load 函数之外使用 browser 吗？ - chovy

@chovy browser 变量被初始化，因此在 load 函数之外获取其值。因此，该变量的作用域围绕着 load 函数的作用域。当然，您可以将该变量作为参数传递到更外部的作用域，甚至是自定义函数的作用域中，以便在该自定义函数的作用域中使用它的值。 - phaleth

Answer 2

免责声明：我所写的并不是标题的真正答案，而是针对所描述问题的具体解答。

有一个特定的挂钩函数（handleFetch），旨在根据客户端或服务器不同地处理资源：

https://kit.svelte.dev/docs/hooks#server-hooks-handlefetch

/** @type {import('@sveltejs/kit').HandleFetch} */
export async function handleFetch({ request, fetch }) {
    if (request.url.startsWith('https://api.yourapp.com/')) {
        // clone the original request, but change the URL
        request = new Request(
            request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
            request
        );
    }

    return fetch(request);
}

- Jacopo Pace