能否在SvelteKit中实现服务端渲染非页面组件及对应服务端代码？

核心结论 #

SvelteKit并没有为非页面组件提供像页面那样的+component.ts/+component.server.ts专属文件模式，但可以通过以下几种方案实现非页面组件的服务端渲染，包括无需依赖页面参数的独立组件（如天气小部件）。

方案1：页面级Load函数预取数据，传递给组件 #

如果组件的数据依赖页面上下文，或者你希望统一在页面层面管理服务端逻辑，可以在页面的+page.server.ts中获取数据，再通过props传递给组件。

示例：

1. 在+page.server.ts中获取天气数据：

// src/routes/+page.server.ts
export async function load() {
  // 服务端专属的天气API调用逻辑
  const weatherData = await fetch('https://api.weather.example.com/current')
    .then(res => res.json());

  return { weatherData };
}

2. 在页面组件中传递数据给天气组件：

<!-- src/routes/+page.svelte -->
<script>
  import WeatherWidget from '$lib/components/WeatherWidget.svelte';
  export let data;
</script>

<WeatherWidget weather={data.weatherData} />

3. 天气组件直接使用props：

<!-- src/lib/components/WeatherWidget.svelte -->
<script>
  export let weather;
</script>

<div class="weather-widget">
  <h3>当前天气：{weather.temperature}°C</h3>
  <p>{weather.description}</p>
</div>

方案2：用server-only模块让组件自行在服务端获取数据 #

如果组件是完全独立的（比如天气小部件，不需要页面传递参数），可以用SvelteKit的server-only包封装服务端逻辑，让组件在SSR阶段直接获取数据，无需依赖页面。

步骤：

1. 安装server-only包：

npm install server-only

2. 创建服务端专属的数据获取模块：

// src/lib/server/weather.ts
import 'server-only'; // 标记该模块仅能在服务端运行

export async function getWeather() {
  // 服务端专属API调用，无需担心密钥泄露
  const response = await fetch('https://api.weather.example.com/current', {
    headers: {
      'Authorization': `Bearer ${process.env.WEATHER_API_KEY}`
    }
  });
  return response.json();
}

3. 在组件中调用该模块（仅在SSR阶段执行）：

<!-- src/lib/components/WeatherWidget.svelte -->
<script>
  import { getWeather } from '$lib/server/weather';
  
  // 组件在服务端渲染时执行这段代码，客户端不会运行（server-only模块在客户端会被SvelteKit自动处理）
  let weather = await getWeather();
</script>

<div class="weather-widget">
  <h3>当前天气：{weather.temperature}°C</h3>
  <p>{weather.description}</p>
</div>

这种方式下，组件的服务端渲染逻辑完全独立，无论放在哪个页面，都会在服务端自动获取数据，不需要页面传递任何参数。

方案3：使用API路由配合预加载（适合需要客户端更新的场景） #

如果组件需要在客户端也能刷新数据，但又要保证SSR时的初始渲染，可以创建一个+server.ts API路由，然后在页面的load函数中预取数据传递给组件，或者在组件中用onMount在客户端请求，SSR时直接调用服务端逻辑。

示例API路由：

// src/routes/api/weather/+server.ts
export async function GET() {
  const weatherData = await fetch('https://api.weather.example.com/current')
    .then(res => res.json());
  
  return new Response(JSON.stringify(weatherData), {
    headers: { 'Content-Type': 'application/json' }
  });
}

组件实现：

<!-- src/lib/components/WeatherWidget.svelte -->
<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  let weather = null;

  // SSR阶段直接调用服务端逻辑
  if (!browser) {
    weather = await fetch('https://api.weather.example.com/current')
      .then(res => res.json());
  }

  // 客户端挂载后刷新数据
  onMount(async () => {
    weather = await fetch('/api/weather')
      .then(res => res.json());
  });
</script>

{#if weather}
<div class="weather-widget">
  <h3>当前天气：{weather.temperature}°C</h3>
  <p>{weather.description}</p>
</div>
{/if}

内容的提问来源于stack exchange，提问作者E.C