Outdated documentation for svelte section integration?

Technical Questions
1

It seems to me the documentation for integrating pages and sections use different approaches. Pre version 1.0.0. of Sveltekit for Sections and post version 1 for Pages.

Integrating pages

Integrating sections

The way the documentation is structured I am also unclear on how a page model and a section model should load on the same route in the same load function?

Svelte only accepts one load on the server and on the client. We want to do page content and section content on the server for SEO-purposes is my understanding.

The documentation example uses on mount:

// src/app.js
<script>
  import { onMount } from 'svelte';
  import { getContent, RenderContent } from '@builder.io/sdk-svelte';
// TO DO: replace YOUR_API_KEY with your Public API Key from your Space
  const BUILDER_PUBLIC_API_KEY = YOUR_API_KEY;
  let content;

  onMount(async () => {
    content = await getContent({
      model: 'announcement-bar',
      apiKey: BUILDER_PUBLIC_API_KEY
    });
  });
</script>

<main>
  <div>Your Builder Section Content:</div>
  {#if content}
    <!-- Render builder content with all required props -->
    <RenderContent
      model="announcement-bar"
      {content}
      apiKey={BUILDER_PUBLIC_API_KEY}
    />
  {:else}
    <p>Loading...</p>
  {/if}
</main>

This would mean that all of the section content will render af ther DOM has loaded. Which is not ideal for SEO right?

Can I pass in multiple potential models in my +page.server.ts file in anticipation of certain section models?

It all has to be “Content” or “ContentKind” to work properly, section or page if I understand correctly.

  // fetch your Builder content
  const content = await getContent({
    model: 'page',    **// Pass inn more than one model?**
    apiKey: YOUR_API_KEY,
    userAttributes: {
      urlPath,
    },
  });

  // return content from `getContent()`
  return {
    props: {
      content,
    },
  };
}

Any time I see the RenderContent slot it only uses one model. Is the intention that we should use more than one of this slot? If so how do we nest it? Since I would assume a section content goes inside the page content?

  {#if content}
    <!-- Render builder content with all required props -->
    <RenderContent
      model="page"
      {content}
      apiKey={YOUR_API_KEY}
    />
  {:else}
    Content Not Found
  {/if}
2

Hello @Oyvind,

At the code level, both page and section models operate exactly the same except the section model doesn’t require a URL path and can be included in the page model.

  const content = await getContent({
    model: 'page',    **// Pass inn more than one model?** // Not possible, currently not supported.
    apiKey: YOUR_API_KEY,
    userAttributes: {
      urlPath,
    },
  });

To include section model within the page model, you will either need to make multiple fetch calls and renderContent or use the builder editor to drop sections on the content page.