អ្វីទៅ Static Site, SPA និង SSR?

ក្នុងអត្ថបទនេះ ខ្ញុំនិយាយពីប្រភេទរបស់វែបសាយដែលមាន Static Site, SPA និង SSR។ អ្នកគួរតែយល់ពីគំនិតគោលរបស់ប្រភេទវែបសាយទាំងអស់នេះ ដើម្បីអាចរើសយកប្រភេទដែលត្រឹមត្រូវទៅតាមតម្រូវការរបស់វែបសាយដែលអ្នកនឹងធ្វើ។

ជាដំបូងយើងត្រូវយល់ថារាល់វែបសាយទាំងអស់ត្រូវដំណើរការនៅលើ Browser។ នៅពេលយើងចូលទៅកាន់វែបសាយណាមួយ Browser ផ្ញើរសំណើរទៅកាន់ Server ហើយ Server បញ្ជូនត្រលប់មកវិញជា Response មួយ។ ហើយបើ Response នោះជាកូដ HTML នោះ Browser នឹងយកបង្ហាញជាវែបសាយ។

តែថាកូដ HTML ដែល Server បញ្ជូនត្រលប់មកនោះ វាត្រូវបានបង្កើតឡើងដោយរបៀបណា?

អ្វីទៅ Static Site?

ដំបូងគេនោះគឺជាប្រភេទ Static​ Site។ រាល់កូដទាំងអស់ត្រូវបានបង្កើតហើយជាស្រេចមុននឹងគេយកវាទៅដាក់នៅលើ Server ឫក៏យើងអាច Generate​ វានៅលើ Server ក៏បាន (Generate តែម្ដងទេ)។ Server គ្រាន់តែបញ្ចូនកូដ HTML ដែលបង្កើតមកស្រាប់នេះត្រលប់ទៅកាន់រាល់ Request តែប៉ុណ្ណោះ។ ជាទូទៅគេមិន Generate Static Site ដោយដៃទេ គេប្រើ Static Site Generator។

វែបសាយ Daseveny ដែលអ្នកកំពុងតែអាននេះជា Static Site មួយ។ វាត្រូវបានបង្កើតឡើងដោយប្រើ Gatsby.js ដែលវាជា Static Site Generator មួយដែលយើងអាចសរសេរវាដោយប្រើ React.js ហើយរាល់ពេលត្រូវកែ Bug ឫបន្ថែមអ្វីថ្មី ខ្ញុំត្រូវយកកំណែប្រែទាំងនោះទៅលើ Server ហើយ Generate ជា Static Site។ បន្ទាប់មកអ្នកទាំងអស់គ្នាអាចបើកអានបានហើយ។

ហើយបើមើលមកហ្វ្រេមរើរ៍កសម្រាប់ Front-End ធំៗទាំងអស់សុទ្ធមាន Static Site Generator ហើយ៖

• Angular មាន Angular Universal និង Scully
• React មាន Next.js (វាអាច Generate Static Site បានហើយ) និង Gatsby
• Vue មាន Nuxt.js, Vuepress និង Gridsome
• Svelte មាន Sapper.js ជាដើម

ហើយអ្នកគួរតែសាកមើល Hugo ដែលសរសេរដោយ Go ដែរ។ គេថាវាជា Static Site Generator លឿនជាងគេបង្អស់។ មែនទែនទៅមាន Static Site Generator មានច្រើនណាស់ខ្ញុំរាប់មិនអស់ទេ។ នៅទីនេះ https://www.staticgen.com។

អ្វីទៅ SPA?

SPA មកពីពាក្យថា Single Page Application។ សម្រាប់វែបសាយប្រភេទនេះ គឺ Server បញ្ជូនត្រលប់វិញ HTML ជាមួយកូដចាវ៉ាស្ក្រីបត៍ដែលវានឹងផ្លាស់ប្តូរ Page និង Re-render Page (DOM) នៅលើ Browser របស់អ្នកប្រើប្រាស់វែបសាយ។ រាល់ការគណនា ការគូសរូបរាងរបស់វែបសាយរបស់កូដសុទ្ធតែកើតឡើងនៅខាង Client-Side ហើយអាប់ដេតតែផ្នែកណាដែលត្រូវអាប់ដេតទេជាជាងឡូដ Page ទាំងមូល។ ដោយហេតុដូចនេះហើយ រាល់សកម្មភាពរបស់អ្នកប្រើប្រាស់ទាំងអស់សឹងតែមិនចាំបាច់ផ្ញើរ Request ទៅ Server លើកលែងតែពេលគេត្រូវការទិន្នន័យ ឫក៏ត្រូវការរក្សាទុកទិន្នន័យ។ បើគិតទៅគឺវែបសាយនឹងមានតែមួយ Page ទេដូចកម្មវិធីអ៊ីចឹងដែរ។

