From 07a25b301034a90c8c2792f0304b22780c4b94a4 Mon Sep 17 00:00:00 2001 From: "xuan.huang" Date: Tue, 7 Nov 2023 20:23:55 +0800 Subject: [PATCH] Capitalize Client/Server Component Summary of changes: following --- .../06/15/react-labs-what-we-have-been-working-on-june-2022.md | 2 +- src/content/reference/react/use.md | 2 +- src/content/reference/react/useId.md | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 938b75c4b5c..df864db1049 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -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. diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 8e1a8f21374..b726e67db7b 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -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() { diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 4ea029f27a6..96a5e25a237 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -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. @@ -302,4 +302,3 @@ input { margin: 5px; } ``` -