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 به جای ارسال درخاست تکراری به سرور از اون فایل استفاده کنیم؟
سلام خدمت شما. لطفا برای ارسال کد حتما از بخش اضافه کردن کد ویرایشگر استفاده کنید.
نکته ای که شما گفتید قطعا می تونه یک روش بهینه باشه اما باید حواستون به تغییرات محصولات در سمت سرور باشه و مثلا بگیم هم 1 ساعت این اطلاعات به روز رسانی بشن.