[TechSharing] มาใช้ React Compiler คู่กับ Next.js กัน !

หลังจากที่ทาง React ได้มีการปล่อย React Compiler ออกมา ก็ได้เรียกเสียงฮือฮาให้ Community มาก เพราะตัว React Compiler มันจะช่วย memoized ต่าง ๆ ให้แบบอัตโนมัติ แถม Meta ได้เอาไป applied กับแอปพลิเคชั่นตัวเองแล้วด้วย คือ Quest Store กับ Instagram ซึ่งจาก statistics ที่ Meta เอามาให้ดูพบว่า

• user interactions เร็วขึ้น 2.5 เท่า
• initial load times เร็วขึ้น 12% แถมไม่ใช้ memory เพิ่มขึ้นเลยอีกต่างหาก

มันช่วยอะไรนะ ?

หลาย ๆ คนคงจะคุ้นชินกับ memoization ดีอยู่แล้วเช่นพวก useMemo, useCallback, React.memo งั้นมันช่วยอะไรให้ชีวิตนะ?

ทาง React Team ก็เลยให้เหตุผลว่า พวก memoization มันทรงพลังแหละ แต่บางคนก็ลืมใช้บ้าง หรือใช้แล้วแต่ก็ใช้มันผิด ๆ ไปบ้าง ตัว React Compiler ก็เลยเกิดขึ้นมาด้วยประการฉะนี้ โดย

React Compiler จะ follows JavaScript and Rules of React ให้
ซึ่งถ้ามันพบว่ามีการ breakages the rules เมื่อไหร่ มันก็จะ Auto skip ไปเลย ทำให้ลดการ rerender ลงแบบอัตโนมัติ

ถ้าใครสนใจตัว React Compiler ตอนนี้เค้า Open Sourced แล้ว ไปนัวกันได้ที่ GitHub 🤖

แล้ว Next.js ล่ะ?

หลังจากที่ปล่อย React Compiler ออกมา เราที่ใช้ Next.js อยู่ก็อยากจะลองบ้าง เพราะมีโปรเจกต์นึงใช้อยู่พอดี และเป็นโปรเจกต์ที่กึ่ง ๆ sandbox ไว้ทดลองอยู่แล้ว ก็เลยเป็นฤกษ์งามยามดีในการเขียน blog แถมได้ลองของใหม่อีก ประกอบกับเจอ PR นี้ของ Next.js ที่ experimental support ตัว React Compiler แล้ว + Documentation React Compiler Usage with Next.js 🤤 หวานล่ะทีนี้

ช้าอยู่ใย ไปลุยกันเลย~ 💙

*เตือนไว้ก่อนว่าสิ่งนี้ยังไม่เหมาะกับการใช้บน production ในตอนนี้ เพราะยังเป็น Experimental อยู่ครับ*

ก่อนอื่นมา install Next.js Canary, React Canary, React Dom Canary กับตัว babel-plugin-react-compiler ฮะ

pnpm install next@canary babel-plugin-react-compiler react@canary react-dom@canary

แล้วก็ปรับ config ใน next.config.{js|mjs} ให้ใช้ Experimental React Compiler เป็นอันเสร็จสิ้นพิธี สั้น ๆ ง่าย ๆ ฮะ

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;module.exports = nextConfig;

ผลหลังจากติดตั้งและลองใช้งานเบื้องต้น คือ หน้าเว็ปยังรันได้ปกติ และไม่ได้รู้สึกว่าต่างจากเดิมเท่าไหร่ 😂 เพราะดูด้วยตาเนื้ออย่างเดียว ยังไม่ได้ลอง profiling เพิ่มเติมฮะ

👨🏻‍💻 💻 | ใครอยากอ่าน Blog อื่นเพิ่มเติม ไปแวะเวียนทักทาย พี่เจมส์ ได้ที่นี่เลยฮ๊าบบบ 👉🏻👉🏻 https://sujamess.com/