You can pass a Server Component // as a child or prop of a Client Component. database or filesystem utilities).įor example, importing a Server Component in a Client Component will not work:Īpp/page.js // ✅ This pattern works. However, in React, there's a restriction around importing Server Components inside Client Components because Server Components might have server-only code (e.g. Behind the scenes, React will merge the work of both environments. Server and Client Components can be interleaved in the same component tree. Importing Server Components into Client Components Use custom hooks that depend on state, effects, or browser-only APIs Use State and Lifecycle Effects ( useState(), useReducer(), useEffect(), etc) Keep large dependencies on the server / Reduce client-side JavaScriptĪdd interactivity and event listeners ( onClick(), onChange(), etc) Keep sensitive information on the server (access tokens, API keys, etc) However, the app/ directory enables you to colocate components with pages, which was not previously possible in the pages/ directory. They do not need to be in app/, specifically.įor example, you might want a components/ directory. These components (and files) can be placed anywhere inside your application. ConventionĪ component becomes a Client Component when using the "use client" directive at the top of the file (before any imports). You can think of Client Components as how Next.js 12 and previous versions worked (i.e. In Next.js, they are prerendered on the server and hydrated on the client. Client ComponentsĬlient Components enable you to add client-side interactivity to your application. Additional JavaScript is only added as client-side interactivity is used in your application through Client Components. The base client-side runtime is cacheable and predictable in size, and does not increase as your application grows. With Server Components, the initial page load is faster, and the client-side JavaScript bundle size is reduced. This HTML is then progressively enhanced in the browser, allowing the client to take over the application and add interactivity, by asynchronously loading the Next.js and React client-side runtime. When a route is loaded with Next.js, the initial HTML is rendered on the server. Server Components make writing a React application feel similar to PHP or Ruby on Rails, but with the power and flexibility of React for templating UI. For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead remain entirely on the server, leading to improved performance. React Server Components allow developers to better leverage server infrastructure. This allows you to automatically adopt Server Components with no extra work, and achieve great performance out of the box. Server ComponentsĪll components inside the app directory are React Server Components by default, including special files and colocated components. This page will go through the differences between Server and Client Components and how to use them in your Next.js application. Server and Client Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. We recommend reading the Rendering Fundamentals page before continuing.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |