យល់ដឹងពី force-dynamic ក្នុង Next.js៖ ពេលណាគួរប្រើ និងចៀសវាង

នៅក្នុងការអភិវឌ្ឍវេបសាយជាមួយ Next.js (ជាពិសេសចាប់ពីកំណែទម្រង់ App Router ឡើងទៅ) ការគ្រប់គ្រងរបៀបដែលទំព័រនីមួយៗទាញទិន្នន័យ និងបង្ហាញទៅកាន់អ្នកប្រើប្រាស់ គឺជារឿងសំខាន់បំផុត។ ក្នុងនោះ កូដមួយជួរគឺ export const dynamic = 'force-dynamic' តែងតែត្រូវបានអ្នកបង្កើតវេបសាយយកមកប្រើប្រាស់ជាញឹកញាប់។

តើហេតុអ្វីបានជាយើងត្រូវដាក់កូដនេះ? ហើយនៅពេលណាដែលយើងមិនគួរដាក់វាទាល់តែសោះ? ខាងក្រោមនេះជាការបកស្រាយលម្អិត៖

១. ហេតុអ្វីបានជាយើងត្រូវដាក់កូដ force-dynamic?

ពាក្យថា Force Dynamic មានន័យថា បង្ខំឲ្យទំព័រ (Route) នោះធ្វើការ Render ថ្មីរាល់ពេលមានអ្នកចូលមើល (Request Time) ដោយមិនឆ្លងកាត់ការរក្សាទុកក្នុងម៉ាស៊ីនបម្រើជាមុន (Static Caching) ឡើយ។ ករណីដែលយើងត្រូវតែប្រើវាមានដូចជា៖

• ទិន្នន័យប្រែប្រួលរហូត (Real-time / Live Data)៖ ប្រសិនបើទំព័ររបស់អ្នកបង្ហាញពីតម្លៃភាគហ៊ុន ចំនួនផលិតផលក្នុងស្តុកដែលប្រែប្រួលរាល់វិនាទី ឬព័ត៌មានបន្ទាន់ៗ អ្នកត្រូវការទិន្នន័យដែលថ្មីបំផុតជានិច្ច។
• ការប្រើប្រាស់ព័ត៌មានផ្ទាល់ខ្លួនរបស់អ្នកប្រើប្រាស់ (Personalized Content)៖ នៅពេលទំព័រនោះបង្ហាញព័ត៌មានផ្អែកលើគណនីរបស់អ្នកចូលមើល (User Profile, Shopping Cart, Notifications) ដែលទាមទារការពិនិត្យមើល Cookies ឬ Headers។
• ការទាញយកប៉ារ៉ាម៉ែត្រពី URL (searchParams)៖ នៅពេលទំព័ររបស់អ្នកដំណើរការផ្អែកលើការស្វែងរក ឬការចម្រាញ់ទិន្នន័យ (Filter) តាមរយៈ URL (ឧទាហរណ៍៖ ?query=iphone&category=tech)។

២. ហេតុអ្វីបានជាយើងមិនគួរដាក់កូដ force-dynamic?

ទោះបីជាការបង្ខំឲ្យដំណើរការបែប Dynamic ផ្តល់ទិន្នន័យថ្មីភ្លាមៗក៏ដោយ តែវាក៏មកជាមួយគុណវិបត្តិធំៗដែលអ្នកគួរចៀសវាង ប្រសិនបើមិនចាំបាច់៖

• ប៉ះពាល់ដល់ល្បឿនវេបសាយ (Performance Drop)៖ រាល់ពេលអ្នកប្រើប្រាស់ចុចចូលទៅកាន់ទំព័រនោះ Server ត្រូវចំណាយពេលទាញយកទិន្នន័យពី Database និងចម្អិនកូដសារជាថ្មី ដែលធ្វើឲ្យល្បឿនឆ្លើយតបដំបូង (Time to First Byte - TTFB) យឺតជាងទំព័រធម្មតា។
• បាត់បង់អត្ថប្រយោជន៍នៃ CDN Caching៖ ទំព័រដែលប្រើ force-dynamic មិនអាចរក្សាទុកនៅលើប្រព័ន្ធ CDN (Content Delivery Network) នៅក្បែរអ្នកប្រើប្រាស់បានឡើយ ពោលគឺរាល់ការចុចមើលត្រូវតែរត់ទៅដល់ Server ធំជានិច្ច។
• កើនឡើងការចំណាយលើ Server (Server Cost)៖ ប្រសិនបើវេបសាយរបស់អ្នកមានអ្នកចូលមើលរាប់ម៉ឺននាក់ក្នុងពេលតែមួយ ហើយគ្រប់ទំព័រទាំងអស់សុទ្ធតែប្រើ force-dynamic នោះ Server នឹងត្រូវធ្វើការធ្ងន់ធ្ងរខ្លាំង ដែលអាចបណ្តាលឲ្យគាំង ឬត្រូវចំណាយថវិកាច្រើនលើសលប់។
• មិនល្អសម្រាប់ SEO៖ ម៉ាស៊ីនស្វែងរក (Google) ចូលចិត្តវេបសាយដែលដើរលឿនបំផុត។ ការប្រើប្រាស់ dynamic ច្រើនពេកអាចធ្វើឲ្យពិន្ទុ Core Web Vitals ធ្លាក់ចុះ។

៣. ជម្រើសកណ្តាល៖ បើមិនប្រើ force-dynamic តើគួរប្រើអ្វី?

ប្រសិនបើអ្នកចង់បានទិន្នន័យថ្មីផង និងចង់បានល្បឿនលឿនផង Next.js ផ្តល់នូវជម្រើសដ៏ល្អមួយគឺ Incremental Static Regeneration (ISR)។

ជំនួសឲ្យការបង្ខំឲ្យទាញទិន្នន័យរាល់វិនាទី អ្នកអាចកំណត់រយៈពេលកំណត់មួយ (ឧទាហរណ៍៖ រាល់ ១០ នាទីម្តង) ដោយប្រើកូដ៖ export const revalidate = 600; // ១០ នាទី

វិធីនេះជួយឲ្យទំព័ររបស់អ្នកដើរលឿនដូចទំព័រ Static ធម្មតា ប៉ុន្តែវានឹងធ្វើការអាប់ដេតទិន្នន័យថ្មីស្វ័យប្រវត្តិតាមពេលវេលាដែលអ្នកបានកំណត់។

សេចក្តីសន្និដ្ឋាន

មុននឹងសម្រេចចិត្តសរសេរកូដ force-dynamic ចូលក្នុងគម្រោងរបស់អ្នក ត្រូវសួរខ្លួនឯងជាមុនសិនថា តើទិន្នន័យនៅក្នុងទំព័រនោះពិតជាត្រូវការថ្មីរាល់វិនាទីមែនឬទេ? បើមិនចាំបាច់ទេ សូមទុកឲ្យ Next.js ធ្វើការ Render បែប Static ធម្មតា ឬប្រើប្រាស់វិធីសាស្ត្រ Revalidation ដើម្បីទទួលបានល្បឿនលឿនបំផុតសម្រាប់អ្នកប្រើប្រាស់របស់អ្នក។