Frontend
সেপ্টেম্বর ২০২৬ 6 min read
আপনার 'দ্রুত' পেজ কেন এখনো ধীর মনে হয়
একটা পেজ কাগজে-কলমে ভালো score করেও janky মনে হতে পারে — content লাফায়, font ঝলকায়, hero image সবার শেষে লোড হয়। কিছু অভ্যাসেই বেশিরভাগ ঠিক হয়।
ওয়েবের জন্য তৈরি করা নিয়ে নোট — React, Next.js, TypeScript, সিস্টেম ডিজাইন ও পারফরম্যান্স।
একটা পেজ কাগজে-কলমে ভালো score করেও janky মনে হতে পারে — content লাফায়, font ঝলকায়, hero image সবার শেষে লোড হয়। কিছু অভ্যাসেই বেশিরভাগ ঠিক হয়।
বেশিরভাগ TypeScript টিউটোরিয়াল আপনার আছে এমন ডেটা বর্ণনা করে। বড় লাভ হলো discriminated union ও satisfies দিয়ে অবাঞ্ছিত state নিষিদ্ধ করা।
async/await async কোডকে স্বাভাবিক দেখিয়েছে, তাই বাগগুলো আরও চতুর হয়ে গেছে। review পাশ করা চারটা ভুল, দেখতে ঠিক লাগে বলে — আর সেগুলো ধরার উপায়।
WebSocket ডেমো পাঁচ মিনিটে কাজ করে — সমস্যা শুরু হয় পরে: reconnection, auth, মিস হওয়া event ও একাধিক সার্ভার। প্রোডাকশনের নোট।
ক্যাশিং বিক্রি হয় পারফরম্যান্স জয় হিসেবে, দাম দিতে হয় staleness বাগে। কোন read ক্যাশ করার মতো, কীভাবে সততার সঙ্গে invalidate করবেন ও কখন ক্যাশ দরকার নেই।
ব্যাকএন্ডের সবচেয়ে কঠিন বাগ ব্যর্থ request নয় — যেটা সফল হয় কিন্তু timeout করে, client retry করে। Idempotency key ও নিরাপদে repeat করা write নিয়ে।
useEffect React-এর সবচেয়ে ভুল ব্যবহৃত hook। যেসব effect শুধু computable state sync করে বা ভুল জায়গায় logic রাখে, আর যেগুলো সত্যিই থাকা উচিত।
কয়েকটা স্ক্রিনে copy-paste ঠিক আছে, আশিটায় এটাই মারে। ৮০-মডিউল অ্যাডমিন প্ল্যাটফর্মকে ধরে রাখা resource abstraction ও তার escape hatch নিয়ে।
কীভাবে একটি পেজকে configuration থেকে composable করা যায় — JSX না ছুঁয়ে section toggle ও পুনর্বিন্যাস করা — একটি typed registry ও App Router ব্যবহার করে।
যথেষ্ট pull request ও মেন্টরিংয়ের পর শিক্ষাগুলো সিনট্যাক্স নিয়ে ছিল না। রিভিউ আসলে কীসের জন্য অপ্টিমাইজ করে ও সেরা মন্তব্য কেন প্রশ্ন হয়।
দুটি সার্ভিসের সঙ্গে কথা বলা অ্যাপ সেই বিভাজন প্রতিটি component-এ ছড়িয়ে দিতে পারে। একটি শেয়ারড ডেটা লেয়ার UI-কে তা জানতে দেয় না।