สรุปบทความจาก Appwrite Blog · 27 ตุลาคม 2026Article summary · Appwrite Blog · Oct 27, 2026

TanStack Redact

React runtime ที่เบากว่า: สลับ runtime ของ React ตอน build แล้วลดขนาด bundle ได้สูงสุด 70.5% โดยไม่ต้องแก้โค้ดแอปA lighter React runtime: swap React’s runtime at build time and cut your bundle by up to 70.5% without touching app code

เวอร์ชัน 0.2.0 · ประกาศ 26 ตุลาคม 2026Version 0.2.0 · announced Oct 26, 2026

appwrite.io/blog

01 · Redact คืออะไร01 · What is Redact

runtime ทางเลือกของ React ที่สลับเข้ามาตอน buildAn alternative React runtime, swapped in at build time

Redact ทำหน้าที่แทน React และ React DOM ในเบราว์เซอร์ โดยยังคง API เดิม: components, hooks, context, Suspense และ hydration ใช้ได้เหมือนเดิม เปลี่ยนแค่ build config ไม่ต้องเขียนแอปใหม่Redact stands in for React and React DOM in the browser while keeping the same API: components, hooks, context, Suspense and hydration all work as before. You change the build config, not the app.

bundle เล็กลงSmaller bundle

ลด runtime overhead โดยไม่ต้อง rewrite แอปLess runtime overhead, no rewrite needed

API เข้ากันได้API-compatible

component, hook และ import เดิมยังทำงานได้Existing components, hooks and imports keep working

รองรับ 4 framework4 frameworks supported

TanStack Start, Vite, Vinext และ Next.jsTanStack Start, Vite, Vinext and Next.js

ปิด feature ได้Features can be switched off

ปิดส่วนที่ไม่ใช้เพื่อลดขนาดลงอีกDisable what you don’t use to shrink further

02 · Benchmark02 · Benchmark

bundle เล็กลง 20–70% ใน 4 frameworkBundles shrink 20–70% across 4 frameworks

TanStack สร้างแอปเล็ก ๆ ที่เทียบเท่ากันด้วย React และ Redact แล้ววัดขนาด gzip ของ JavaScript และ CSS ฝั่ง client ทั้งหมด รวม lazy chunksTanStack built equivalent small apps with React and Redact, then measured total gzipped client JavaScript and CSS, lazy chunks included

−70.5%

Vite ลดได้มากที่สุดVite shrank the most

จาก 68.3 KB เหลือ 20.1 KBfrom 68.3 KB down to 20.1 KB

Framework	React	Redact	ลดลงReduction
TanStack Start	109.3 KB	62.3 KB	43.0%
Vite	68.3 KB	20.1 KB	70.5%
Vinext	138.1 KB	98.8 KB	28.5%
Next.js	175.6 KB	139.9 KB	20.4%

02 · Benchmark02 · Benchmark

ปิด feature ที่ไม่ใช้ แล้วยังเล็กลงได้อีกTurn off unused features and it gets smaller still

TanStack Start

62.3 → 59.8 KB

เมื่อปิด runtime feature ที่แอปไม่ได้ใช้with unused runtime features disabled

Vite

20.1 → 12.6 KB

เหลือไม่ถึง 1 ใน 5 ของ React เดิมunder a fifth of the original React build

Vinext · ทดสอบ 6 รอบVinext · 6 runs

154.9 → 115.5 KB

build time เท่าเดิม, dev startup เร็วขึ้นเล็กน้อยsame build time, slightly faster dev startup

ข้อควรระวังในการตีความRead the numbers carefully

ตัวเลขทั้งหมดมาจากแอป benchmark เฉพาะ ไม่ใช่การันตีสำหรับทุกโปรเจกต์ React และการทดสอบบน Vinext ไม่ได้วัดความเร็ว rendering หรือ hydration ในเบราว์เซอร์ โค้ดและผลวัดเปิดให้ตรวจสอบซ้ำได้บน GitHubEvery figure comes from a specific benchmark app and is no guarantee for your React project. The Vinext runs didn’t measure in-browser rendering or hydration speed. Code and results are on GitHub to reproduce.

