本文為官方文件翻譯，如使用其他前端框架可參考官方

SSR 支援提前渲染造訪的頁面，並且回傳渲染的 HTML 到瀏覽器。這讓造訪者可以在資源完整載入之前看到並和頁面互動，另外提供的好處像是減少搜尋引擎分析建置索引的時間，優化 SEO。

Web Serial API 連接裝置溝通。

Web Serial API 為新功能支援專案的其中一部分，Chrome 89 已支援

原文: How React server components work: an in-depth guide
推薦參考文章: React 新概念 — Server Components

React Server Component (RSC)是個令人激動的新功能，不久的將來將會產生很大的影響包括頁面載入效能，打包檔案大小，和開發 React 應用程式的方式。在 Plasmic 開發 Visual Builder for React 時，我們非常關心效能的問題 - 許多客戶建立了行銷和電商相關的網站。因此就算 RSC 還在實驗階段，我們也已經深入探究。在這篇文章，我們會分享目前的研究成果!

在深入 useSyncExternalStore 之前，讓我們先了解一下一些新的術語。

併發渲染與 startTransition

併發指的是基於分配任務的優先順序同時執行多個任務的機制。如果您還不明白這個觀念可以參考 Dan Abramov 的說明

我們廢話不多說直接進入程式碼的部分。如果您在找尋 15 分鐘快速實作，那本篇就是。

本篇會使用 TypeScript，但我們會在寫完程式之後才添加型別。這不是正常的流程，但因為部分讀者不使用 TypeScript 因此我們不想讓您混亂。一般來說我們應該在寫程式的時候就建立型別，才可以在一開始就享受 TypeScript 的好處。

原文﹔Deep-copying in JavaScript using structuredClone

很長一段時間在 JavaScript 對於深度複製或說深拷貝我們都需要自己處理或者使用函式庫。現在平台支援了 structuredClone

前言

本文只是快速看一下 Remix 的賣點，至於推不推暫時不好說，待筆者更深入研究分享，但..就目前官網提供的下面賣點，我是已經被點火了。

Remix 專注在網頁的基礎組成和 UX，更簡單的建置更棒的網站。

筆者：乍看之下，用不精準的感覺形容就是 Meteor 流星 React 版。

useEffect 應該在瀏覽器渲染（ paint() ）之後執行，以防止阻塞更新。但您知道它並沒有保證一定在渲染之後觸發？在 useLayoutEffect 中更新狀態（state）會導致同一次渲染中的 useEffect 在渲染之前執行，這是為了有效率的處理佈局的效果。感到困惑嗎？

React 18 alpha 已經釋出，穩定版可能幾個月後就會跟進。是時候聊聊加入的新功能了。如果您本來就不知道 React 那您可以略過這篇文章。

介紹新功能之前，我們先來看一些您有可能不熟的概念，例如 SSR，Suspense 還有 Hydration。如果您已經知道這些，您可以直接跳到 React 18 的變更一章。

深入新功能之前需要了解的概念

Server Side Rendering

伺服器端渲染 SSR 主要和改善使用者體驗和 SEO 有關，並不是針對改善應用程式的效能。當客戶端對一般 React 應用程式請求頁面時，伺服器會回應一些檔案。這種情境下有兩個很重要的檔案：第一個是一個幾乎為空的 HTML，第二個就是 bundle.js。應用程式依據路由在這個空的 HTML 中利用 JS 動態產生內容。這種模式叫做客戶端渲染，因為主要是由客戶端動態渲染。使用者最一開始會看到空白的頁面，接著當 bundle.js 下載完畢會動態渲染。

在為我們的專案（React）進行程式碼審查的時候，我常發現開發成員沒有意識到關於 useState 提供的一些好用功能或討厭的陷阱。雖然這些觀念不是什麼重大的啟發，但每一個使用 Hook 的人都應該要了解。