Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: JJ Kasper <jj@jjsweb.site> Co-authored-by: Matt Kane <m@mk.gg> Co-authored-by: Ismael <ismael.rumzan@gmail.com> Co-authored-by: Balázs Orbán <info@balazsorban.com>
- Loading branch information
1 parent
11d9925
commit a05a0c7
Showing
24 changed files
with
874 additions
and
535 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,34 @@ | ||
# React 18 | ||
|
||
[React 18](https://reactjs.org/blog/2022/03/29/react-v18.html) adds new features including Suspense, automatic batching of updates, APIs like `startTransition`, and a new streaming API for server rendering with support for `React.lazy`. | ||
Next.js 13 requires using React 18, unlocking: | ||
|
||
React 18 is now released. Read more about [React 18](https://reactjs.org/blog/2022/03/29/react-v18.html). | ||
- [Streaming SSR](#streaming-ssr) | ||
- [React Server Components](#react-server-components) | ||
- [Edge and Node.js Runtimes](#edge-and-nodejs-runtimes) | ||
- New APIs like `startTransition` and more. | ||
|
||
## Using React 18 with Next.js | ||
|
||
Install the latest version of React: | ||
## Streaming SSR | ||
|
||
```jsx | ||
npm install next@latest react@latest react-dom@latest | ||
``` | ||
In Next.js 13, you can start using the `app/` directory (beta) to take advantage of streaming server-rendering. Learn more by reading the `app/` directory (beta) documentation: | ||
|
||
You can now start using React 18's new APIs like `startTransition` and `Suspense` in Next.js. | ||
- [Streaming and Suspense](https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense) | ||
- [Instant Loading UI](https://beta.nextjs.org/docs/routing/loading-ui) | ||
|
||
## Streaming SSR | ||
[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Streaming SSR. | ||
|
||
Next.js supports React 18 streaming server-rendering (SSR) out of the box. | ||
## React Server Components | ||
|
||
[Learn more about streaming in Next.js](/docs/advanced-features/react-18/streaming.md). | ||
In Next.js 13, you can start using the `app/` directory (beta) which use Server Components by default. Learn more by reading the `app/` directory (beta) documentation: | ||
|
||
## React Server Components (Alpha) | ||
- [Rendering Fundamentals](https://beta.nextjs.org/docs/rendering/fundamentals) | ||
- [Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components) | ||
|
||
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. | ||
[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Server Components. | ||
|
||
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. | ||
## Edge and Node.js Runtimes | ||
|
||
## Switchable Runtime (Alpha) | ||
Next.js has two **server runtimes** where you can render parts of your application code: the **Node.js Runtime** and the [**Edge Runtime**](/docs/api-reference/edge-runtime.md). Depending on your deployment infrastructure, both runtimes support streaming. | ||
|
||
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. | ||
By default, Next.js uses the Node.js runtime. [Middleware](https://nextjs.org/docs/advanced-features/middleware) and [Edge API Routes](https://nextjs.org/docs/api-routes/edge-api-routes) use the Edge runtime. | ||
|
||
This feature is still experimental. [Learn more about the switchable runtime](/docs/advanced-features/react-18/switchable-runtime.md). | ||
[Learn more about the different runtimes](/docs/advanced-features/react-18/switchable-runtime.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,10 @@ | ||
# React Server Components (RFC) | ||
# React Server Components | ||
|
||
React Server 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. | ||
|
||
In an upcoming Next.js release, React and Next.js developers will be able to use Server Components inside the `app` directory as part of the changes outlined by the [Layouts RFC](https://nextjs.org/blog/layouts-rfc). | ||
In Next.js 13, you can start using the `app/` directory (beta) which use Server Components by default. Learn more by reading the `app/` directory (beta) documentation: | ||
|
||
## What are React Server Components? | ||
- [Rendering Fundamentals](https://beta.nextjs.org/docs/rendering/fundamentals) | ||
- [Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components) | ||
|
||
React Server Components improve the user experience of your application by pairing the best parts of server-rendering with client-side interactivity. | ||
|
||
With traditional React applications that are client-side only, developers often had to make tradeoffs between SEO and performance. Server Components enable developers to better leverage their server infrastructure and achieve great performance by default. | ||
|
||
For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead stay entirely on the server. By sending less JavaScript to the browser, the time to interactive for the page is decreased, leading to improved [Core Web Vitals](https://vercel.com/blog/core-web-vitals). | ||
|
||
## React Server Components vs Server-Side Rendering | ||
|
||
[Server-side Rendering](/docs/basic-features/pages.md#server-side-rendering) (SSR) dynamically builds your application into HTML on the server. This creates faster load times for users by offloading work from the user's device to the server, especially those with slower internet connections or older devices. However, developers still pay the cost to download, parse, and hydrate those components after the initial HTML loads. | ||
|
||
React Server Components, combined with Next.js server-side rendering, help eliminate the tradeoff of all-or-nothing data fetching. You can progressively show updates as your data comes in. | ||
|
||
## Using React Server Components with Next.js | ||
|
||
The Next.js team at Vercel released the [Layouts RFC](https://nextjs.org/blog/layouts-rfc) a few months ago outlining the vision for the future of routing, layouts, and data fetching in the framework. These changes **aren't available yet**, but we can start learning about how they will be used. | ||
|
||
Pages and Layouts in `app` will be rendered as React Server Components by default. This improves performance by reducing the amount of JavaScript sent to the client for components that are not interactive. Client components will be able to be defined through either a file name extension or through a string literal in the file. | ||
|
||
We will be providing more updates about Server Components usage in Next.js soon. | ||
[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Server Components. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,10 @@ | ||
# Streaming SSR | ||
|
||
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. | ||
Streaming allows you to incrementally render parts of your UI to the client. | ||
|
||
## Using Streaming Server-Rendering | ||
In Next.js 13, you can start using the `app/` directory (beta) to take advantage of streaming server-rendering. Learn more by reading the `app/` directory (beta) documentation: | ||
|
||
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/features/edge-functions?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) 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. | ||
- [Streaming and Suspense](https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense) | ||
- [Instant Loading UI](https://beta.nextjs.org/docs/routing/loading-ui) | ||
|
||
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. | ||
|
||
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. | ||
|
||
For non-SSR pages, all Suspense boundaries will still be [statically optimized](/docs/advanced-features/automatic-static-optimization.md). | ||
|
||
## Streaming Features | ||
|
||
### next/dynamic | ||
|
||
Next.js supports lazy loading external libraries with `import()` and React components with `next/dynamic`. Deferred loading helps improve the initial loading performance by decreasing the amount of JavaScript necessary to render the page. Components or libraries are only imported and included in the JavaScript bundle when they're used. | ||
|
||
Read more about how to use [`next/dynamic`](/docs/advanced-features/dynamic-import.md). | ||
|
||
## Important Notes | ||
|
||
#### `next/head` and `next/script` | ||
|
||
Using resource tags (e.g. scripts or stylesheets) in `next/head` won't work as intended with streaming, as the loading order and timing of `next/head` tags can no longer be guaranteed once you add Suspense boundaries. We suggest moving resource tags to `next/script` with the `afterInteractive` or `lazyOnload` strategy, or to `_document`. For similar reasons, we also suggest migrating `next/script` instances with the `beforeInteractive` strategy to `_document`. | ||
|
||
#### Data Fetching | ||
|
||
Data fetching within `Suspense` boundaries is currently only supported on the client side. **Server-side data fetching is not supported** yet. Read the [Layouts RFC](https://nextjs.org/blog/layouts-rfc) for more information about the future of data fetching on the server. | ||
|
||
#### Styling | ||
|
||
The following solutions are compatible with Next.js streaming: | ||
|
||
- Inline Styles | ||
- [Global Stylesheets](/docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet) | ||
- [CSS Modules](/docs/basic-features/built-in-css-support.md#adding-component-level-css) | ||
- [styled-jsx](/docs/basic-features/built-in-css-support.md#css-in-js) | ||
|
||
CSS-in-JS solutions like `styled-components` and `emotion` are currently not compatible with streaming. For library authors, check out the [upgrade guide](https://github.com/reactwg/react-18/discussions/110) to learn more. | ||
[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Streaming SSR. |
Oops, something went wrong.