MENU
Client Component
Include the 'use client' directive at the top of page.js to indicate rendering at the client.
Client Components are useful for adding interactivity, event listeners, and browser APIs to your application.
In Next.js, Client Components are rendered differently based on whether the request is part of a full page load or a subsequent navigation.
Full Page Load:
- For initial visits or page reloads, Next.js uses React's APIs to render a static HTML preview on the server, allowing users to see content immediately. This also enhances SEO.
- The server renders Server Components into a React Server Component Payload (RSC Payload), which includes references to Client Components. This payload, along with JavaScript instructions, is used to generate the HTML.
- On the client side, the HTML provides a fast, non-interactive preview, and the RSC Payload helps reconcile the Client and Server Component trees. JavaScript instructions then "hydrate" the Client Components, making them interactive.
- For subsequent navigations, Client Components are rendered entirely on the client, without server-rendered HTML. The Client Component JavaScript bundle is downloaded, parsed, and used to reconcile and update the DOM using the RSC Payload.
(Hydration is the process of making static HTML interactive by attaching event listeners, using the hydrateRoot React API.)
(Click the 'Preview' button at the bottom right to grant Geolocation permission.)
In client components, we can use standard React hooks and browser APIs. For example, we can use the useState() hook to manage the state of a component, and the useEffect() hook to perform side effects in a component. We can also use browser APIs such as the geolocation API to get the the visitor's physical location.
In client components, we can use standard React hooks and browser APIs. For example, we can use the useState() hook to manage the state of a component, and the useEffect() hook to perform side effects in a component. We can also use browser APIs such as the geolocation API to get the the visitor's physical location.