កន្លង​មក​យើង​បាន​ធ្វើ​ផ្លូវ​ចូល​ទៅ​កាន់​ឯកសារ Astro ​​​​និងឯកសារ MD ដែល​បណ្តាល​អោយ​កូដ​នៅ​ក្នុង​ឯកសារ​ទាំងនោះ​ដំណើរការ​និង​ផ្តល់លទ្ធផល​នៅ​លើ browser ។ លើស​ពី​នេះ​ទៀត យើង​ក៏​អាច​ធ្វើ​ផ្លូវ​ចូល​ទៅ​កាន់​ឯកសារ JavaScript (.js) ឬ TypeScript (.ts) បាន​ដែរ ហើយ​កូដ​នៅ​ក្នុងនោះ​ក៏​នឹង​ត្រូវ​ដំណើរការ​និងផ្តល់​លទ្ធផល​ជា​អ្វី​ផ្សេង​ៗ​ដែល​យើង​ត្រូវ​ការ​។

// src/pages/api/info.js

export async function GET({params, request}) {
    return new Response(
      JSON.stringify({
        info: 'ព័ត៌មានពីក្បួន​ចុង​ផ្លូវ'
      })
    )
  }

ដោយ​ឯកសារ​ info.js ​ត្រូវ​បាន​បង្កើត​ឡើង​នៅ​ក្នុង​ថត src/pages/api/info.js ដូចនេះ​ផ្លូវ​ចូល​ទៅ​កាន់​ឯកសារនេះ​គឺ /api/info ។ បើ​យើង​សរសេរ​នៅ​លើ browser ថា http://localhost:4321/api/info យើង​នឹង​ឃើញលទ្ធផល​ដែល​ក្បួន​ឈ្មោះ GET បញ្ជូន​មក​ជា​​វត្ថុ​មាន​ប្រភេទ​ជា JSON និង​មាន​រូបរាង​ជា {"info": “ព័ត៌មាន​ពី​ក្បួន​ចុង​ផ្លូវ”} នៅ​លើ browser ។ ក្បួន​នេះ​ត្រូវ​ហៅ​ជា​ភាសា​អង់គ្លេស​ថា​ endpoint ដែល​យើង​អាច​បក​ប្រែ​មក​ជា​ភាសា​ខ្មែរ​ថា ក្បួន​ចុង​ផ្លូវ ព្រោះ​វា​ត្រូវ​ភ្ជាប់​ទៅ​នឹង​ផ្លូវ​ណា​មួយ​។ 

ជាទូទៅ ដើម្បី​អាច​ទទួល​លទ្ធផល​ពី​ក្បួន​ចុង​ផ្លូវ​យកទៅ​ប្រើការ​នៅ​កន្លែង​ផ្សេង​ទៀត​ គេ​និយម​ប្រើក្បួនមាន​ស្រាប់ឈ្មោះ fetch( ) ជាមួយ​នឹង​ផ្លូវ​ចូល​ទៅ​កាន់​ក្បួន​ចុង​ផ្លូវ​នោះ។

// src/pages/api/info.js

export async function GET({params, request}) {
    return new Response(
        JSON.stringify({
            info: 'ព័ត៌មានពីក្បួន​ចុង​ផ្លូវ'
        })
    )
}

<!--src/pages/index.astro-->
---
const response = await fetch("http://localhost:4321/api/info")
const data = await response.json()
---

<p>ទិន្នន័យ​ដែល​ក្បួន​ចុង​ផ្លូវ​បញ្ជូន​មក​គឺ៖ {data.info} </p>

នៅ​ពេល​យក​ទៅ​ប្រើ ក្បួន​ចុង​ផ្លូវ​នឹង​ទទួល​បាន​ជា​ស្វ័យប្រវត្តិ​នូវ​សំណុំ​ទិន្នន័យ​​មួយ​ហៅ​ថា context ដែល​នៅ​ក្នុង​នោះ​មាន​សំណុំ​ទិន្នន័យ params និង​សំណុំ​ទិន្នន័យ request ។

ដូច​គ្នា​នឹង​ផ្លូវ​ចូល​ទៅ​កាន់​ឯកសារ​ផ្សេង​ៗ​ទៀត​ដែ យើងអាច​បង្កើត​ផ្លូវ​ឌីណាមិក​សំរាប់​ក្បួន​ចុង​ផ្លូវ ដោយប្រើ​សញ្ញា [ ] នៅ​អម​សងខាង​ឈ្មោះ​នៃ​ឯកសារដែល​មាន​ក្បួន​ចុង​ផ្លូវ​នៅ​ក្នុង​នោះ​។

<!--src/pages/index.astro-->
---
const response = await fetch("http://localhost:4321/api/3")
const data = await response.json()
---

<p>ឈ្មោះ​អ្នក​ប្រើប្រាស់​​គឺ៖ {data.username} </p>

// src/pages/api/[info].js

const usernames = ["សុធារឹទ្ធ", "ផល្លា", "ម៉េង", "ចំរើន"]

export async function GET({params, request}){
    const id = params.info
    return new Response(
        JSON.stringify({
            username: usernames[id]
        })
    )
}

នៅ​ពេល​យក​ក្បួន​ចុង​ផ្លូវ​មក​ប្រើ​សំរាប់​ផ្លូវឌីណាមិកណាមួយ​ ប៉ារ៉ាម៉ែត​នៃ​ផ្លូវ​ឌីណាមិក​នឹង​ត្រូវផ្តល់​​​អោយ​ទៅ​សំណុំ​ទិន្នន័យ params ដែល​នឹង​ត្រូវ​បញ្ជូន​​ជា​បន្តទៀត​ទៅ​កាន់​ក្បួន​ចុង​ផ្លូវ​។ ប៉ារ៉ាម៉ែត​នោះ​អាច​ត្រូវ​ស្រង់​យក​មក​ប្រើប្រាស់​នៅ​ក្នុង​ក្បួនចុង​ផ្លូវទៅតាម​សេចក្តី​​ត្រូវការ​របស់​យើង​។

បើ​សិន​ជា​យើង​ប្រើ​របៀប SSG សំរាប់​កម្មវិធី​គេហទំព័រ​របស់​យើង យើង​ចាំបាច់​ត្រូវ​បង្កើត​គ្រប់​ផ្លូវ​ទាំងអស់​សំរាប់​ផ្លូវ​ឌីណាមិក​ណាមួយ ដោយ​ប្រើប្រាស់​ក្បួន getStaticPaths( ) ។

<!--src/pages/index.astro-->
---
const response = await fetch("http://localhost:4321/api/3")
const data = await response.json()
---

<p>ឈ្មោះ​អ្នក​ប្រើប្រាស់​​គឺ៖ {data.username} </p>

// src/pages/api/[info].js

const usernames = ["សុធារឹទ្ធ", "ផល្លា", "ម៉េង", "ចំរើន"]

export async function GET({params, request}){
    const id = params.info
    return new Response(
        JSON.stringify({
            username: usernames[id]
        }),
        {
            status: 200,
            headers: {
                "Content-Type": "application/json"
            }
        }
    )
}

export function getStaticPaths() {
    return [
      { params: { info: "0"} },
      { params: { info: "1"} },
      { params: { info: "2"} },
      { params: { info: "3"} }
    ]
}