Svelte5中如何从服务端文件向Svelte页面传递组件？

我正在使用mdsvex和SvelteKit5开发博客网站，当前我的+page.server.ts尝试传递渲染后的组件，但Svelte5中组件已变为函数而非对象，因此出现错误：

Cannot stringify a function (data.component)

我的+page.server.ts代码：

import { slugFromPath } from '$lib/slugFromPath';
import { error } from '@sveltejs/kit';

export const load = async ({ params }) => {
    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);

    let match: { path?: string; resolver?: App.MdsvexResolver } = {};
    for (const [path, resolver] of Object.entries(modules)) {
        if (slugFromPath(path) === params.slug) {
            match = { path, resolver: resolver as unknown as App.MdsvexResolver };
            break;
        }
    }

    console.log(params.slug)

    const post = await match?.resolver?.();


    if (!post || !post.metadata.published) {
        throw error(404); // Couldn't resolve the post
    }

    return {
        component: post.default,
        frontmatter: post.metadata
    };
};

我的+page.svelte代码：

<script lang="ts">

    import type { SvelteComponentTyped } from 'svelte';

    import PageHead from '$lib/components/PageHead.svelte';
    import ArticleTitle from '$lib/components/ArticleTitle.svelte';
    import ArticleMeta from '$lib/components/ArticleMeta.svelte';

    let {data} = $props();
    let component = $state(data.component);
</script>

<PageHead title={data.frontmatter.title} description={data.frontmatter.description} />
<ArticleTitle title={data.frontmatter.title} />
<ArticleMeta author={data.frontmatter.author} date={data.frontmatter.date} />

<svelte:component this={component} />

我无法找到将组件作为对象传递以赋值给svelte:component标签的方法，请问在Svelte5中是否有可行方案？

核心问题是SvelteKit服务端load函数返回的数据必须可序列化（要在服务端与客户端之间传递），而Svelte5的组件是函数类型，无法被序列化。解决思路是不在服务端load中返回组件，将组件导入逻辑移到客户端页面中。

方案一：服务端返回路径，客户端动态导入 #

1. 修改+page.server.ts，仅返回文章元数据和路径：

import { slugFromPath } from '$lib/slugFromPath';
import { error } from '@sveltejs/kit';

export const load = async ({ params }) => {
    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);

    let targetPath: string | undefined;
    for (const [path] of Object.entries(modules)) {
        if (slugFromPath(path) === params.slug) {
            targetPath = path;
            break;
        }
    }

    if (!targetPath) throw error(404);

    // 验证文章是否已发布
    const post = await import(targetPath);
    if (!post.metadata.published) throw error(404);

    return {
        postPath: targetPath,
        frontmatter: post.metadata
    };
};

2. 修改+page.svelte，客户端动态加载组件：

<script lang="ts">
    import PageHead from '$lib/components/PageHead.svelte';
    import ArticleTitle from '$lib/components/ArticleTitle.svelte';
    import ArticleMeta from '$lib/components/ArticleMeta.svelte';

    let { data } = $props();
    let component = $state<unknown>(null);

    $effect(() => {
        if (data.postPath) {
            import(data.postPath).then(post => {
                component = post.default;
            });
        }
    });
</script>

<PageHead title={data.frontmatter.title} description={data.frontmatter.description} />
<ArticleTitle title={data.frontmatter.title} />
<ArticleMeta author={data.frontmatter.author} date={data.frontmatter.date} />

{#if component}
    <svelte:component this={component} />
{:else}
    <p>加载中...</p>
{/if}

方案二：客户端直接匹配slug加载组件 #

如果不需要服务端额外验证，也可以直接在页面中通过slug匹配组件：

<script lang="ts">
    import PageHead from '$lib/components/PageHead.svelte';
    import ArticleTitle from '$lib/components/ArticleTitle.svelte';
    import ArticleMeta from '$lib/components/ArticleMeta.svelte';
    import { slugFromPath } from '$lib/slugFromPath';
    import { error } from '@sveltejs/kit';

    let { params } = $props();
    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
    let frontmatter = $state<Record<string, unknown>>({});
    let component = $state<unknown>(null);

    $effect(async () => {
        const postPath = Object.keys(modules).find(path => slugFromPath(path) === params.slug);
        if (!postPath) throw error(404);

        const post = await modules[postPath]();
        if (!post.metadata.published) throw error(404);

        frontmatter = post.metadata;
        component = post.default;
    });
</script>

<PageHead title={frontmatter.title as string} description={frontmatter.description as string} />
<ArticleTitle title={frontmatter.title as string} />
<ArticleMeta author={frontmatter.author as string} date={frontmatter.date as string} />

{#if component}
    <svelte:component this={component} />
{/if}

两种方案都避免了在服务端传递无法序列化的函数，同时保留了文章发布状态验证、元数据展示等核心逻辑，适配Svelte5的组件特性。

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