Next.js Discord

Discord Forum

How to use antd with SSR?

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I have this code. It uses antd with next js 14.1. But the issue with that is antd won't render on server side so the app is breaking.


CODE: 
import { Layout, Menu } from "antd";
import Image from "next/image";

const { Header } = Layout;

const items = new Array(15).fill(null).map((_, index) => ({
  key: index + 1,
  label: `nav ${index + 1}`,
}));

export default function Home() {
  return (
    <Layout>
      <Header>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
    </Layout>
  );
}


Any idea on how can I make it work. I don't wanna make the complete app a client side app by using 'use client' at the top also. I know will eventually need it but is there any way to minimize it? Since, I'm using layout as the parent component currently I can only think of making the complete component as a client component.
Answered by Asiatic Lion
Works fine with the Registry though
View full answer

36 Replies

Try with "use client" first and see if the content are still prerendered by checking in the entwork tab
It is not advisable to put "use client" in the page.js or layout.js so use this pattern instead where <HomeUI> is imported in another file that has "use client' at the top.

// page.jsx

export default function Home() {
  return (
    <HomeUI />
  )
}

// layout.jsx

export default function Layout({children}){
  return (
    <Layout>
      {children}
    </Layout>  
  )
}
Asiatic LionOP
So something like this??
HeroUI.tsx
"use client";

import { Layout, Menu } from "antd";
import React from "react";

const { Header } = Layout;

const items = new Array(15).fill(null).map((_, index) => ({
  key: index + 1,
  label: `nav ${index + 1}`,
}));

const HomeUI = () => {
  return (
    <Layout>
      <Header>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
    </Layout>
  );
};

export default HomeUI;

page.tsx
import HomeUI from "./_components/Home/HomeUI";

export default function Home() {
  return (
    <>
      <HomeUI />
    </>
  );
}



I know this will work but I was not sure about this being the 'best' way of doing it. As, now it's all a client side rendered component.

Also, note that the Layout that we wrap for components to use everywhere here is not the next js Layout it's an antd component.
ᴉuɐpɹɐɐ
I know this will work but I was not sure about this being the 'best' way of doing it. As, now it's all a client side rendered component.
how would you know?
Asiatic LionOP
Tested the code + this is now a client side component.
This => HomeUI.tsx
ᴉuɐpɹɐɐ
how do you check if its a client side component?
is it not appearing on first render in the network tab?
Asiatic LionOP
I'm trying to console log and it prints on the browser. Also, it renders the html equivalent first and then renders it into the actual UI
For the first one you'll have to open the image. It's not showing in the message.
the styling is however, not, though it maybe expected if the UI lib doesnt support prerendering styles.
did the console log also appears in vsocde?
Asiatic LionOP
Yeah, turns out that first image issue can be fixed using this. It is fixed now https://ant.design/docs/react/use-with-next#using-app-router

But it still console logs in the browser. Yes, it appears in the console log of vs code also.
It shouldn't print in the browser if it is Server side rendering. I have tried for non 'use client' components. And their log statment is not being print on the browser. Only on the terminal console in the code editor.
ᴉuɐpɹɐɐ
But it still console logs in the browser. Yes, it appears in the console log of vs code also.
This is normal
because client components are prerendered in the server, and also hydrated once again in the client
And their log statment is not being print on the browser
This would break antd IF they rely on client-side context to determine the styling
Asiatic LionOP
Okay. But is this a good way to write next js code?

Because yk it is not even something that I might want to have in the client side. It is just that I'm using the antd component that's why I have to use 'use client'.
This is just navbar and other basic layout stuff
Say take mdn html docs for example.
https://developer.mozilla.org/en-US/docs/Web/HTML
I am basically aiming to make a UI like this. See the sidebar, navbar, and main content. Hence, for this I'm using the Layout by antd https://ant.design/components/layout
if you want to look for something simpler, take a look at other library that doesnt involve much client-side styling such as Shadcn/Material-tailwind
See if you can make it work without <AppRegistry> context provider and see if the styles are prerendered.
Asiatic LionOP
Yeah, it works without app registry but I get the UI flicker as it says in the docs and as I shared in this message https://nextjs-forum.com/post/1239185234663182387#message-1239262201336959117.
I think I might go with some other library as you suggested. I wanted to try Shadcn anyways so this might be the time. Thanks!
try npm run build then npm run start and see if the flicker persist
Asiatic LionOP
Yep it happens. Even in the build
If I remove the antregistry
Asiatic LionOP
Works fine with the Registry though
Answer
@Asiatic Lion Works fine with the Registry though
ᴉuɐpɹɐɐ
no flickering with registry?
Asiatic LionOP
Nope no flickering
@Asiatic Lion Nope no flickering
ᴉuɐpɹɐɐ
then use the registry xD
problem solved