ជាទូទៅពេលដែលយើងសរសេរវែបសាយយើងជា​ SPA យើងនឹងអាចបានវែបសាយដែលសម្បូរបែប។ មានន័យថាវែបសាយរបស់យើងអាចរត់បានលឿន និងរលូន។ តែយ៉ាងណាវាក៏មិនល្អគ្រប់ដប់ដែរ។ បញ្ហាត្រង់ថា៖

0. ពេលឡូដ Page ដំបូងវាត្រូវការពេលដើម្បីឲ្យកូដដើរ និងបង្ហាញជារូបរាង (First Meaningful Paint Issue)។​ វាត្រូវស៊ីពេលដំបូងយូរជាង Static Site ឫ SSR ដែលវាមកពី Server ស្រាប់។
1. ដោយសារវាត្រូវការពេលអ៊ីចឹងហើយ ទើបវាមិនសូវល្អសម្រាប់ SEO។ SEO មកពីពាក្យថា Search Engine Optimization។ និយាយខ្លីៗឆាប់យល់គឺថា Search Engine ដូចជា Google ពិបាកនឹងចុះ Index ដោយជាទូទៅបើវែបសាយឡូដយឺតជាង 2-3 វិនាទីនោះ Web Crawler នឹងរំលងចោលដោយមិននៅចាំទេ។

ហ្វ្រេមវើរ៍កសម្រាប់ធ្វើ SPA អាចជាបងធំទាំង 3 មាន Angular, React, Vue ឫក៏កូនពៅ Svelte។

អ្វីទៅ SSR?

SSR មកពីពាក្យថា Server Side Rendering។ ដោយសារបញ្ហាដែលជួបដោយ SPA នឹងហើយដែលគេដោះស្រាយដោយ Render ផ្នែកខ្លះ (ឫក៏ទាំងអស់) នៅលើ Server។ ផ្នែកណាដែលសំខាន់សម្រាប់ SEO គេក៏ Render វាឲ្យហើយនៅលើ Server ដែលវាជួយឲ្យ Web Crawler អាចចុះ Index ទិន្នន័យវែបសាយរបស់យើងបាន។​ ហើយធ្វើបែបនឹង វាក៏ជួយឲ្យ Page ឡូដលឿនជាងមុនដែរ។

សម្រាប់ខ្ញុំ ហ្រេមវើរ៍កដែលគួរឲ្យកត់សម្គាល់សម្រាប់ SSR មាន Angular Universal, Next.js, Nuxt.js។

អ៊ីចឹងប្រើមួយណា? នៅពេលណា?

រូបខាងក្រោមនេះ ជារបៀបដែលអាចជួយយើងកាត់សេចក្ដីថាគួរតែសរសេរវែបសាយយើងជា Static Site, SPA ឫក៏ SSR បាន៖

ត្រង់កន្លែងថាតើ Data ក្នុងវែបសាយយើងផ្លាស់ប្ដូរញឹកញាប់ឫអត់នឹង ខ្ញុំចង់បានន័យថាទិន្នន័យយើងជាទិន្នន័យ Static ឬក៏ Dynamic។ ឧទាហរណ៍៖ អត្ថបទនេះជាទិន្នន័យបែប Static។ ខ្ញុំសរសេរម្ដងហើយ ខ្ញុំមិនងងាយនឹងកែទៀតទេ។ អ្នកប្រើ​រើស​ឥវ៉ាន់​ទិញ​ឥវ៉ាន់​លើ​វែប​សាយយើងជាទិន្នន័យបែប Dynamic គឺវាអាស្រ័យទៅលើអតិថិជនម្នាក់ៗ ហើយវាតែងតែខុសគ្នា។

សរុបសេចក្ដី

វែបសាយទាំងអស់មិនដូចគ្នាទេ ហើយក៏តែងតែមានគោលដៅប្រើប្រាស់ផ្សេងៗគ្នាដែរ។ អ៊ីចឹងហើយ​ដើម្បីអាចសរសេរវែបសាយដែលល្អ យើងត្រូវរើសយកប្រភេទ និងហ្រេមវើរ៍កដែលសមស្របនឹងវែបសាយដែលយើងសរសេរ។