Update docs related to React 18 (vercel#35952)

* update docs of streaming

* add switchable runtime docs

* add page to manifest

* Apply suggestions from code review

Co-authored-by: Steven <steven@ceriously.com>

* Update docs/advanced-features/react-18/streaming.md

Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Steven <steven@ceriously.com>

docs/advanced-features/react-18/overview.md

@@ -15,14 +15,20 @@ npm install next@latest react@latest react-dom@latest
 
 You can now start using React 18's new APIs like `startTransition` and `Suspense` in Next.js.
 
-## Streaming SSR (Alpha)
+## Streaming SSR
 
-Streaming server-rendering (SSR) is an experimental feature in Next.js 12. When enabled, SSR will use the same [Edge Runtime](/docs/api-reference/edge-runtime.md) as [Middleware](/docs/middleware.md).
+Next.js supports React 18 streaming server-rendering (SSR) out of the box.
 
-[Learn how to enable streaming in Next.js.](/docs/advanced-features/react-18/streaming.md)
+[Learn more about streaming in Next.js](/docs/advanced-features/react-18/streaming.md).
 
 ## React Server Components (Alpha)
 
 Server Components are a new feature in React that let you reduce your JavaScript bundle size by separating server and client-side code. Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
 
 Server Components are still in research and development. [Learn how to try Server Components](/docs/advanced-features/react-18/server-components.md) as an experimental feature in Next.js.
+
+## Switchable Runtime (Alpha)
+
+Next.js supports changing the runtime of your application between Node.js and the [Edge Runtime](/docs/api-reference/edge-runtime.md) at the page level. For example, you can selectively configure specific pages to be server-side rendered in the Edge Runtime.
+
+This feature is still experimental. [Learn more about the switchable runtime](/docs/advanced-features/react-18/switchable-runtime.md).

docs/advanced-features/react-18/streaming.md

@@ -1,24 +1,17 @@
-# Streaming SSR (Alpha)
+# Streaming SSR
 
-React 18 will include architectural improvements to React server-side rendering (SSR) performance. This means you can use `Suspense` in your React components in streaming SSR mode and React will render them on the server and send them through HTTP streams.
-It's worth noting that another experimental feature, React Server Components, is based on streaming. You can read more about server components related streaming APIs in [`next/streaming`](/docs/api-reference/next/streaming.md). However, this guide focuses on basic React 18 streaming.
+React 18 includes architectural improvements to React server-side rendering (SSR) performance. This means you can use `Suspense` in your React components in streaming SSR mode and React will render content on the server and send updates through HTTP streams.
+React Server Components, an experimental feature, is based on streaming. You can read more about Server Components related streaming APIs in [`next/streaming`](/docs/api-reference/next/streaming.md). However, this guide focuses on streaming with React 18.
 
-## Enable Streaming SSR
+## Using Streaming Server-Rendering
 
-Enabling streaming SSR means React renders your components into streams and the client continues receiving updates from these streams even after the initial SSR response is sent. In other words, when any suspended components resolve down the line, they are rendered on the server and streamed to the client. With this strategy, the app can start emitting HTML even before all the data is ready, improving your app's loading performance. As an added bonus, in streaming SSR mode, the client will also use selective hydration strategy to prioritize component hydration which based on user interaction.
+When you use Suspense in a server-rendered page, there is no extra configuration required to use streaming SSR. When deployed, streaming can be utilized through infrastructure like [Edge Functions](https://vercel.com/edge) on Vercel (with the Edge Runtime) or with a Node.js server (with the Node.js runtime). AWS Lambda Functions do not currently support streaming responses.
 
-To enable streaming SSR, set the experimental option `runtime` to either `'nodejs'` or `'edge'`:
+All SSR pages have the ability to render components into streams and the client continues receiving updates from these streams even after the initial SSR response is sent. When any suspended components resolve down the line, they are rendered on the server and streamed to the client. This means applications can start emitting HTML even _before_ all the data is ready, improving your app's loading performance.
 
-```jsx
-// next.config.js
-module.exports = {
-  experimental: {
-    runtime: 'nodejs',
-  },
-}
-```
+As an added bonus, in streaming SSR mode the client will also use selective hydration to prioritize component hydration based on user interactions, further improving performance.
 
-This option determines the environment in which streaming SSR will be happening. When setting to `'edge'`, the server will be running entirely in the [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime).
+For non-SSR pages, all Suspense boundaries will still be [statically optimized](/docs/advanced-features/automatic-static-optimization.md).
 
 ## Streaming Features
 

docs/advanced-features/react-18/switchable-runtime.md

@@ -0,0 +1,34 @@
+# Switchable Runtime (Alpha)
+
+By default, Next.js uses Node.js as the runtime for page rendering, including pre-rendering, server-side rendering.
+
+If you have [React 18](/docs/advanced-features/react-18/overview) installed, there is a new experimental feature that lets you switch the page runtime between Node.js and the [Edge Runtime](/docs/api-reference/edge-runtime). Changing the runtime affects [SSR streaming](/docs/advanced-features/react-18/streaming) and [Server Components](/docs/advanced-features/react-18/server-components) features, as well.
+
+## Global Runtime Option
+
+You can set the experimental option `runtime` to either `'nodejs'` or `'edge'` in your `next.config.js` file:
+
+```jsx
+// next.config.js
+module.exports = {
+  experimental: {
+    runtime: 'nodejs',
+  },
+}
+```
+
+This option determines which runtime should be used as the default rendering runtime for all pages.
+
+## Per-page Runtime Option
+
+On each page, you can optionally export a `runtime` config set to either `'nodejs'` or `'edge'`:
+
+```jsx
+export const config = {
+  runtime: 'nodejs',
+}
+```
+
+When both the per-page runtime and global runtime are set, the per-page runtime overrides the global runtime. If the per-page runtime is _not_ set, the global runtime option will be used.
+
+You can refer to the [Switchable Next.js Runtime RFC](https://github.com/vercel/next.js/discussions/34179) for more information.

docs/manifest.json

@@ -311,6 +311,10 @@
                 {
                   "title": "React Server Components",
                   "path": "/docs/advanced-features/react-18/server-components.md"
+                },
+                {
+                  "title": "Switchable Runtime",
+                  "path": "/docs/advanced-features/react-18/switchable-runtime.md"
                 }
               ]
             }