鑳屾櫙2020.12.21锛孌anAbramov銆丩aurenTan銆丣osephSavona鍜孲ebastianMarkb氓ge鑱斿悎鍙戝竷浜哛eact鏂扮壒鎬э細ReactServerComponents锛屽苟缁勭粐浜嗕竴鍦轰笓棰樻紨璁诧細IntroducingZero-Bundle-SizeReactServer鎴愬垎銆傚湴鍧€锛歨ttps://www.youtube.com/watch...鏈夊叴瓒ｇ殑鍚屽鍙互鍘荤湅鐪嬨€傪煂熶竴鍙ヨ鍛婏細React鏈嶅姟鍣ㄧ粍浠朵粛鍦ㄨ繘琛屼腑銆傛湰鐫€閫忔槑鐨勭簿绁烇紝杩欓」宸ヤ綔鏄叡浜殑锛岄璁℃潵鑷猂eact绀惧尯鐨勫垵姝ュ弽棣堛€備互鍚庤鑺卞緢澶氭椂闂村幓浜嗚В杩欓」鎶€鏈紝鐜板湪鍙槸鍒濇浜嗚В锛屾病蹇呰椹笂鎶曞叆瀛︿範銆傚鏋滀綘鎯崇郴缁熷湴瀛︿範杩欓」鎶€鏈紝寤鸿瀛︿範璺緞锛氳鐪嬭搴ц棰戝苟鍏嬮殕demodemo锛屾柟渚夸綘鎺㈢储ReactServer缁勪欢銆傞槄璇籖FC锛堟湯灏炬湁甯歌闂瑙ｇ瓟锛変互鑾峰緱鏇存繁鍏ョ殑鎶€鏈晠闅滃苟鎻愪緵鍙嶉銆侽K锛屽簾璇濆皯璇达紝涓嬮潰璁╂垜浠竴璧锋彮寮€RSC鐨勭绉橀潰绾便€傛湰鏂囦富瑕佸唴瀹癸細RSC:鍔ㄦ満鍜屽緟瑙ｅ喅鐨勯棶棰楻SC:浠€涔堟槸RSC:0鎵撳寘浣撶НRSC:鑷姩浠ｇ爜鎷嗗垎RSC:澶╃劧璐磋繎鍚庣闂瓟鏂囬鍏堬紝涓轰粈涔堣鍋歊SC锛熶竴涓柊浜嬬墿鐨勫嚭鐜颁竴瀹氭槸鏈夊師鍥犵殑銆侱anAbramov瀵规鍋氫簡涓€浜涜В閲娿€傛垜浠厛鏉ョ湅鐪嬭蒋浠跺紑鍙戜腑鐨勫嚑涓師鍒欙細GoodCheapFast鐨勬瘡涓《鐐归兘鍙楀彟澶栦袱涓偣鐨勭害鏉熴€傛瘮濡傛垜浠棦瑕佷綆鎴愭湰锛屽張瑕佸揩閫熷紑鍙戯紝杩欏湪涓€瀹氱▼搴︿笂鍙兘浼氱壓鐗蹭骇鍝佽川閲忋€傞偅涔堬紝濡傛灉鎴戜滑閮芥兂瑕佸憿锛熷嵆杈惧埌鐞嗘兂鐨勫瑙傦細姣斿鎴戜滑鏈夎繖鏍蜂竴涓〉闈細姣忎釜椤甸潰閮介渶瑕佷娇鐢╝rtistId杩涜涓€浜涜姹傘€傛棤鐤戯紝杩欎細浜х敓澶ч噺鐨勮姹傦紙鐎戝竷寮忚姹傦級锛屼竴瀹氱▼搴︿笂浼氬鍔犵淮鎶ゆ垚鏈€傞偅涔堣繖绉嶇壓鐗茬淮鎶ゆ垚鏈殑鍋氭硶鏈夋病鏈夎В鍐崇殑鍔炴硶鍛紵褰撶劧鏈夛紝灏辨槸Relay+GraphQL銆?##Relay+GraphQL浣嗘槸杩欑缁勫悎骞朵笉閫傚悎鎵€鏈夌殑鎯呭喌锛屾瘮濡備竴浜涘ぇ鍏徃鎴栬€呴」鐩紝鏄笉鍏佽鎴栬€呬笉鑳戒娇鐢ㄧ殑銆傚啀鍥炶繃澶存潵鐪嬫垜浠殑闂锛屾垜浠殑闂鏄鏋滅粍浠跺悓鏃跺彂璧疯姹傦紝浼氫骇鐢熺€戝竷璇锋眰锛屽奖鍝嶇敤鎴蜂綋楠屻€傜劧鍚庯紝濡傛灉杩欎簺璇锋眰鍦ㄨ繑鍥炵粰瀹㈡埛绔箣鍓嶈澶勭悊锛屽氨鍍忎娇鐢℅raphQL鐨勬晥鏋滀竴鏍枫€傝繖鏍烽棶棰樹笉灏辫В鍐充簡鍚楋紵鍏锋湁杩欑鑳藉姏鐨勭粍浠跺氨鏄垜浠粖澶╃殑涓昏锛歊eactServerComponents銆傚彲浠ュ湪鏈嶅姟鍣ㄧ杩愯鐨凴eact缁勪欢銆俁SC绀轰緥濡傚浘锛岄渶瑕佸湪App涓樉绀轰竴涓狽oteList锛歭ist浠ｇ爜锛氫絾鏄湁涓€鍙ヨ瘽闇€瑕佹敞鎰忥細importNoteListfrom'./NoteList.client';ClientComponent鏄竴涓櫘閫氱殑React缁勪欢锛屼絾浠?client缁撳熬銆傜洰鐨勬槸鍛婅瘔React锛氳繖涓粍浠跺彧鍦ㄥ鎴风娓叉煋銆備唬鐮佸涓嬪浘鎵€绀猴細濡傛灉鎯虫妸sideBar鍋氭垚RSC缁勪欢锛屽彧闇€瑕佸崟鐙紪鍐欑浉搴旂殑瀹㈡埛绔唬鐮佸嵆鍙細瀹屾暣浠ｇ爜鍦板潃锛歨ttp://github.com/reactjs/ser銆?.鏈夊叴瓒ｇ殑鍙互鑷繁涓嬭浇鐜╀竴娆°€?鎵撳寘浣撶Н姣斿鎴戜滑瑕佸紑鍙戜竴涓紪杈戝櫒搴旂敤锛屽畠寮曠敤浜嗕竴浜涙瘮杈冨ぇ鐨勫閮ㄤ唬鐮侊細浣嗘槸濡傛灉鎶婅繖閮ㄥ垎鍋氭垚涓€涓猂SC缁勪欢锛屽氨鍙互鎵撳寘鎴?浣撶Н锛氫负浠€涔堬紵鍥犱负杩欓儴鍒嗘槸鏈嶅姟绔殑浠ｇ爜锛屾墍浠ヤ笉浼氭墦鍖呫€備絾鏄墠鎻愭槸浣犻渶瑕佽鍒掑ソ鍝簺鏄湇鍔＄缁勪欢锛屽摢浜涙槸瀹㈡埛绔粍浠躲€傝嚜鍔ㄤ唬鐮佹媶鍒嗗厑璁镐娇鐢≧eact.lazy鍔ㄦ€佸鍏ョ粍浠躲€備互鍓嶏紝杩欓渶瑕佹垜浠湪鍒囨崲缁勪欢/璺敱鏃舵墜鍔ㄥ畬鎴愩€傚湪ServerComponent涓紝杩欎竴鍒囬兘鏄嚜鍔ㄥ畬鎴愮殑銆傚湪涓婇潰鐨勫姩鐢讳腑锛屽乏杈圭殑鍒楄〃鏄疭erverComponent銆傚綋鐐瑰嚮鍗＄墖鏃讹紝浼氬姩鎬佸姞杞界粍浠跺搴旂殑鏁版嵁銆傝嚜鐒舵槸鏈変竴涓潬杩戝悗绔殑react-fetch锛屼笉浠呭鎴风鑳借窇锛屾湇鍔＄涔熻兘璺戯紒鎵€浠ュ畠鍙互绉颁负鍏变韩缁勪欢銆傚鍣ㄧ粍浠跺拰浜や簰缁勪欢涔嬪墠鎴戜滑鐨勭粍浠堕兘鏄鎴风缁勪欢銆傛寜鐓х幇鍦ㄧ殑鍒掑垎锛屾湭鏉ョ殑React缁勪欢鏍戣偗瀹氫細鍖呭惈寰堝瀹㈡埛绔粍浠跺拰鏈嶅姟绔粍浠讹紝濡傚浘锛氳繖鏍峰鍣ㄧ粍浠剁殑娓叉煋閫昏緫灏卞彲浠ュ緢鏂逛究鐨勫湪鏈嶅姟绔墽琛屽苟鍦ㄥ鎴风鎵ц浜や簰缁勪欢鐨勬覆鏌撻€昏緫銆備緥濡傦細ul涓殑鍐呭鏄湇鍔＄娓叉煋鐨勶紝鑰孲earchInput鍒欒礋璐ｅ鎴风鐨勪氦浜掋€傚嚑涓猂eactIOlibraryformoreprogressQ&A鐪嬪埌杩欎釜锛屾垜浠湁鍑犱釜闂鐨勭瓟妗堬細Q锛氫粈涔堟槸ServerComponents锛欰锛氬彲浠ュ湪鏈嶅姟鍣ㄧ杩愯鐨凴eact缁勪欢銆傞棶锛氭湇鍔″櫒缁勪欢瑙ｅ喅浠€涔堥棶棰橈紵A锛氱€戝竷璇锋眰銆傞棶锛歋erverComponents鏈変粈涔堝ソ澶勶紵A锛?鎵撳寘浣撶Н锛岃嚜鐒惰创杩戝悗绔紝鑷姩浠ｇ爜鎷嗗垎銆傞棶锛氳繖涓庢湇鍔″櫒绔覆鏌?SSR)鏈変綍涓嶅悓锛烝锛氫笌SSR鐩告瘮锛岀粍浠跺湪鏈嶅姟绔覆鏌撴垚HTML瀛楃涓插～鍏呭唴瀹癸紝鍦ㄥ鎴风姘村寲鍚庝娇鐢ㄣ€係erverComponents鏇村儚鏄垜浠啓鍦ㄥ鎴风鐨勬櫘閫氱粍浠讹紝鍙槸浠栫殑杩愯鐜鏄湇鍔″櫒绔€傞棶锛氭垜闇€瑕佺幇鍦ㄥ紑濮嬪悧锛烝锛氬厛鑷繁鐜╄瘯鐜╁惂~濂戒簡锛屽唴瀹瑰埌姝や负姝紝宸茬粡鏄櫄涓婁竴鐐逛簡锛屾櫄瀹夈€傝祫鏂欓摼鎺ttps://www.youtube.com/watch...https://github.com/reactjs/se...https://github.com/reactjs/rf...瑙夊緱杩欎釜灏卞叧娉ㄦ垜鍚ц繖绡囨枃绔犵殑鍐呭瀵逛綘寰堟湁鍚彂锛屽叧娉ㄦ垜鍚鏇村绮惧僵锛氳亰涓€鑱奅SM銆丅undleless銆乂ite銆丼nowpack锛岃涓€涓€婃棤闄愬垪琛ㄣ€嬫粴鍔ㄤ紭鍖栥€婇潰璇曚笁鎷涖€嬩唬鐮佸垏鍒嗭紙涓婏級銆嬮潰璇曚笁tricks銆嬬紦瀛橈紙涓婏級銆婇潰璇曚笁杞淬€嬬紦瀛橈紙涓嬶級銆婇潰璇曚笁杞淬€婬TTP锛堜笂锛夈€婇潰璇曚笁杞淬€婬TTP锛堜笅锛夈€婇潰璇曚笁杞淬€嬭繖涓?/p>
