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

繼續閱讀

[譯] Remix 快速入門

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

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

繼續閱讀

Remix 潮什麼?

前言

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

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

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

繼續閱讀

[譯] useEffect 有時候會在瀏覽器繪製(Paint)之前觸發

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

繼續閱讀

[譯] 概覽 React 18 新功能

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

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

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

Server Side Rendering

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

繼續閱讀

您可能不知道關於 useState 的 7 件事

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

繼續閱讀

React DnD 入門

[toc]

React DnD 是 React 一系列的單元功能,用來協助您建置介面上複雜的拖拉功能同時維持元件解耦。特別適合像是 Trello 類型的應用程式利用拖拉來轉移資料,並依據拖拉事件變更的狀態改變元件的外觀。

安裝

1
$ npm i react-dnd react-dnd-html5-backend
繼續閱讀