Skip to content

Commit

Permalink
Capitalize Client/Server Component
Browse files Browse the repository at this point in the history
Summary of changes:
following <#6417>
  • Loading branch information
Huxpro committed Nov 7, 2023
1 parent 42ca996 commit 07a25b3
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh

## Asset Loading {/*asset-loading*/}

Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.

We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/use.md
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ When passing a Promise from a Server Component to a Client Component, its resolv
#### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/}
A Promise can be passed from a Server Component to a Client Component and resolved in the Client component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop.
A Promise can be passed from a Server Component to a Client Component and resolved in the Client Component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop.
```js
export default function App() {
Expand Down
3 changes: 1 addition & 2 deletions src/content/reference/react/useId.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ You might be wondering why `useId` is better than incrementing a global variable
The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
This is very difficult to guarantee with an incrementing counter because the order in which the Client Components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
Expand Down Expand Up @@ -302,4 +302,3 @@ input { margin: 5px; }
```
</Sandpack>

0 comments on commit 07a25b3

Please sign in to comment.