# Builder blocks content is not rendering on page aside from the preview

**URL:** <https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733>\
**Category:** Technical Questions\
**Created:** [January 2, 2024, 11:18pm UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733 "2024-01-02T23:18:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kacey](https://avatars.discourse-cdn.com/v4/letter/k/0ea827/32.png) [@kacey](https://forum.builder.io/u/kacey)\
**Post date:** [January 2, 2024, 11:18pm UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/1 "2024-01-02T23:18:13Z")

</div>

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder content link**  
_e.g. [Builder.io: Visual Development Platform](http://builder.io/content/4cab34394e684fe7b93d6ef5493a8a51)_

> **[Builder.io: Visual Development Platform](https://builder.io/content/426edff738054d70b5bb2bfebb02e103)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Builder public api key**  
_go to [Builder.io: Visual Development Platform](https://builder.io/account/organization) and copy your PUBLIC api key_

e2f096ba17f74dfd9c140ac050f349a4

**What are you trying to accomplish**  
_e.g. I want to integrate builder on a landing page_

I am trying to render the blocks from the page builder model in the sidebar of a custom page but it only shows on the preview. I see it coming in when I log out the response from [builder.io](http://builder.io).

**Screenshots or video link**  
_Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing_

What it looks like in the [builder.io](http://builder.io) preview on localhost

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/02b2d8b9111fc6080de13e8f58e41349956abc55.png)

What it looks like on the site after publishing and confirming the blocks are being returned by [builder.io](http://builder.io) via console log:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/ab6ce866ffa81f6e84e2c0ab178c65bb817291ce.png)

**Code stack you are integrating Builder with**  
_e.g. NextJS, react, Shopify_

NextJS, react

**Reproducible code example**  
_If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!_

Not a complete code reproduction, but this is the NextJS page that is failing to render the sidebar built by `BuilderComponent` and the blocks builder:

```tsx
function BlogArticle({ article }) {
  const isPreviewing = useIsPreviewing();
  if (!article && !isPreviewing) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    );
  }

  console.log('article', article);

  return (
    // Wrapping the structured data in BuilderContent allows
    // it to update in real time as your custom fields are edited in the
    // Visual Editor
    <BuilderContent content={article} options={{ includeRefs: true }} model="blog-page">
      {(content) => {
        if (!content) return;
        console.log('content', content);
        return (
          <>
            <Head>
              {/* Render meta tags from custom field */}
              <title>{content.title}</title>
              <meta name="description" content={content.excerpt} />
              {content.image && <meta name="og:image" content={content?.image} />}
            </Head>

            <Stack row maxWidth={1000} m="auto" p="$6">
              <ArticlePost {...content} />
              <Stack flexBasis="30%">
                <BuilderComponent model="blog-page" content={content} options={{ includeRefs: true }} />
              </Stack>
              {/* Render the Builder drag/drop'd content */}
              {/* <BuilderComponent model="blog-article" content={content} options={{ includeRefs: true }} /> */}
            </Stack>
          </>
        );
      }}
    </BuilderContent>
  );
}

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 3, 2024, 5:45am UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/2 "2024-01-03T05:45:04Z")

</div>

Hello @kacey,

Welcome to the [builder.io](http://builder.io) forum.

For blog implementation, you may find help in our blog post [Create a drag-and-drop editable blog with Next.js](https://www.builder.io/blog/creating-blog)

> **[Create a drag-and-drop editable blog with Next.js](https://www.builder.io/blog/creating-blog)**
>
> Learn how to create a drag-and-drop blog in Builder using the popular JavaScript framework Next.js. From setup to preview, let's get started.

---

<div class="post-metadata">

**Author:** ![kacey](https://avatars.discourse-cdn.com/v4/letter/k/0ea827/32.png) [@kacey](https://forum.builder.io/u/kacey)\
**Post date:** [January 3, 2024, 3:44pm UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/3 "2024-01-03T15:44:25Z")

</div>

Hi Manish,

That is the article I used as a basis actually but still blocks are not being rendered on the page

---

<div class="post-metadata">

**Author:** ![kacey](https://avatars.discourse-cdn.com/v4/letter/k/0ea827/32.png) [@kacey](https://forum.builder.io/u/kacey)\
**Post date:** [January 3, 2024, 3:53pm UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/4 "2024-01-03T15:53:04Z")

</div>

I rechecked that article and found a fix! Thanks for the point in the right direction @manish-sharma .

For others, my fix was:  
Change this

```tsx
    <BuilderContent content={article} options={{ includeRefs: true }} model="blog-page">
      {(content) => {

```

to this:

```tsx
    <BuilderContent content={article} options={{ includeRefs: true }} model="blog-page">
      {(data, loading, fullContent) => {

```

the `BuilderComponent` looks like it needed the third param of the `BuilderContent` component.

---

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [January 25, 2024, 11:38am UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/5 "2024-01-25T11:38:02Z")

</div>

@manish-sharma Hey i tried this approach as well and i followed this [Create a drag-and-drop editable blog with Next.js](https://www.builder.io/blog/creating-blog) and tried to create a section modal but its not responding on the page i mean i’m not able to edit anything on that page and nothing shows on the page i created folder of blogs in pages and in that i have 2 files of index.jsx and [article].jsx

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 25, 2024, 11:40am UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/6 "2024-01-25T11:40:56Z")

</div>

Hello @Shami,

Could you please provide additional context on the issue? It would be immensely helpful if you could share relevant code snippets or screenshots. This will allow us to gain a clearer understanding of the problem and provide more precise assistance.

Thank you!

---

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [January 25, 2024, 11:47am UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/7 "2024-01-25T11:47:26Z")

</div>

Sure!

@manish-sharma this is the screen im getting on the builder page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8d4ea133c0a0a4b8e5de23e5dd7dfce07ae8f455.png)

and this is my index.jsx

```auto
import { builder } from "@builder.io/react";

builder.init(config.BUILDER_IO_API_KEY);

const ARTICLES_PER_PAGE = 30;

function Blog({ articles, pageNumber }) {
  return (
    <div>
      {articles.map((item) => (
        <Link href={/blog/${item.data.handle}}>
          <div css={{ overflow: "hidden", width: 300 }}>
            <div css={{ width: 300, height: 200, display: "block" }}>
              <img src={item.data.image} />
            </div>
            {item.data.title}
            {item.data.description}
          </div>
        </Link>
      ))}
      <div css={{ padding: 20, width: 300, margin: 'auto', display: 'flex' }}>
        {pageNumber > 1 && (
          <a href={/blog/page/${pageNumber - 1}}>
            ‹ Previous page
          </a>
        )}

        {articles.length > ARTICLES_PER_PAGE && (
          <a href={/blog/page/${pageNumber + 1}}>
            Next page ›
          </a>
        )}
      </div>
    </div>
  );
}

export async function getStaticProps({ query }) {
  // Get the page number from the path or query parameter
  // In this example we are hardcoding it as 1
  const pageNumber = 1;
  const articles = await builder.getAll("blog-article", {
    // Include references, like the author ref
    options: { includeRefs: true },
    // For performance, don't pull the blocks (the full blog entry content)
    // when listing
    omit: "data.blocks",
    limit: ARTICLES_PER_PAGE,
    offset: (pageNumber - 1) * ARTICLES_PER_PAGE,
  });

  return { props: { articles, pageNumber }};
}

export default Blog;

```

and this is my [article.jsx]

```auto
and this is my [article.jsx]

import {
  builder,
  BuilderComponent,
  BuilderContent,
  useIsPreviewing,
} from "@builder.io/react";
import Head from "next/head";
import DefaultErrorPage from "next/error";

builder.init(config.BUILDER_IO_API_KEY);

function BlogArticle({ article }) {
  const isPreviewing = useIsPreviewing();
  if (!article && !isPreviewing) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    );
  }

  return (
    // Wrapping the structured data in BuilderContent allows
    // it to update in real time as your custom fields are edited in the
    // Visual Editor
    <BuilderContent
      content={article}
      options={{ includeRefs: true }}
      model="blog-article"
    >
      {(content) => (
        <React.Fragment>
          <Head>
            {/* Render meta tags from custom field */}
            <title>{content?.data.title}</title>
            <meta name="description" content={content?.data.blurb} />
            <meta name="og:image" content={content?.data.image} />
          </Head>

          <div>
            <div>{content?.data.title}</div>
            {/* Render the Builder drag/drop'd content */}
            <BuilderComponent
              name="blog-article"
              content={content}
              options={{ includeRefs: true }}
            />
          </div>
        </React.Fragment>
      )}
    </BuilderContent>
  );
}

export async function getStaticProps({ params }) {
  const article = await builder
    .get("blog-article", {
      // Include references, like our author ref
      options: { includeRefs: true },
      query: {
        // Get the specific article by handle
        "data.handle": params.handle,
      },
    })
    .promise();

  return {
    props: {
      article,
    },
  };
}

export async function getStaticPaths() {
  return {
    // Optionally, use builder.getAll() to fetch all paths,
    // or just allow fallback: true to render any path
    paths: [],
    fallback: true,
  };
}

export default BlogArticle;

```

this is my [[…page]].jsx

```auto
// pages/[...page].tsx
import React from "react";
import { useRouter } from "next/router";
import { Builder, BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { GetStaticProps } from "next";
import config from '../config/config';
import dynamic from "next/dynamic";
import "../builder.config"

builder.init(config.BUILDER_IO_API_KEY);

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") ""),
      },
    })
    .toPromise();
  return {
    props: {
      page: page null,
    },
    revalidate: 5,
  };
};
export async function getStaticPaths() {
  const pages = await builder.getAll("page", {
    fields: "data.url",
    options: { noTargeting: true },
  });
  return {
    paths: pages.map((page) => ${page.data?.url}).filter(url => url !== '/'),
    fallback: 'blocking',
  };
}

export default function Page({ page }: { page: BuilderContent | null }) {
  const router = useRouter();
  const isPreviewing = useIsPreviewing();
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }
  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      <BuilderComponent model="page" content={page || undefined} />
    </>
  );
}

```

---

<div class="post-metadata">

**Author:** ![Shami](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shami/32/3188_2.png) [@Shami](https://forum.builder.io/u/Shami)\
**Post date:** [January 25, 2024, 12:46pm UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/8 "2024-01-25T12:46:33Z")

</div>

i can’t update or put anything on the editor it just shows it on the layers that it’s there but i can’t see it

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 25, 2024, 3:56pm UTC](https://forum.builder.io/t/builder-blocks-content-is-not-rendering-on-page-aside-from-the-preview/4733/9 "2024-01-25T15:56:03Z")

</div>

Hello @Shami,

I see you are fetching blog-article using the handle, but on the screenshot, I don’t see any handle defined, additionally, your [preview URL](https://www.builder.io/c/docs/guides/preview-url-working) is not updated with the handle

If you wish to include draft content, consider using i`ncludeUnpublished: true` props

```auto
  const article =
    (await builder
      .get("blog-article", {
        // Include references, like our `author` ref
        options: { enrich: true, includeUnpublished: true },
        query: {
          // Get the specific article by handle
          "data.handle": params.handle,
        },
      })
      .promise()) || null;

```