Document browser-only rendering - #8582
Conversation
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 One Page Changed SizeThe following page changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
889aa1b to
8d1e047
Compare
Add the Canary browser API reference, including optional lazy reasons, server bailout reporting, fatal and abort behavior, navigation entries, and onBrowserBailout options for every streaming, resume, and prerender API that supports it.
|
|
||
| Like other calls to [`use`](/reference/react/use), `use(browser())` can be called conditionally, including inside a custom Hook. For example, you can wrap a Suspense-enabled data-fetching library's `useQuery` to render initial data on the server, but defer to the browser when that data is missing: | ||
|
|
||
| ```js {3} |
There was a problem hiding this comment.
Does this example need a "use client" here?
| ```js {3} | |
| ```js {4} | |
| 'use client'; |
There was a problem hiding this comment.
react-dom is a "client" library in the sense that it is for browser (react-dom/client) and render-for-browser-as-html (react-dom/server). You can use this in frameworks that don't even support RSC so I don't think the examples should imply that this is in any associated with RSC even if it is true that in an RSC framework you can't use this API in Server Components.
It's also not the case that you need "use client" on every file that is part of the client bundle, you only need this in files that you want to import into the server as references
There was a problem hiding this comment.
you can't use this API in Server Components
This is my main concern: use(browser()) must be a client component; this page does not explicitly call it out, although it is implied.
When working with a traditional client-focused framework (like Next.js Pages Router, TanStack Start), use(browser()) works great.
There is a different story for server component frameworks (like Next.js App Router and Waku), where components default to being server components and do not execute code in the browser, so components that have use(browser()) and no other hooks will be treated as server components by default. Thus, they will not render and will error out unless they are client components. use(browser()) does not force a client component, like having a hook in it. While "use client" is not needed in every file, I would argue that if you have code that must be in the browser, it should have a "use client" so developers know that code is going into the client and don't have hidden dependencies that could break people's apps.
If this example does not use "use client", there should be some explicit callout of how to use use(browser()) in server component frameworks.
2 participants
Add the Canary
browserAPI reference, including optional lazy reasons, server bailout reporting, fatal and abort behavior, navigation entries, andonBrowserBailoutoptions for every streaming, resume, and prerender API that supports it.