03 · กลไกการทำงาน03 · How it works

สลับ import ตอน build แล้ว render แบบ synchronousRedirect imports at build time, then render synchronously

โค้ด React ของคุณYour React code

import จาก react และ react-dom ตามปกติ ไม่แก้อะไรImports from react and react-dom as usual, nothing changes

Build config

plugin ของ Redact redirect import ของ React ที่รองรับRedact’s plugin redirects the supported React imports

Redact runtime

implementation ของ React API ที่กะทัดรัดกว่า ส่งไปเบราว์เซอร์A more compact implementation of the React API, shipped to the browser

React: concurrent rendering

มี time slicing และหยุด render กลางคันได้ ทำให้ scheduler ซับซ้อนและ runtime ใหญ่ขึ้นTime slicing and interruptible renders need a complex scheduler, which makes the runtime bigger

Redact: synchronous rendering

ตัด scheduling เหล่านั้นออก runtime จึงเล็กลง แต่ update ที่หนักอาจบล็อก input ของผู้ใช้จนกว่าจะ render เสร็จDrops that scheduling, so the runtime is smaller, but heavy updates can block user input until the render finishes

03 · Framework ที่รองรับ03 · Supported frameworks

4 framework แบ่งงานกับ Redact ต่างกันEach of the 4 frameworks splits the work with Redact differently

TanStack Start

Redact ทำ server rendering และ hydration ส่วน Start ยังดูแล routing และ server functionsRedact handles server rendering and hydration; Start keeps routing and server functions

Vite

plugin ของ Redact redirect import ของ React ที่รองรับไปยัง Redact โดยตรงRedact’s plugin redirects the supported React imports straight to Redact

Vinext

React ยังทำ server rendering และ React Server Components ส่วน Redact รับหน้าที่ hydration และ render ในเบราว์เซอร์React still does server rendering and React Server Components; Redact takes hydration and browser rendering

Next.js

Redact ทำ client rendering ทั้ง App Router และ Pages Router ขณะที่ React ยังทำ SSR และ RSC เหมือน VinextRedact renders on the client for both App Router and Pages Router; React still handles SSR and RSC, as with Vinext

ในทุกกรณี framework ยังจัดการ routing, caching และ server actions เองIn every case the framework still owns routing, caching and server actions

04 · ข้อแลกเปลี่ยน04 · Trade-offs

bundle เล็กลง ยังไม่เท่ากับแอปเร็วขึ้นA smaller bundle is not the same as a faster app

การ renderRendering

ทำงานแบบ synchronous จึงอาจทำให้การตอบสนองช้าลงเมื่อมี update ที่หนักSynchronous, so heavy updates can make the UI less responsive

ความเข้ากันได้ของ APIAPI compatibility

รองรับ React API ส่วนใหญ่ แต่พฤติกรรมด้าน scheduling และ runtime บางอย่างต่างออกไปMost of the React API is covered, but some scheduling and runtime behaviour differs

ไลบรารีภายนอกThird-party libraries

ไลบรารีที่พึ่งพาพฤติกรรมเฉพาะของ React ต้องผ่านการทดสอบความเข้ากันได้ก่อนLibraries that rely on React-specific behaviour need compatibility testing first

ประสิทธิภาพจริงReal-world performance

ขนาดที่เล็กลงไม่การันตีว่า hydration หรือ interaction จะเร็วขึ้นตามA smaller size doesn’t guarantee faster hydration or interaction

คำแนะนำจาก TanStack: ทดสอบ Redact กับหน้าจอที่หนักที่สุดของแอป ไม่ใช่ดูแค่การเปรียบเทียบ bundle sizeTanStack’s advice: test Redact on your app’s heaviest screens, not just on bundle-size comparisons

05 · เริ่มต้นใช้งาน05 · Getting started

