introduction

React 18 已经包括了一些新的特性,例如Suspense,自动批量更新,例如startTransition的API，并增加了一些新的流式API(对于支持React.lazy的服务端渲染)

React 18 当前处于RC(发布候选版) …

React 18 使用在Next.js中

  1. npm install next@latest react@rc react-dom@rc

启用SSR 流化(Alpha)

当前React 18 已经内置了服务端(Suspense) 以及SSR 流式支持 … 允许你使用Http streaming 服务端渲染一个页面 ..

这是一个在Next.js 12中的实验性特性,但是一旦启用,SSR 将使用相同的Edge Runtime 作为中间件 ..

为了启用,使用这个实验性标志concurrentFeatures: true

  1. // next.config.js
  2. module.exports = {
  3.   experimental: {
  4.     concurrentFeatures: true,
  5.   },
  6. }

一旦启用,你能够使用Suspense 以及SSR 流化(对所有页面),这意味着你能够使用基于Suspense的数据抓取,next/dynamic以及 React的内置的React.lazy以及Suspense 边界 ..

  1. import dynamic from 'next/dynamic'
  2. import { lazy, Suspense } from 'react'
  4. import Content from '../components/content'
  6. // These two ways are identical:
  7. const Profile = dynamic(() => import('./profile'), { suspense: true })
  8. const Footer = lazy(() => import('./footer'))
  10. export default function Home() {
  11.   return (
  12.     <div>
  13.       <Suspense fallback={<Spinner />}>
  14.         {/* A component that uses Suspense-based */}
  15.         <Content />
  16.       </Suspense>
  17.       <Suspense fallback={<Spinner />}>
  18.         <Profile />
  19.       </Suspense>
  20.       <Suspense fallback={<Spinner />}>
  21.         <Footer />
  22.       </Suspense>
  23.     </div>
  24.   )
  25. }

React 服务器组件

React 服务器组件允许我们渲染任何事情,包括它们的组件(在服务器上),这是根本上不同于服务端渲染的,在服务器上预渲染HTML .. 通过服务器组件,这里不需要客户端js,并且页面渲染的更加快速,这提高了应用对用户的体验,

将服务器呈现的最佳部分与客户端交互性配对。

启用React 服务器组件

为了使用React 服务器组件,确保你安装了React 18,然后调整concurrentFeatures以及 ·serverComponent` 选项

  1. // next.config.js
  2. module.exports = {
  3.   experimental: {
  4.     concurrentFeatures: true,
  5.     serverComponents: true,
  6.   },
  7. }

如果你已经自定义了pages/_document组件,你需要移除getInitialProps静态方法以及getServerSideProps(暴露,如果有), 否则它不能和服务器组件工作,如果没有自定义的文档组件提供,那么Next.js 将回滚到默认的配置

  1. // pages/_document.js
  2. import { Html, Head, Main, NextScript } from 'next/document'
  4. export default function Document() {
  5.   return (
  6.     <Html>
  7.       <Head />
  8.       <body>
  9.         <Main />
  10.         <NextScript />
  11.       </body>
  12.     </Html>
  13.   )
  14. }

然后,你能够开始使用React 服务器组件,查看demo 了解更多信息

服务器组件APIs(Alpha)

为了在服务器上运行一个组件,追加server.js到文件名的结尾,例如./pages/home.server.js是一个服务器组件

对于客户端组件,增加.client.js到文件名结尾

例如: ./components/avatar.client.js

你能够从任何任何服务器组件导入其他服务器或者客户端组件,注意到一个服务器组件不能够被一个客户端组件导入 …

没有服务器或者客户端扩展的组件能够处理为”普通组件”并且能够被同时在服务器或者客户端进行使用 … 依赖它在哪里导入的

  1. // pages/home.server.js
  3. import { Suspense } from 'react'
  5. import Profile from '../components/profile.server'
  6. import Content from '../components/content.client'
  8. export default function Home() {
  9.   return (
  10.     <div>
  11.       <h1>Welcome to React Server Components</h1>
  12.       <Suspense fallback={'Loading...'}>
  13.         <Profile />
  14.       </Suspense>
  15.       <Content />
  16.     </div>
  17.   )
  18. }

Home以及 Profile组件将总是进行服务端渲染并且流式到客户端,并且不会再客户端运行时包括，然而<Content>将仍然能够被水和(在客户端),就像普通的React 组件 ..

了解更多demo,查看 link to the demo and repository.

受支持的Next.js APIs

  • ·next/link/next/image`
  • next/document / next/app
  • 动态路由

不支持的Next.js APIs

然而RSC以及 SSR 流化仍然处于alpha 阶段,不是所有的Next.js API 都是支持的,以下Next.js API 在服务端组件被限制了功能 ..

  • React 内部: 大多数hooks 例如useContext,useState,useReducer,useEffect以及 useLayoutEffect不是受支持的,到目前为止由于服务端组件在每次请求进行执行且是无状态的 …
  • next/head
  • 部分: 在.client.js组件中 useRouter是支持的
  • Styled JSX
  • CSS Modules
  • Next.js I18n
  • getInitialProps,getStaticProps,getStaticPaths

不进行SSR 流化,那么一切照常 ….(以前的任何特性都是支持的) ….