import React from 'react'

import { useRouter } from 'next/router'

import ShopLayout from 'components/layouts/Shop'

import SingleHeader from 'components/products/single/Header'

import SingleItem from 'components/products/single'

import * as API from 'services/api'

export default function SingleProduct ({ product, comments }) {

const router = useRouter()

const { id } = router.query

return (

<ShopLayout title="جزئیات محصول">

<SingleHeader/>

<SingleItem product={product} comments={comments}/>

</ShopLayout>

)

}

export async function getStaticProps (context) {

const { id } = context.params

const product = await API.get(`/api/v1/products/${id}`)

const comments = await API.get(`/api/v1/products/${id}/comments`)

return {

props: {

product: product.data,

comments: comments.data

}

}

}

export async function getStaticPaths () {

const response = await API.get('/api/v1/products')

const paths = response.data.map(product => ({ params: { id: product.id } }))

return {

paths,

fallback: true

}

}

با سلام وقتتون بخیر

     استاد از اون جایی که با هر بار باز شدن صفحه سینگل product، تابع ()getStaticPaths یه درخاست به سمت سرور میفرسته برای گرفتن تمامی محصولات که فقط آدی را از اون‌ها استخراج که آیا بهینه‌تر نیست! که به عنوان مثال با ورود کار بر به سایت آی دی تمام محصولات را توی یک فایل یا مثلا localStorage ذخیره کنیم و توی صفحه ی سینگل در تابع ()getStaticPaths به جای ارسال درخاست تکراری به سرور از اون فایل استفاده کنیم؟