加速 40% 冷啟動和 28% 建置速度

在 Next.js 最新版本，官方優化了套件匯入，改善了本地開發的效能和正式環境冷啟動的速度。特別適用於使用大型的 Icon ，元件庫，或其他重複 Export 大量模組的相依套件。

原文連結
備註：本文有略微簡化原文內容並提供一些補充，目標提供一個較簡化流暢容易理解的版本。另外本文改寫了 tsx 的範例希望能更容易了解觀念。

提到建置網頁應用程式，React 已經成為主流好一陣子了（目前 2023），並且採用率持續在上升。常見搭配 React 開發網站的方式中，Next.js 是比較主流的選項之一。

自從去年他們發佈了 App Router 等重大更新以來也一直備受關注。新的路由架構採用了嵌套佈局（Nested Layouts）並緊密整合了 React Server Component 和 Suspense 。

首先，參考以下的實務範例：

1
2
3
4
5
6
7
8
9
10
11

async function main() {
  const stream = await opeanai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'user', content: '測試回答' },
    ],
  });
  for await(const part of stream) {
    process.stdout.write(part.choices[0]?.delta?.content || '');
  }
}

這是一段 OpenAI Node SDK 的範例，使用 GPT-4 搭配串流的方式。

如過您希望製作像 Airbnb 那樣自訂標記的樣式，動態顯示一些資訊並且當用戶和其互動時可以渲染自訂的 React 元件，那麼您來對地方了。

本範例嘗試使用 Google 官方的 React Wrapper 函式庫實作 Google Map 功能，目標為自訂 MapOverView 達成在 Map 上加入複雜的 Marker。 例如像 Airbnb 點擊房源時可以展開。這個範例我們會支援 Marker Clustering。

完整教學與範例請參考 Github

使用者介面（UI）是由許多不同“部分”組成，而每個部分會以不同的頻率回應使用者的操作。有些例如表單的輸入欄位（<input>），需要即時回應使用者的操作，而其他像是內容很長的“篩選列表”或切換頁面則稍微慢一些。

在同步渲染的情況下，也就是沒有併發功能的 React 或者大部分的 JavaScript UI 框架/函式庫。一些回應比較慢的介面操作就會阻塞執行而拖累較快回應的部分。

React 併發功能就是為了解耦/分離回應快和慢的介面，使渲染慢的部分在背景繼續執行而不阻塞較快的部分，達到每個部分可以各自回應使用者的操作。

併發渲染並不會讓應用程式提升效率變快，只是利用上敘分離的方式讓使用起來感覺體驗變快了。

本文將探討 React 併發功能（React Concurrent），了解其解決的問題以及如何利用。

雖然 ref 是一個可變更 (mutable 物件在建立後可被修改) 的容器，我們理論上可以儲存任何資料。通常我們會拿來處理存取 DOM 節點:

1
2
3

const ref = React.useRef(null);

return <input ref={ref} defaultValue='Hello world' />;

ref 是一個內建的屬性，React 會在渲染後儲存 DOM 節點，當元件卸載後也會設為 null。

Effect 是讓您可以脫離典型 React 設計模型的一個方式。它讓您可以跳脫到 React 之外並讓您的 React 元件同步外部系統，比如使用非 React 的套件，網路，瀏覽器 DOM 。假如沒有涉及外部，例如您想要在某些 props 或 state 發生變更時更新元件的 state ，那麼您不應該使用 Effect。移除不必要的 Effect 可以讓您的程式碼更容易維護，執行效率更好，減少錯誤的產生。

本文您將學習

• 為什麼以及如何移除不必要的 Effect
• 如何快取耗費效能的計算而不使用 Effect
• 如何重置和調整元件 State 而不使用 Effect
• 如何在多個事件處理函式共享邏輯
• 哪些邏輯應該移到事件處理函式中
• 如何通知上層元件狀態變更

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

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 還在實驗階段，我們也已經深入探究。在這篇文章，我們會分享目前的研究成果!