Next.js Discord

Discord Forum

MDXRemote in server component

Answered
Xander posted this in #help-forum
Open in Discord
XanderOP
I have a list of slugs to prerender my dynamic path 
export async function generateStaticParams() {
    return Object.keys(projects).map(slug => ({
        id: slug
    }))
}


And have a component here that renders the remote markdown if there isn't a local copy (local.body) 
async function BodySection({
    project: { local, modrinth, curseforge }
}: SectionProps) {

    let markdown = local.body
    if (!markdown) {
        const mdxSource = await serialize(modrinth!.body)
        markdown = <MDXRemote {...mdxSource} />
    }

    return (
        <section className={`markdown-page markdown ${styles.body}`}>
            {markdown}
        </section>
    )
}

This creates an error because MDXRemote is a client component. How could I get around this?
This rendered body (modrinth!.body) should be cached between all users as it is applicable to everyone, no user accounts or anything. My first thought was getStaticProps, but that seems to be only for the pages router, and even that would mean a compile-time constant meaning the cache could never expire after like a day or something
Answered by American Crow
only if it's a child of and its parent is already marked as "use client"
In that case the child would automatically become a client component too.
(Think of use client as a boundary rather than single files)

Other than that: no
View full answer

5 Replies

XanderOP
I'm really bad at explaining -

My page fetches an external api, server side, which contains a markdown body.
I want to render this body on the server side and get MDXRemote working
XanderOP
hmm, looks like wrapping the component in this file 
'use client'

import { MDXRemote, MDXRemoteProps } from "next-mdx-remote";

export default function ClientMDXRemote(props: MDXRemoteProps) {
    return <MDXRemote {...props} />
}
works
is there a way to tell nextjs to use client without a whole new file?
@Xander is there a way to tell nextjs to use client without a whole new file?
American Crow
only if it's a child of and its parent is already marked as "use client"
In that case the child would automatically become a client component too.
(Think of use client as a boundary rather than single files)

Other than that: no
Answer