日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

怎么理解 React Server Component 和 Next.js 的關系

來源: 責編: 時間:2023-11-16 09:39:45 261觀看
導讀大家好,我卡頌。最近Next.js v14發布,發布會的各種梗圖刷爆了國外前端社區。Next.js的諸多特性(比如Server Action、App Router),都是在RSC(React Server Component)基礎上衍生出的。從名字可以看出,RSC是React的特性。那么,該

HDh28資訊網——每日最新資訊28at.com

大家好,我卡頌。HDh28資訊網——每日最新資訊28at.com

最近Next.js v14發布,發布會的各種梗圖刷爆了國外前端社區。HDh28資訊網——每日最新資訊28at.com

HDh28資訊網——每日最新資訊28at.com

Next.js的諸多特性(比如Server Action、App Router),都是在RSC(React Server Component)基礎上衍生出的。HDh28資訊網——每日最新資訊28at.com

從名字可以看出,RSC是React的特性。那么,該怎么理解RSC和Next.js的關系呢?HDh28資訊網——每日最新資訊28at.com

React團隊的宿愿

對于前端框架的開發范式,有三個重要衡量因素:HDh28資訊網——每日最新資訊28at.com

  • 用戶體驗
  • 維護成本
  • 性能

但是,通常很難做到三者兼顧(具體原因本文不細究,感興趣的同學可以看data-fetching-with-react-server-components[1]。HDh28資訊網——每日最新資訊28at.com

簡單來說,在前端開發中,「IO瓶頸」是影響內容渲染速度的重要因素(可以簡單理解為,前端需要等待請求返回數據后,再根據數據渲染內容,這期間延遲的時間就是「IO瓶頸」)。HDh28資訊網——每日最新資訊28at.com

但是,前端框架能夠掌控的范圍局限在前端,所以無法對「IO瓶頸」做出極致優化,只能在三個因素中做出取舍(比如考慮用戶體驗與性能時,代碼維護成本就高)。HDh28資訊網——每日最新資訊28at.com

React團隊為了同時兼顧三者,需要對服務端擁有更多掌控。這就是RSC誕生的初衷。HDh28資訊網——每日最新資訊28at.com

但是,大部分React的受眾只是把React當作前端view庫,并不會直接使用RSC相關功能,所以React團隊選擇和Next.js團隊合作,落地RSC。HDh28資訊網——每日最新資訊28at.com

此時我們發現,React有三類受眾:HDh28資訊網——每日最新資訊28at.com

  1. 普通前端開發者,用穩定的React做業務開發
  2. 其他合作團隊(比如Next.js團隊),React團隊為他們提供API支持
  3. 喜歡嘗鮮的開發者/團隊,愿意嘗試那些可能出現在未來版本中的特性(通常還不穩定)

React團隊針對這三類受眾,制定了三條版本迭代路徑:HDh28資訊網——每日最新資訊28at.com

  • Latest路徑
  • Canary路徑
  1. Experimental路徑

我們正常通過npm i react下載的React包就是「Latest路徑」的打包產物。HDh28資訊網——每日最新資訊28at.com

通過npm update react@canary可以替換為canary包,RSC相關的功能就屬于canary包。HDh28資訊網——每日最新資訊28at.com

HDh28資訊網——每日最新資訊28at.com

同理,通過npm update react@xperimental可以替換experimental包。HDh28資訊網——每日最新資訊28at.com

脫離Next.js使用RSC

在Next.js的App Router模式,所有組件默認為服務端組件(即在服務端render的組件),只有當組件所在文件頂部標記了'use client'指令時,該組件是客戶端組件(即在前端render的組件)。HDh28資訊網——每日最新資訊28at.com

HDh28資訊網——每日最新資訊28at.com

比如下面就是個客戶端組件:HDh28資訊網——每日最新資訊28at.com

'use client'import {useState} from 'react';function Cpn() {  const [num, update] = useState(0);  // ...省略}

實際上,這并不是Next.js自己的定義,而是RSC中的規范。在React文檔中,我們可以看到'use client'與'use server'規范的定義,其中:HDh28資訊網——每日最新資訊28at.com

  • 'use client'用于標記客戶端組件(在服務端,默認所有組件都是服務端組件,所以客戶端組件需要專門標記)。
  • 'use server'用于標記前端的某個函數為Server Action(可以在前端執行的服務端邏輯)。

HDh28資訊網——每日最新資訊28at.com

既然是規范,那就需要落地。在Next.js中,規范的落地都被收斂到Next.js框架內部實現了。如果要脫離Next.js使用RSC,就需要我們自己落地規范。HDh28資訊網——每日最新資訊28at.com

RSC規范的落地包括三部分:HDh28資訊網——每日最新資訊28at.com

  • 服務端編譯時
  • 服務端運行時
  • 客戶端運行時

這三者都被收斂到react-server-dom-webpack[2]包中。HDh28資訊網——每日最新資訊28at.com

接下來我們簡單講下這三部分的作用。HDh28資訊網——每日最新資訊28at.com

服務端編譯時

通過react-server-dom-webpack/plugin名字中的webpack、plugin字樣能看出,這是個webpack插件,配置類似如下:HDh28資訊網——每日最新資訊28at.com

const ReactServerWebpackPlugin = require("react-server-dom-webpack/plugin");const config = {  // ...省略其他配置  plugins: [    new ReactServerWebpackPlugin({ isServer: false }),  ],}

他的作用是識別項目中的'use client'指令,作用有些類似于「全自動React.lazy」。HDh28資訊網——每日最新資訊28at.com

使用過React.lazy特性的同學會知道,當我們通過React.lazy懶加載組件時,懶加載的組件會被打包工具(比如webpack)打包成獨立的chunk。當前端需要該組件時,會通過Jsonp請求chunk文件。HDh28資訊網——每日最新資訊28at.com

比如下面代碼中的./Cpn.jsx組件由于懶加載,會被打包成獨立的chunk:HDh28資訊網——每日最新資訊28at.com

import React from 'react';const LayCpn = React.lazy(() => import('./Cpn.jsx'));function App(props) {  return <LayCpn {...props} />; }

與React.lazy類似,當我們在組件所在文件的頂部標記'use client'時,并在服務端組件的子孫組件中使用到該組件,該組件代碼也會打包成獨立的chunk。由于這個過程是全自動的,所以可以稱為「全自動React.lazy」。HDh28資訊網——每日最新資訊28at.com

服務端運行時

上面講到的編譯產物都是「客戶端組件對應chunk」,所以他們是不會在服務端運行時使用的。HDh28資訊網——每日最新資訊28at.com

服務端運行時的作用類似SSR,都是給定JSX輸入,經過render后獲得輸出。比如,給定如下輸入:HDh28資訊網——每日最新資訊28at.com

function App() {  return <div>hello</div>;}

對于SSR,會獲得字符串'<div>hello</div>'的輸出。HDh28資訊網——每日最新資訊28at.com

對于RSC規范,將輸入傳給react-server-dom-webpack/server導出的renderToPipeableStream方法,會獲得如下序列化數據:HDh28資訊網——每日最新資訊28at.com

0:"$L1"1:["$","div",null,{"children":"hello"}]

再讓我們看一個稍微復雜點的例子:HDh28資訊網——每日最新資訊28at.com

我們有個組件Cpn,由于他包含客戶端狀態(使用了useState),所以只能作為客戶端組件(頂部標記'use client'):HDh28資訊網——每日最新資訊28at.com

'use client'import {useState} from 'react';function Cpn() {  const [num, update] = useState(0);  // ...省略}

現在,我們的服務端組件App返回值中包含了Cpn:HDh28資訊網——每日最新資訊28at.com

function App() {  return <div><Cpn/></div>;}

經由renderToPipeableStream方法,會獲得如下序列化數據:HDh28資訊網——每日最新資訊28at.com

0:"$L1"2:I["./src/app/Test.jsx",["client0","client0.chunk.js"],"Test"]1:["$","div",null,{"children":["$","$L2",null,{}]}]

可以發現,序列化數據中并不包含具體的客戶端組件代碼,而是組件代碼對應的文件(client0.chunk.js),這個文件就是我們在「服務端編譯時」打包產生的chunk文件。HDh28資訊網——每日最新資訊28at.com

客戶端運行時

當「服務端運行時」產生的「序列化數據」傳遞給前端時,react-server-dom-webpack又出場了,這次使用的是react-server-dom-webpack/client。HDh28資訊網——每日最新資訊28at.com

這個包提供了幾個方法,用于將「從不同數據源獲取的序列化數據」轉換為「合法的React Element」,比如:HDh28資訊網——每日最新資訊28at.com

  • createFromFetch:通過fetch方法獲取序列化數據。
  • createFromReadableStream:通過可讀流獲取序列化數據。

對于上述序列化數據:HDh28資訊網——每日最新資訊28at.com

0:"$L1"2:I["./src/app/Test.jsx",["client0","client0.chunk.js"],"Test"]1:["$","div",null,{"children":["$","$L2",null,{}]}]

經由react-server-dom-webpack/client中方法的轉換,會得到一個React.lazy組件,這樣前端的React就能正常render這個組件了。HDh28資訊網——每日最新資訊28at.com

總結

RSC規范屬于React特性,來自于React Canary。規范的落地可以通過react-server-dom-webpack包實現。HDh28資訊網——每日最新資訊28at.com

整個工作流程包括三個階段:HDh28資訊網——每日最新資訊28at.com

  • 服務端編譯時,對應react-server-dom-webpack/plugin。
  • 服務端運行時,對應react-server-dom-webpack/server。
  1. 客戶端運行時,對應react-server-dom-webpack/client。

在Next.js中,RSC規范的落地被集成到框架內部,做到了開箱即用的RSC,并在此基礎上衍生出更完善的功能(App Router)。HDh28資訊網——每日最新資訊28at.com

參考資料

[1]data-fetching-with-react-server-components:https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html。HDh28資訊網——每日最新資訊28at.com

[2]react-server-dom-webpack:https://www.npmjs.com/package/react-server-dom-webpack。HDh28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-26561-0.html怎么理解 React Server Component 和 Next.js 的關系

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Java11 的 G1 垃圾收集器

下一篇: TypeScript 5.3 來了,一大波新特性

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 桓仁| 皮山县| 海南省| 驻马店市| 中西区| 龙泉市| 汤原县| 钟山县| 达州市| 鹤峰县| 古丈县| 睢宁县| 托里县| 上饶县| 宿州市| 北辰区| 犍为县| 昌乐县| 鄂托克前旗| 马山县| 延寿县| 射洪县| 海淀区| 涟水县| 汉寿县| 南华县| 阳城县| 沅江市| 平南县| 五莲县| 定远县| 洛阳市| 文成县| 海安县| 育儿| 昌黎县| 青川县| 贵州省| 宿松县| 天全县| 搜索|