In Next.js app router(server component), it can be pre-rendered.

[steinjun0]

Hi!
Recently, I migrate my blog to Next.js app router from page router. And I noticed source of preview component is pre-rendered at server-side! I find nobody saying about this, write this issue for helping who struggling for SEO(Is there any other communication channel?)

Before code was as same as Support Next.js #446 using dynamic import.

And here is my code using app router(server-component).

Code

page.tsx

// no 'use client'
// this is server-component

async function getPost(id: number): Promise<IPost> {
    const res = await (fetch(`${API_BASE_URL}/post/${id}`));
    return await res.json();
}

export default async function Page({ params }: { params: { id: string; }; }) {
  const post = await getPost(Number(params.id));
  return  <div>
        {/* title, subtitle, .... */}
        <MarkdownViewer source={post.body} />
    </div>
}

MarkdownViewer.tsx

'use client'; // <- must be added
import MarkdwonView from "@uiw/react-markdown-preview";
export default function MarkdownViewer({ source }: { source: string; }) {
    return (
        <div className="markdown-body">
            <MarkdwonView source={source} />
        </div>
    );
}

Result

before(page router)(no pre-render for source)

after(app router)(pre-render for source)

You can check in here

Question

Guess

The reason is maybe difference from dynamic import and 'use client'. When using dynamic import there is no element for rendering and redering start in browser. However, 'use client' is not meaning perfect client side rendering, It pre-render elements which next.js can pre-render. (docs)

But I don't know how next.js decide the boundary of pre-render. If anyone knows the answer about this question, please talk about that! Thanks.