How should I render the onclick of a menu on the server? #79056

bbhxwl · 2025-05-11T14:50:10Z

bbhxwl
May 11, 2025

Summary

If I render on the client side, then the menu won't be able to SEO. I transferred from Nuxt.js to learn, and it's not like nuxt.js. Can it be mixed?

import type { Metadata } from "next";
import { AntdRegistry } from '@ant-design/nextjs-registry';
import "./globals.css";
import {Layout, Menu, MenuProps} from "antd";
import {Content, Footer, Header} from "antd/es/layout/layout";
import {CSSProperties} from "react";
export const metadata: Metadata = {
  title: {
      default:"bin",
      template: "%s - bin"
  },
  description: "bin",
};
const menuItems = [
    {
        label: '首页',
        key: '1',
    },
    {
        label: '博客',
        key: '2',
    },
    {
        label: '管理',
        key: '3',
    }
]
const headerStyle: CSSProperties = {
    position: 'sticky',
    top: 0,
    zIndex: 1,
    width: '100%',
    display: 'flex',
    alignItems: 'center',
}
const onMenuClick: MenuProps["onClick"] = (e)=>{
    console.log('click', e);
}
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh">
      <body>
      <AntdRegistry>
          <Layout>
              <Header style={headerStyle}>
                  <div className="text-white text-2xl mr-9">
                      bin
                  </div>
                  <Menu
                      onClick={onMenuClick}
                      theme="dark"
                      mode="horizontal"
                      items={menuItems}
                  />
              </Header>
              <Content>
                  {children}
              </Content>
              <Footer style={{ textAlign: "center",position: 'sticky',bottom:0}}>
                  备案
              </Footer>
          </Layout>
      </AntdRegistry>
      </body>
    </html>
  );
}

Additional information

No response

Example

No response

icyJoseph · 2025-05-11T15:55:46Z

icyJoseph
May 11, 2025
Collaborator

If I render on the client side, then the menu won't be able to SEO

While that is true, I think you might be referring to use client.

Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Client components are SSR'd. You can do a few things here, but the simplest is to just:

// your-components/menu.tsx
'use client'

const onMenuClick: MenuProps["onClick"] = (e)=>{
    console.log('click', e);
}

export const Menu = () => /* mark up */

And then import that into the layout and use it.

I had to rush my answer a little bit, so, if its not clear, please feel free to ask more. I can try to make more time later on to answer.

1 reply

bbhxwl May 12, 2025
Author

If I render on the client side, then the menu won't be able to SEO

While that is true, I think you might be referring to use client.

Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Client components are SSR'd. You can do a few things here, but the simplest is to just:
// your-components/menu.tsx
'use client'

const onMenuClick: MenuProps["onClick"] = (e)=>{
    console.log('click', e);
}

export const Menu = () => /* mark up */
And then import that into the layout and use it.

I had to rush my answer a little bit, so, if its not clear, please feel free to ask more. I can try to make more time later on to answer.

use client
Will this code not affect the server's ability to generate HTML? What is this principle? Can you send me an article to learn about it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How should I render the onclick of a menu on the server? #79056

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How should I render the onclick of a menu on the server? #79056

Uh oh!

bbhxwl May 11, 2025

Summary

Additional information

Example

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

icyJoseph May 11, 2025 Collaborator

Uh oh!

bbhxwl May 12, 2025 Author

bbhxwl
May 11, 2025

Replies: 1 comment 1 reply

icyJoseph
May 11, 2025
Collaborator

bbhxwl May 12, 2025
Author