SvelteKit全局禁用CSR后，throw error(404)触发CSR异常

你遇到的问题核心是CSR配置的放置位置错误，以及错误处理未完全在服务器端闭环，导致抛出404后客户端意外接管渲染。

1. 修正CSR配置位置 #

把export const csr = false;从+layout.server.js移到src/routes/+layout.js。csr是SvelteKit的全局页面配置项，需要客户端和服务器端都能读取到——放在+layout.server.js里时，客户端获取不到这个配置，一旦错误触发客户端初始化逻辑，就会默认启用CSR。

修改后的+layout.js：

export const csr = false;

2. 只在服务器端文件中抛错误 #

确保404错误只在+page.server.js或+layout.server.js这类服务器端专属文件里抛出，别在+page.js里抛。哪怕csr=false，+page.js的代码仍可能在某些场景下被客户端执行，导致客户端接管错误处理。

示例+page.server.js：

import { error } from '@sveltejs/kit';

export async function load() {
  // 模拟业务判断，触发404
  const content = null;
  if (!content) {
    throw error(404, 'Not found');
  }
  return { content };
}

3. 新增服务器端错误处理（可选） #

在src/routes/+error.server.js里添加服务器端错误逻辑，确保错误完全在服务器端处理，不给客户端接管的机会：

import { error } from '@sveltejs/kit';

export function load({ error: err }) {
  if (err.status === 404) {
    return {
      message: '页面不存在',
      status: err.status
    };
  }
  throw error(err.status, err.message);
}

4. 全局服务器错误钩子兜底（可选） #

在src/hooks.server.js里加全局错误处理，确保所有错误都在服务器端闭环：

export function handleError({ error, event }) {
  console.error('服务器错误:', error, event);
  return {
    message: '服务器内部错误',
    status: error.status || 500
  };
}

验证方法 #

1. 访问正常路由，查看页面源码，确认是完整的服务器渲染HTML。
2. 访问触发404的路由，同样查看源码，确认404页面是服务器渲染的。
3. 跳转其他路由，再次检查源码，确保仍为服务器渲染，没有切换到CSR。

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