เพิ่ม Redact ใน TanStack Start ได้ใน 4 ขั้นตอนAdd Redact to TanStack Start in 4 steps

1

ติดตั้งแพ็กเกจ @tanstack/redactInstall the @tanstack/redact package

2

เพิ่ม Redact plugin ใน Vite config ต่อจาก plugin ของ TanStack Start และ ReactAdd the Redact plugin to your Vite config after the TanStack Start and React plugins

3

ยังคงติดตั้ง react และ react-dom ไว้ และใช้ import เดิมทั้งหมดKeep react and react-dom installed and leave every import as it is

4

build แบบ production แล้วทดสอบ hydration, navigation, forms และ third-party componentsBuild for production, then test hydration, navigation, forms and third-party components

ssr: { noExternal: true }

config อย่างเป็นทางการของ TanStack Start ตั้งค่านี้ไว้ เพื่อให้ Vite redirect import ของ React ภายใน server dependencies ได้ด้วย ส่วน framework อื่นมีคู่มือติดตั้งของตัวเองThe official TanStack Start config sets this so Vite can also redirect React imports inside server dependencies. The other frameworks have their own setup guides.

06 · ตัดสินใจ06 · Deciding

ควรใช้ Redact แทน React ไหมShould you use Redact instead of React?

น่าลองเมื่อWorth trying when

ขนาด bundle เป็นเรื่องสำคัญของแอปBundle size really matters for your app
แอปใช้ framework ที่รองรับอยู่แล้วYou’re already on a supported framework
overhead ของ framework กินสัดส่วน JS ที่ส่งให้ผู้ใช้มากFramework overhead is a big share of the JS you ship

React ยังเหมาะกว่าเมื่อReact is still the better fit when

แอปพึ่งพา concurrent renderingYour app depends on concurrent rendering
ต้องการความเข้ากันได้ที่พิสูจน์แล้วกับไลบรารีซับซ้อนYou need proven compatibility with complex libraries
ยังไม่มีเวลาทดสอบหน้าจอที่หนักที่สุดYou can’t yet test your heaviest screens

คำแนะนำที่ใช้ได้จริง: เทียบทั้งสอง runtime กับแอปของคุณเอง วัด bundle size, hydration, ความลื่นไหล และความเข้ากันได้ ก่อนเปลี่ยนบน productionPractical advice: compare both runtimes on your own app, measuring bundle size, hydration, responsiveness and compatibility, before switching in production

07 · สรุป07 · Summary

สรุปใน 3 ข้อThree takeaways

1

Redact สลับ React runtime ตอน build ทำให้ bundle เล็กลง 20–70% โดยโค้ดแอปไม่ต้องเปลี่ยนRedact swaps the React runtime at build time, shrinking bundles 20–70% with no changes to app code

2

ราคาที่ต้องจ่ายคือ synchronous rendering และความเข้ากันได้ที่ต้องทดสอบเอง ขนาดที่เล็กลงไม่ได้แปลว่าเร็วขึ้นเสมอThe price is synchronous rendering and compatibility you must test yourself; smaller doesn’t always mean faster

3

วัดกับแอปจริงก่อนตัดสินใจ และถ้าใช้ TanStack Start ก็ deploy บน Appwrite Sites ได้โดยไม่ต้องตั้งค่าเพิ่มMeasure on your real app before deciding; TanStack Start apps using Redact deploy to Appwrite Sites with no extra setup

แหล่งอ้างอิงSources

บทความต้นทาง: appwrite.io/blog/post/tanstack-redact-lighter-react-runtimeOriginal article: appwrite.io/blog/post/tanstack-redact-lighter-react-runtime

ประกาศจาก TanStack: tanstack.com/blog/introducing-tanstack-redact · เอกสาร: tanstack.com/redact/latest · โค้ด: github.com/TanStack/redactTanStack announcement: tanstack.com/blog/introducing-tanstack-redact · Docs: tanstack.com/redact/latest · Code: github.com/TanStack/redact