Symbol bind reference to field SSR

Technical Questions
3

Hi!

This is the code how I render my pages:

import { useRouter } from 'next/router'
import { BuilderComponent, Builder, builder } from '@builder.io/react'
import DefaultErrorPage from 'next/error'
import Head from 'next/head'
import builderConfig from '@config/builder'
import '@builder.io/widgets'
import NavBar from '@components/Navbar/NavBar'
import { Helmet } from 'react-helmet'

...

export async function getStaticProps({ params, locale }) {
  const page =
    (await builder
      .get('page', {
        options: { includeRefs: true },
        userAttributes: {
          urlPath: '/' + (params?.page?.join('/') || ''),
        },
      })
      .toPromise()) || null

 ...

  return {
    props: {
      page,
    },
    revalidate: 5,
  }
}

export async function getStaticPaths() {
  const pages = await builder.getAll('page', {
    options: { noTargeting: true, includeRefs: true },
    omit: 'data.blocks',
  })

  return {
    paths: pages.map((page) => `${page.data?.url}`),
    fallback: true,
  }
}

export default function Page({ page, navbar, footer, subfooter }) {
  const seo = page?.data?.seotag ?? null
  const router = useRouter()
  if (router.isFallback) {
    return <h1>Loading...</h1>
  }
  const isLive = !Builder.isEditing && !Builder.isPreviewing
  if (!page && isLive) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
          <meta name="title"></meta>
        </Head>
        <Error404 />
      </>
    )
  }

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <NextSeo
       ...seotag
      />
    
      <BuilderComponent
        model="page"
        content={page}
        options={{ includeRefs: true }}
      />
    </>
  )
}

So I only fetch the pages, and I drag the symbols in the visual editor to it. So maybe I did not understand something correctly, but this would be specific for a symbol if I want to retrieve it from my code, but these symbols are on the page itself, and I want to get the whole page.

(But the example I added show you, that somehow I have to retrieve the data with the reference’s id, otherwise I can’t bind my data dynamically to my symbol)
Here is a symbol example: Builder.io: Drag and drop page builder and CMS

We use this symbol with multiple data entries in our pages, and we will bind the reference to it on the page itself, that’s why we added the custom js to fetch the data by id: How to bind a reference field to a symbol)
So maybe I don’t understand you correctly, but how could I avoid this extra fetch so my page will render SSR?

Thank you for your help.