Server rendering the data directly loaded into the component

[nisarhassan12]

In routes/api/posts I have a file named +server.ts which upon a get request sends a JSON array as the response. I'm not able to figure out how do I get and render the response from within a component(not a page/route) in a way it gets server-rendered.

The reason why I can't fetch this data first in +page.ts and then return it from the load function which can then be accessed in +page.svelte and passed down as a prop is that I'm using a visual CMS that requires us to have the pages in the src/content directory in .md files.

In routes/[...slug]/+page.ts I'm importing all the markdown files and then returning the correct page data based on the slug parameter, which components to dynamically import on the server and server render on a specific page is specified under more details.

More details

What components to render on which page is specified in the markdown frontmatter as follows:

pageTitle: My Page
pageDescription: My simple page.
sections: [
  {
     type: "hero",
     title: "My Site",
     text: "Some simple text."
  },
  {
     type: "section",
  },
  {
      type: "footer"
  }
]

This is how I dynamically import the components on the server

export async function load({ params }: any) {
	const data = getPageDataBySlug(params.slug);

	const metadata = (await data).metadata
	const content = (await data).content

	const component_names = (metadata && metadata.sections) && metadata.sections.map((item: any) => item.type.toLowerCase())

	const components = component_names && await Promise.all(
		component_names.map((name: any, i: number) =>
			import(`../../lib/components/${name}.svelte`).then(
				(m) => ({ props: metadata.sections[i], component: m.default })
			)
		)
	);

	components && components.forEach(({ props }: any) => {
		Object.keys(props).forEach((key) => {
			if (key === 'text') {
				props[key] = converter.makeHtml(props[key]).replace('<p>', '').replace('</p>', '')
			}
		})
	})

	return {
		metadata,
		content,
		components
	};
}

The following is how I render them in routes/[...slug]/+page.svelte

<script>
	export let data;
	const { content, components } = data;
</script>

{#if components}
	{#each components as { component, props }}
		<svelte:component this={component} {...props} />
	{/each}
{/if}

<svelte:component this={content} />