澶у濂斤紝鎴戞槸Kason銆傛渶杩慠emix鍥㈤槦鐨勬毚韬佸皬鍝yanFlorence杩炵画鍚愭Ы浜嗗ソ鍑犱釜鍙嬪晢妗嗘灦锛屾瘮濡傦細鍠稴olidStart鎶勮Remix鐨勬枃妗ｏ紝鍠種ext.js鎶勮Remix鐨凙PI璁捐锛屽悙妲紸stro鍜孮wik銆備笉鍒颁竴澶╁氨琚垜鍝ュ垹浜嗮煠€備互涓婄殑浜嬫儏鎴戜滑浠婂ぉ涓嶈皥鏄潪銆傛兂闂棶涓嶇粡甯稿叧娉ㄦ柊鍓嶇杞瓙寮€鍙戠殑鍚屽锛屾鏃朵綘鐨勫唴蹇冩椿鍔ㄦ槸涓嶆槸锛氳繖浜汿M閮芥槸浠€涔堟鏋讹紵涓轰粈涔堟垜涓€涓兘涓嶈璇嗭紵浠婂ぉ锛屾垜浠粠琚玆yan-IslandsArchitecture鍚愭Ы鐨凙stroidea鍑哄彂锛岀湅鐪嬪墠绔殑浣撶Н鏈夊澶с€傛杩庡姞鍏ヤ汉绫讳紭璐ㄥ墠绔鏋剁兢銆備粈涔堟槸宀涘笨寤虹瓚锛熷湪涓€绡囨枃绔犱腑鎺ㄥ箍銆傝繖鏄竴涓熀浜嶴SR锛圫erverSideRendering锛夌殑鏋舵瀯銆傝浜嗚В浠栫殑鐗圭偣锛屾垜浠渶瑕佷簡瑙ｄ紶缁烻SR鐨勭己闄枫€傚湪浼犵粺鐨凷SR涓紝褰撻灞忔覆鏌撳畬鎴愬悗锛屾湇鍔″櫒浼氬悜娴忚鍣ㄨ緭鍑篐TML缁撴瀯銆傛祻瑙堝櫒娓叉煋瀹孒TML鍚庯紝浼氭墽琛屽墠绔鏋剁殑鍒濆鍖栭€昏緫锛屽皢浜嬩欢缁戝畾鍒癏TML缁撴瀯涓娿€傛姝ラ绉颁负姘村悎鐗┿€俬ydrate瀹屾垚鍚庯紝椤甸潰鍙互鍝嶅簲鐢ㄦ埛浜や簰銆備篃灏辨槸璇达紝鍙湁褰撴暣涓〉闈㈢殑鎵€鏈夌粍浠堕兘琚按鍖栧悗锛岄〉闈笂鐨勪换浣曠粍浠舵墠鑳藉搷搴旂敤鎴蜂氦浜掋€侰hromeLightHouse鍩哄噯娴嬭瘯涓殑TTI锛堜氦浜掓椂闂达級鎸囨爣鐢ㄤ簬琛￠噺椤甸潰瀹屽叏浜や簰鎵€闇€鐨勬椂闂淬€傞殢鐫€浼犵粺SSR鏋舵瀯椤甸潰搴旂敤瑙勬ā鐨勫鍔狅紝TTI鎸囨爣浼氭寔缁笂鍗囥€傚宀涙灦鏋勭殑鐩殑鏄紭鍖朣SR鏋舵瀯涓嬬殑TTI鎸囨爣銆傚宀涙灦鏋勪笅锛岀粍浠跺垎涓猴細浜や簰缁勪欢棣栧睆闈炰氦浜掔粍浠朵緥濡傚湪濡備笅椤甸潰缁撴瀯涓細棣栧睆闈炰氦浜掔粍浠跺寘鎷珻ontent銆丄dvertisement銆丗ooter锛堢櫧鑹查儴鍒嗭級浜や簰缁勪欢鍖呮嫭Header,Sliderbar,ImageCarousel(colorPart)棣栧睆闈炰氦浜掔粍浠朵細鍍忎紶缁烻SR涓€鏍疯緭鍑篐TML鍒版祻瑙堝櫒锛岃€屼氦浜掔粍浠朵細鍦ㄦ祻瑙堝櫒涓紓姝ュ苟鍙戞覆鏌撱€備氦浜掑紡缁勪欢灏卞儚HTML娴锋磱涓殑宀涘笨锛屽洜姝ゅ緱鍚嶅矝灞挎灦鏋勩€傚宀涙灦鏋勮浜や簰浼樺厛绾ч珮鐨勭粍浠跺厛浜や簰锛屽墿涓嬬殑浣庤川閲忕粍浠舵參鎱㈡按鍖栥€傝繖鏍凤紝鍦ㄩ〉闈ydrate瀹屾垚涔嬪墠锛岄噸瑕佺殑缁勪欢灏卞凡缁忎氦浜掍簡锛屼粠鑰岄檷浣庝簡TTI鎸囨爣銆傛捣宀涘缓绛戠殑鐜板疄鎰忎箟鏄粈涔堬紵渚嬪锛屽浜庣數瀛愬晢鍔＄珯鐐癸紝寰堟槑鏄锯€滅珛鍗宠喘涔扳€濇寜閽殑浜や簰鎬т紭鍏堜簬鈥滃弽棣堚€濇寜閽殑浜や簰鎬с€係SR璁╃敤鎴锋洿鏃╃湅鍒伴〉闈紝瀛ゅ矝鏋舵瀯璁╅〉闈㈤噸瑕侀儴鍒嗭紙绔嬪嵆璐拱鎸夐挳锛夋洿鏃╄鐐瑰嚮銆傝繖鑳屽悗鏄洿楂樼殑璐拱鐜囧拰鏇村鐨勯挶~~~IslandsArchitecture瀹炵幇妗嗘灦鐩墠瀹炵幇Islands鏋舵瀯鐨勫叏鏍堟鏋朵富瑕佹湁Astro鍜孮wik銆侫stroAstro鐨勭壒鐐规槸锛氫綔涓轰竴涓叏鏍堟鏋讹紝涓昏鎺у埗鏁翠綋鏋舵瀯锛屽瀹炵幇鍏蜂綋涓氬姟鎵€闇€鐨勫墠绔鏋舵病鏈夎姹傘€備篃灏辨槸璇达紝寮€鍙戣€呭彲浠ュ湪Astro涓娇鐢≧eact銆乂ue銆丳react銆丼velte绛夋鏋舵潵瀹炵幇鐗瑰畾鐨勪笟鍔￠€昏緫锛岀敋鑷冲彲浠ュ湪涓€涓?astro缁勪欢涓贩鍚堜娇鐢ㄥ叾浠栨鏋剁殑缁勪欢銆備緥濡傦紝鍦ㄤ笅闈㈢殑渚嬪瓙涓紝.astro缁勪欢涓紩鍏ヤ簡React銆乂ue鍜孲velte鐨勭粍浠讹細QwikQwik鐢眀uilder.io鐨凜TOmi拧kohevery锛堜篃鏄疉ngular/AngularJS鐨勫彂鏄庤€咃級缂栧啓銆傝妗嗘灦鐨勭壒鐐规槸锛氳秴缁嗙矑搴︾殑瀛ゅ矝鏋舵瀯锛岀矑搴︾敱寮€鍙戣€呭彲鎺с€傚浜嶢stro锛屽宀涙灦鏋勯€傜敤浜庣粍浠躲€傚湪Qwik涓紝瀛ゅ矝鏋舵瀯鐨勬渶缁嗙矑搴︽槸缁勪欢涓殑鏂规硶銆備緥濡備笅闈㈡槸HelloWorld缁勪欢锛堝彲浠ュ彂鐜癚wik浣跨敤浜嗙被浼糝eact鐨勮娉曪級锛氬搴旂殑椤甸潰娓叉煋鏁堟灉锛氭墦寮€娴忚鍣ㄧ綉缁滈潰鏉匡紝杩欎釜椤甸潰浼氭湁澶氬皯JS璇锋眰锛熺敱浜庤繖鏄竴涓潤鎬佺粍浠讹紝娌℃湁閫昏緫锛屾墍浠ョ瓟妗堟槸锛氭病鏈塉S璇锋眰銆傝鎴戜滑鏉ョ湅鐪嬬粡鍏哥殑Counter缁勪欢銆備笌HelloWorld鐩告瘮锛屽鍔犱簡鐐瑰嚮鎸夐挳鐘舵€佸彉鍖栫殑閫昏緫銆備唬鐮佸涓嬶細瀵瑰簲鐨勯〉闈㈡覆鏌撴晥鏋滐細鎵撳紑娴忚鍣ㄧ綉缁滈潰鏉匡紝杩欎釜椤甸潰浼氭湁澶氬皯涓狫S璇锋眰锛熺瓟妗堝張鏄細娌℃湁JS璇锋眰銆傛敞鎰忥紝鍦ㄨ繖涓や釜缁勪欢鐨勪唬鐮佷腑锛宑omponent$鏄敤鏉ュ畾涔夌粍浠剁殑锛屽苟涓旀湁涓€涓?绗﹀彿銆傚湪Counter涓紝onClick$鍥炶皟涔熸湁涓€涓?绗﹀彿銆傚湪Qwik涓紝浠?涓哄悗缂€鐨勫嚱鏁版槸寤惰繜鍔犺浇鐨勩€傚宀涙灦鏋勭殑绮掑害鏈夊缁嗗彇鍐充簬$鐨勫畾涔夋湁澶氱粏銆傛瘮濡侰ounter涓紝濡傛灉onClick$鏈?鍚庣紑锛岄偅涔堢偣鍑诲洖璋冨氨鏄噿鍔犺浇鐨勶紝鎵€浠ラ灞忔覆鏌撲笉浼氬寘鍚偣鍑诲悗閫昏緫瀵瑰簲鐨凧S浠ｇ爜銆傜偣鍑绘寜閽悗锛屼細鍙戣捣2涓狫S璇锋眰銆傜涓€涓姹傝繑鍥炵偣鍑诲悗鐨勯€昏緫锛氱浜屼釜JS璇锋眰杩斿洖缁勪欢閲嶆柊娓叉煋鐨勯€昏緫锛氭墽琛屽畬杩欎袱娈典唬鐮佸悗锛孋ounter鍙樹负1銆傚鏋滄煡鐪嬪厓绱狅紝浼氬彂鐜板湪鐐瑰嚮鍓嶏紝閫昏緫鐨勫湴鍧€瀛樻斁鍦╞utton鐨刼n:click灞炴€т腑锛氱偣鍑诲悗锛屼細浠庡搴旂殑鍦板潃涓嬭浇JS浠ｇ爜锛屾墽琛屽搴旂殑閫昏緫銆俁eact涓轰粈涔堟毚韬佽€佸ご鍦ㄦ枃绔犲紑澶存姳鎬ˋstro鍜孮wik娌℃湁鏂版剰锛熻繖鏄洜涓篟eact闀挎湡浠ユ潵涓€鐩村湪鏈濈潃瀛ゅ矝鏋舵瀯鐨勬蹇靛彂灞曘€傚湪React涓紝杩欑鍝插琚О涓篠electiveHydration銆傚叿浣撴潵璇达紝鍦⊿SR鍦烘櫙涓嬶紝Suspense缁勪欢鍖呰９鐨勭粍浠跺皢浣滀负瀛ゅ矝鏋舵瀯涓嬬殑浜や簰缁勪欢銆傚鍗峰墠绔櫧鐒跺宀涙灦鏋勪笅鐨勫叏鏍堟鏋舵湁寰堝浼樼偣锛堥灞忔覆鏌撳揩銆乀TI鐭級锛屼絾瀹冨苟涓嶆槸涓囪兘鐨勩€傛瘮杈冮€傚悎瀵归灞忔覆鏌撻€熷害鍜孴TI瑕佹眰楂樼殑鍦烘櫙锛屼絾鏁翠綋椤甸潰浜や簰骞朵笉澶嶆潅銆傛瘮濡傜數鍟嗛〉闈㈠崥瀹㈡枃妗ｏ紝瀵逛簬浜や簰鎬у己鐨刉eb搴旂敤锛堟瘮濡傚悗鍙扮鐞嗙郴缁熴€佺ぞ鍖猴級锛屾洿閫傚悎浼犵粺鐨凷SR銆傛柟妗堬紙濡侼ext.js锛夋垨CSR鏂规锛堢洿鎺ヤ娇鐢ㄥ墠绔鏋讹級銆傚彲瑙侊紝瀛ゅ矝鏋舵瀯鐨勫簲鐢ㄥ満鏅苟涓嶅ぇ锛屼絾鍏跺疄鐜伴毦搴﹁繙楂樹簬CSR鎴栦紶缁烻SR銆傚ぇ澶氭暟寮€鍙戜汉鍛樺彲鑳戒竴鐢熼兘涓嶄細浣跨敤瀛ゅ矝鏋舵瀯銆傚湪濡傛灏忕殑缁嗗垎甯傚満涓嚭鐜颁簡濡傛澶氱殑绔炰簤瀵规墜銆傚墠绔湡鐨勫お鍗蜂簡銆傘€傘€?/p>
