# Live Page not loading Props

**URL:** <https://forum.builder.io/t/live-page-not-loading-props/6055>\
**Category:** Bugs\
**Created:** [July 29, 2024, 6:57pm UTC](https://forum.builder.io/t/live-page-not-loading-props/6055 "2024-07-29T18:57:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhs129](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@jhs129](https://forum.builder.io/u/jhs129)\
**Post date:** [July 29, 2024, 6:57pm UTC](https://forum.builder.io/t/live-page-not-loading-props/6055/1 "2024-07-29T18:57:26Z")

</div>

I have created a blog using a “blog” section and I am able to view the section in the page builder and even preview the page properly. However, when I go to view the live page the page is loading twice. First with the props for the blog entry being passed and then again with no props being passed so I end up only seeing a blank page with none of the content. Here is a screen recording of the issue:

[Recording-20240729\_143113.webm](https://jhsconsultinggallc-my.sharepoint.com/:v:/g/personal/john_schneider_jhsconsulting_net/EZIt_tt-xhJDg1xGqAfzJD0BjGnQ0yr5QbV7OBMcJ8rjZA?e=qJ0cfk&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D)

Here is the url of my public git hub repository containing this code. Note the code in question is in the develop branch.

> **[GitHub - jhs129/orh-hackathon](https://github.com/jhs129/orh-hackathon)**
>
> Contribute to jhs129/orh-hackathon development by creating an account on GitHub.

_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 public api key**  
21c8ab133cb64454a96650df9ce1d9e5

**Code stack you are integrating Builder with**  
NextJS

**Reproducible code example**  
this page is being loaded by the pages/content-hub/[…slug].jsx page in the solution. here is a copy of the source code:  
import {  
builder,  
BuilderComponent,  
BuilderContent,  
useIsPreviewing,  
} from “@builder.io/react”;  
import React from “react”;  
import Head from “next/head”;  
import DefaultErrorPage from “next/error”;

import “/builder-registry”;

import TopNavBar from “@/components/layout/top-nav-bar”;  
import HeaderBar from “@/components/layout/header-bar”;  
import Footer from “@/components/layout/Footer”;  
import TaxonomyTags from “@/components/ui/taxomomy-tags”;

builder.init(process.env.NEXT\_PUBLIC\_BUILDER\_API\_KEY);

function BlogPage(props) {

console.log(“BlogPage props.blog.title:”, props.blog?.title);  
const blog = props.blog;

const isPreviewing = useIsPreviewing();  
if (!blog && !isPreviewing) {  
return (  
\<\>  
  
  
  
  
\</\>  
);  
}

return (  
\<\>  
  
{props.blog?.data?.title || `Orlando Health | Home`}  
\<meta  
name=“description”  
content={  
blog?.data?.description ||  
`Orlando Health - Florida's largest and most comprehensive health network, with more than 450 locations and 36,000 team members.`  
}  
/\>  
{/\* \<meta  
name=“keywords”  
content={  
props?.page?.data?.keywords ||  
`Healthcare , Health Network, Health Network Florida, Orlando Health`  
}  
/\> \*/}

```
    <meta
      property="og:image"
      content={blog?.data?.image || null}
    />

    <meta property="og:title" content={blog?.data?.title || null} />
    <meta
      property="og:description"
      content={
        props?.blog?.data?.description ||
        `Orlando Health - Florida's largest and most comprehensive health network, with more than 450 locations and 36,000 team members.`
      }
    />
  </Head>
  <header>
    <TopNavBar content={props?.topnavbar || undefined} />
    <HeaderBar
      logoImage="/images/orh-logo.png"
      mobileLogoImage="/images/orh-logo-mobile.png"
      logoAlt="Orlando Health Logo"
      content={props?.headerbar || undefined}
    />
  </header>
  <main>
    <div className="site-container">
      <h5>&lt; View All Articles</h5>
      <img src={blog?.data?.image} alt={blog?.data?.title} />
      <div
        className="lazy-background"
        role="img"
        aria-label={blog?.data?.altText}
        style={{
          backgroundImage: `url('${blog?.data?.image}')`,
        }}
      ></div>

      <div className="post-blog-details">
        <TaxonomyTags taxonomies={blog?.data?.taxonomies} />
        <h1 className="pt-2">{blog?.data?.title}</h1>
        <div className="page-visit-count" data-page-id={blog?.data?.sitecoreId}>
          <span className="count-text">122 views</span>
        </div>
      </div>
      <div className="blog-content clearfix">
        <BuilderComponent model="blog" content={blog} />
      </div>
    </div>
  </main>

  <Footer
    navigation={props?.footer || undefined}
    socialLinks={props?.socialLinks || undefined}
    copyright={props?.settings?.copyright || undefined}
  />
</>

```

);  
}

// Define a function that fetches the Builder  
// content for a given page  
export const getStaticProps = async ({ params }) =\> {  
// Fetch the builder content for the given page

console.log(“Getting topNav”);  
const topNavContent = await builder  
.get(“navigation”, { query: { name: “top-nav-bar” }, enrich: true })  
.promise();

console.log(“Getting headerBarContent”);

const headerBarContent = await builder  
.get(“navigation”, { query: { name: “headerbar” }, enrich: true })  
.promise();

console.log(“Getting blog for slug:”, params.slug);

const blog = await builder  
.get(“blog”, {  
userAttributes: {  
“data.name”: params.slug,  
},  
})  
.toPromise();

return {  
props: {  
blog: blog?.data || null,  
slug: params.slug,  
topnavbar: topNavContent?.data || null,  
headerbar: headerBarContent?.data || null,  
},  
revalidate: 5,  
};  
};

export async function getStaticPaths() {  
return {  
paths: ,  
fallback: true,  
};  
}

export default BlogPage;

---

<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:** [August 6, 2024, 12:13pm UTC](https://forum.builder.io/t/live-page-not-loading-props/6055/2 "2024-08-06T12:13:49Z")

</div>

Hello @jhs129,

After investigating the reported issue, we found that the content API is returning the result, but the SDK is failing to query the content API with your query string. Therefore, we tried modifying the code in the getStaticPaths() and getStaticProps() call, and we were able to get a response using the code below.

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

import "/builder-registry";

import TopNavBar from "@/components/layout/top-nav-bar";
import HeaderBar from "@/components/layout/header-bar";
import Footer from "@/components/layout/Footer";
import TaxonomyTags from "@/components/ui/taxomomy-tags";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

function BlogPage(props) {
  const blog = props.blog;

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

  return (
    <>
      <Head>
        <title>{props.blog?.data?.title || `Orlando Health | Home`}</title>
        <meta
          name="description"
          content={
            blog?.data?.description ||
            `Orlando Health - Florida's largest and most comprehensive health network, with more than 450 locations and 36,000 team members.`
          }
        />
        {/* <meta
          name="keywords"
          content={
            props?.page?.data?.keywords ||
            `Healthcare , Health Network, Health Network Florida, Orlando Health`
          }
        /> */}

        <meta
          property="og:image"
          content={blog?.data?.image || null}
        />

        <meta property="og:title" content={blog?.data?.title || null} />
        <meta
          property="og:description"
          content={
            props?.blog?.data?.description ||
            `Orlando Health - Florida's largest and most comprehensive health network, with more than 450 locations and 36,000 team members.`
          }
        />
      </Head>
      <header>
        <TopNavBar content={props?.topnavbar || undefined} />
        <HeaderBar
          logoImage="/images/orh-logo.png"
          mobileLogoImage="/images/orh-logo-mobile.png"
          logoAlt="Orlando Health Logo"
          content={props?.headerbar || undefined}
        />
      </header>
      <main>
        <div className="site-container">
          <h5>&lt; View All Articles</h5>
          <img src={blog?.data?.image} alt={blog?.data?.title} />
          <div
            className="lazy-background"
            role="img"
            aria-label={blog?.data?.altText}
            style={{
              backgroundImage: `url('${blog?.data?.image}')`,
            }}
          ></div>

          <div className="post-blog-details">
            <TaxonomyTags taxonomies={blog?.data?.taxonomies} />
            <h1 className="pt-2">{blog?.data?.title}</h1>
            <div className="page-visit-count" data-page-id={blog?.data?.sitecoreId}>
              <span className="count-text">122 views</span>
            </div>
          </div>
          <div className="blog-content clearfix">
            <BuilderComponent model="blog" content={blog} />
          </div>
        </div>
      </main>

      <Footer
        navigation={props?.footer || undefined}
        socialLinks={props?.socialLinks || undefined}
        copyright={props?.settings?.copyright || undefined}
      />
    </>
  );
}

export const getStaticProps = async ({ params }) => {
  const topNavContent = await builder
    .get("navigation", { query: { name: "top-nav-bar" }, enrich: true })
    .promise();

  const headerBarContent = await builder
    .get("navigation", { query: { name: "headerbar" }, enrich: true })
    .promise();

  console.log("Getting blog for slug:", params.slug);
  
  const slug = params.slug;
  const blog = await builder
    .get("blog", {
      query: {
        "data.slug": `${slug}`,
      },
    })
    .toPromise();

  return {
    props: {
      blog: blog || null,
      slug: params.slug,
      topnavbar: topNavContent?.data || null,
      headerbar: headerBarContent?.data || null,
    },
    revalidate: 5,
  };
};

export async function getStaticPaths() {
  const blogs = await builder.getAll('blog', {
    options: { noTargeting: true },
    fields: 'data.slug',
  });

  return {
    paths: blogs.map((blog) => `/content-hub/${blog.data?.slug}`),
    fallback: true,
  };
}

export default BlogPage;

```

Hope this helps resolve the issue!

Thanks,