How to avoid caching small user-specific components when using SSR

Technical Questions
6

hey @Tom360 we are in the process of building out our Qwik / Builder SDK docs, but the code for adding custom components in our Qwik SDK is the same as our other Mitosis-generated starters, which can be found here: builder/packages/sdks/output at main · BuilderIO/builder · GitHub

A quick example of a custom component based on the Qwik starter outlined here could look something like this:

import { component$, Resource, useResource$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";
import { getContent, RenderContent, getBuilderSearchParams } from "@builder.io/sdk-qwik";

export const CustomComponent = component$((props) => {

  return (
    <div>{props?.text}</div>
  );
});

export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY"; // ggignore
export const BUILDER_MODEL = "page";
export const CUSTOM_COMPONENTS = [
  {
    component: CustomComponent,
    name: 'Custom Component',
    inputs: [{name: 'text', type: 'string'}]
  }
]

export default component$(() => {
  const location = useLocation();
  const builderContentRsrc = useResource$<any>(() => {
    return getContent({
      model: BUILDER_MODEL,
      apiKey: BUILDER_PUBLIC_API_KEY,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: location.pathname || "/",
      },
    });
  });
  
  

  return (
    <Resource
      value={builderContentRsrc}
      onPending={() => <div>Loading...</div>}
      onResolved={(content) => (
        <RenderContent
          model={BUILDER_MODEL}
          content={content}
          apiKey={BUILDER_PUBLIC_API_KEY}
          customComponents={CUSTOM_COMPONENTS}
        />
      )}
    />
  );
});

This is a simple component that takes a text input and shows it on the page, but the custom component could have any logic or functionality you have in mind. As long as it is registered and then passed into your <RenderContent /> component, you will have access to it inside of the Builder Visual Editor.

Hope this helps!