Next.js Discord

Discord Forum

Client/server issues

Unanswered
Red wood ant posted this in #help-forum
Open in Discord
Red wood antOP
I am making a CMS that uses data from the server-side then overrides it with client-side data from the editor. I have 2 components:
page-client.jsx:
'use client'

import { MDXRemote } from 'next-mdx-remote/rsc'

// needed because of bug: https://github.com/hashicorp/next-mdx-remote/issues/350
const mdxOptions = { development: process.env.NODE_ENV === 'development' }

const components = {
  Button: ({ children, ...props }) => <button {...props} className='btn'>{children}</button>,
  Image: (props) => <img {...props} />
}

export default function PageBlogArticle ({ post }) {
  if (!post) {
    return 'client'
  }
  return (
    <article className='prose m-auto'>
      <h1>{post.title}</h1>
      {post.coverImage && (<img src={post.coverImage} alt={post.title} />)}
      <main>
        <MDXRemote source={post.children || ''} components={components} />
      </main>
    </article>
  )
}

page.jsx:
import Content from '@slimplate/filesystem'
import site from '../../../../.slimplate.json'
import PageClient from './page-client.jsx'

const { collections } = site
const content = new Content(collections.blog, 'blog')

export default async function PageBlogArticle ({ params: { slug }, searchParams }) {
  const post = await content.getByField('slug', slug)
  return (
    <PageClient post={post} />
  )
}

export async function generateMetadata ({ params: { slug } }) {
  try {
    const post = await content.getByField('slug', slug)
    return {
      title: `${post.title} - Blog`,
      description: post.description
    }
  } catch (e) {
    return {}
  }
}

4 Replies

Red wood antOP
when it hits page, it initially works fine (with server-side data) then goes into a weird render-loop and shows this error. Should I be doing this some other way?
Essentially, I want it to try to render with the server-side content (from a file) but on client-side inject the edited/new content, and this doesn't get to that part, but it will be handled with a useEffect in client-side.
Red wood antOP
In an older verison, with page-router, I used 
export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component'
  const mdxSource = await serialize(source, {
    mdxOptions: {
      development: false,
    },
  })
  return { props: { source: mdxSource } }
}
from https://github.com/hashicorp/next-mdx-remote/issues/350 to solve it, basically forcing it to render on server-side, but I would prefer that it render it directly.
Red wood antOP
but even if I do it like this, I get the same error