Next.js 如何優化匯入函式庫

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

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

繼續閱讀

[譯] Next.js 13 vs Remix 深入解析

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

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

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

繼續閱讀

認識 for await

首先,參考以下的實務範例:

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 搭配串流的方式。

繼續閱讀

React + Google Map 模仿 Airbnb 效果

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

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

完整教學與範例請參考 Github

(譯) 關於 React 併發功能與 Suspense 您所需要了解的事

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

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

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

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

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

繼續閱讀

使用 Callback Refs 取代 useEffect 避免問題產生

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

1
2
3
const ref = React.useRef(null);

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

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

繼續閱讀

[譯] React: 您可能不需要一個 Effect

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

本文您將學習

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

Inertia - Server-side Rendering (SSR) 以 React 為範例

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

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

繼續閱讀

[譯]React Server Component 如何運作深入解析

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

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

繼續閱讀