Svelte应用构建后load函数与invalidateAll失效问题求助

应用在preview模式下运行正常，但构建完成后load函数不再执行。测试时设置每秒调用一次invalidateAll，该操作在preview中有效，但构建后的应用中失效，无法加载数据库新增条目；而preview中计数器能正常递增。

页面组件代码 #

export let data: PageData;

onMount(() => {
    const interval = setInterval(() => {
        invalidateAll();
    }, 1000);

    return () => {
        clearInterval(interval);
    };
});

$: console.log(data.ServerMessage);

+page.server.ts代码 #

let runsLoad = 0;

export const load: PageServerLoad = async () => {
    let runs = 0;
    let itemList: Coffee[] = [];
    try {
        console.log('load data from Server');
        [itemList, runs] = await getAllCoffees();
    } catch (error) {
        console.error(error);
    }
    return {
        coffeeList: itemList,
        ServerMessage: 'Load runs: ' + ++runsLoad + ' Query runs:' + runs
    };
};

DB.ts代码 #

let runs = 0;

// ----- connection functions ----- //
export const pool = mariadb.createPool({
    host: DB_HOST || 'localhost',
    user: DB_USER || 'root',
    password: DB_PASSWORD || 'ADMIN',
    database: DB_NAME || 'coffeeCloudDB',
    port: Number(MARIADB_DOCKER_PORT) || 3306,
    connectionLimit: 5
});

// ----- Helper functions ----- //
async function queryDB(query: string) {
    let conn;
    try {
        conn = await pool.getConnection();
        const rows = await conn.query(query);
        // console.log('queryDB rows:', rows);
        return rows;
    } catch (err) {
        throw err;
    } finally {
        if (conn) conn.end();
    }
}

// ----- exporter functions ----- //
export async function getAllCoffees(): Promise<[Coffee[], number]> {
    const query = `
      SELECT c.id, c.coffee_name as name, c.description, false as favorite
      FROM CoffeeCloudDB.coffees as c
    `;
    let rows_return: Coffee[] = [];
    await queryDB(query).then((rows) => {
        rows_return = rows;
    });
    ++runs;
    return [rows_return, runs];
}

svelte.config.js配置 #

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        env: {
            dir: './'
        },
        adapter: adapter()
    }
};

export default config;

vite.config.ts配置 #

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    define: {
        'process.env': process.env
    }
});

package.json配置 #

{
    "name": "coffeecloud",
    "version": "0.0.1",
    "scripts": {
        "dev": "vite dev",
        "dev:with-host": "vite dev --host",
        "build": "vite build",
        "preview": "vite preview",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@fontsource/fira-mono": "^5.1.0",
        "@neoconfetti/svelte": "^2.2.1",
        "@playwright/test": "^1.48.0",
        "@skeletonlabs/skeleton": "^2.10.2",
        "@skeletonlabs/tw-plugin": "^0.4.0",
        "@sveltejs/adapter-auto": "^3.2.5",
        "@sveltejs/adapter-node": "^5.2.9",
        "@sveltejs/kit": "^2.7.0",
        "@sveltejs/vite-plugin-svelte": "^3.1.2",
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/typography": "^0.5.15",
        "@testing-library/jest-dom": "^6.5.0",
        "@testing-library/svelte": "^5.2.3",
        "@types/d3-color": "^3.1.3",
        "@types/d3-scale": "^4.0.8",
        "@types/eslint": "^9.6.1",
        "@types/jest": "^29.5.13",
        "@types/node": "^22.7.5",
        "@vitest/ui": "^2.0.5",
        "autoprefixer": "^10.4.20",
        "eslint": "^9.12.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.44.1",
        "globals": "^15.11.0",
        "jsdom": "^25.0.1",
        "prettier": "^3.3.3",
        "prettier-plugin-svelte": "^3.2.7",
        "prettier-plugin-tailwindcss": "^0.6.8",
        "svelte": "^4.2.19",
        "svelte-check": "^3.8.6",
        "tailwindcss": "^3.4.13",
        "ts-node": "^10.9.2",
        "typescript": "^5.6.3",
        "typescript-eslint": "^8.8.1",
        "vite": "^5.4.8",
        "vitest": "^2.0.5"
    },
    "type": "module",
    "dependencies": {
        "d3": "^7.9.0",
        "d3-array": "^3.2.4",
        "d3-color": "^3.1.0",
        "d3-hierarchy": "^3.1.2",
        "d3-scale": "^4.0.2",
        "d3-scale-chromatic": "^3.1.0",
        "layerchart": "^0.51.2",
        "mariadb": "^3.4.0",
        "mysql2": "^3.11.3",
        "svelte-awesome-slider": "^1.1.2",
        "svelte-ux": "^0.74.9",
        "text-encoding-polyfill": "^0.6.7"
    }
}

解决方案 #

1. 禁用Server端缓存 #

Svelte Kit生产环境默认会对load函数的响应进行缓存，导致invalidateAll无法触发重新请求。修改+page.server.ts，在load函数中设置缓存头强制禁用缓存：

let runsLoad = 0;

export const load: PageServerLoad = async ({ setHeaders }) => {
    // 设置缓存头，禁止所有缓存
    setHeaders({
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        Pragma: 'no-cache',
        Expires: '0'
    });

    let runs = 0;
    let itemList: Coffee[] = [];
    try {
        console.log('load data from Server');
        [itemList, runs] = await getAllCoffees();
    } catch (error) {
        console.error(error);
    }
    return {
        coffeeList: itemList,
        ServerMessage: 'Load runs: ' + ++runsLoad + ' Query runs:' + runs
    };
};

2. 检查生产环境数据库连接 #

确保构建后运行服务器时，数据库相关环境变量（DB_HOST、DB_USER、DB_PASSWORD等）已正确配置。可以在DB.ts中添加日志确认连接参数：

console.log('DB Host:', DB_HOST || 'localhost');
console.log('DB Name:', DB_NAME || 'coffeeCloudDB');

运行node build后查看控制台输出，确认参数是否和开发环境一致。

3. 排查错误捕获逻辑 #

当前load函数中的try/catch会捕获所有错误并只打印日志，可能导致数据库查询失败但无明显提示。可以在生产环境中添加更明确的错误处理，比如返回错误状态：

try {
    console.log('load data from Server');
    [itemList, runs] = await getAllCoffees();
} catch (error) {
    console.error('Database query failed:', error);
    // 抛出错误让Svelte Kit处理，方便调试
    throw error;
}

4. 确认Node Adapter启动正常 #

构建完成后，确保通过node build启动服务器，而非直接打开静态文件。检查服务器启动日志，确认路由映射正确，没有404等错误。

内容的提问来源于stack exchange，提问作者Martin01