Recap: Server & Client
Part of the Next.js Essentials section of Coddy's React journey — lesson 22 of 47.
Challenge
MediumChapter recap: draw the server/client boundary yourself.
The page lists dishes on the server, but it also puts an onClick straight onto a button, so the app won't render at all. Fix it without marking the page as a client component:
- In
components/OpenHours.jsx, build a client component ('use client'on line 1) that holds anopenboolean in state and renders a button withid="toggle". Its text must beShow hourswhen closed andHide hourswhen open. - When open, it also renders a
<p>withid="hours"and the textOpen 9am-5pm. When closed, that paragraph must not exist. - In
app/page.jsx, replace the broken button and the always-visible paragraph with<OpenHours />, imported from'../components/OpenHours'. The heading and the dish list stay exactly as they are: the page remains a server component.
Try it yourself
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}All lessons in Next.js Essentials
4Server & Client
Two Kinds of ComponentReading the ErrorThe 'use client' LineKeep Client Parts SmallServer Inside ClientRecap: Server & Client