#Delay between pages when it should be pre-rendered

4 messages · Page 1 of 1 (latest)

steep warren Apr 27, 2023, 5:23 PM

// [slug].jsx
export default function Post({ postData }) {
    return (
        <div>
            <Head>
                <title>{postData.fields.title}</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div className="mb-6">
                <h1 className="font-bold text-2xl">{postData.fields.title}</h1>
                <Date dateString={postData.sys.createdAt} />
                <div dangerouslySetInnerHTML={{ __html: postData.fields.text }} className="mt-6" />
            </div>
            <Link href="/" className="text-blue-500 underline">Back to home</Link>
        </div>
    )
}

export async function getStaticPaths() {
    const paths = await getBlogPostSlugs()
    return {
        paths,
        fallback: false,
    }
}
  
export async function getStaticProps({ params }) {
    const postData = await getBlogPostData(params.slug)
    return {
        props: {
            postData,
        },
    }
}

// index.jsx
export default function Home({ posts }) {
    return (
        <div>
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                <h1 className="text-5xl font-bold mb-4">Blog</h1>
                <ul>
                    {posts.map((post) => (
                        <li key={post.sys.id} className="mb-2">
                            <Link href={`/posts/${post.fields.slug}`} className="text-blue-500 font-semibold text-xl">{post.fields.title}</Link>
                            <br />
                            <div className="text-lg">
                                <Date dateString={post.sys.createdAt} />
                            </div>
                        </li>
                    ))}
                </ul>
            </main>
        </div>
    )
}

export async function getStaticProps() {
    const posts = await getBlogPosts()
    return {
        props: {
            posts,
        },
    }
}

// posts.js
export async function getBlogPosts() {
    const response = await client.getEntries({
        content_type: "blogPost",
    })
    if (response.items) {
        return response.items
    }
    console.error("Could not fetch blog posts!")
}

export async function getBlogPostSlugs() {
    const posts = await getBlogPosts()
    return posts.map((post) => {
        return {
            params: {
                slug: post.fields.slug,
            },
        }
    })
}

export async function getBlogPostData(slug) {
    const response = await client.getEntries({
        content_type: 'blogPost',
        'fields.slug': slug,
    })
    if (response.items) {
        return response.items[0];
    }
    console.error(`Could not fetch blog post: ${slug}!`)
}

i used console.log for my functions in posts.js and they get executed every time I switch the page