web-dev-qa-db-fra.com

Passez les données à GetserversideProps de la page précédente dans NextJS

Je développe un commerce électronique comme un site Web à l'aide de NextJS.

Je vais chercher et afficher la liste des produits dans /products Page. En cliquant sur tout produit, je vais naviguer vers /details/[productId], Et je vais chercher ces détails du produit comme suit.

// In /details/[productId].js file

export async function getServerSideProps({params}) {
    const res = await fetch(`https:my-api-url/api/products/${params.productId}`)
    const product = await res.json()
    return {
        props: {
            product
        }
    }
}

problème

Tout va bien jusqu'à cette étape. Mais j'ai pensé à réduire le nombre de comptes de données de base de données, donc au lieu d'aller chercher des détails sur le produit à nouveau dans detail Page, j'ai envisagé d'utiliser les données extraites dans la page précédente (/products) Qui aura la informations sur le produit. Par conséquent, j'ai besoin d'un moyen de transmettre ces objets de produit dans l'écran suivant /details/[productId] 'S getserSideProps (pour atteindre la SSR à des fins de référencement).

Solution de contournement

Une solution que j'ai actuellement est à stringify le produit JSON et transmettez-le via le paramètre de requête et le récupérer dans getServerSideProps({params, query}). Mais cela signe simplement mon URL dans le navigateur qui n'est pas beau du tout.

attente

Y a-t-il un autre moyen de transmettre les données dans getServerSideProps fonction de sorte qu'elle utilise les données pour générer la page entière du serveur lui-même. Veuillez me guider pour surmonter cette question. Toute aide serait appréciée.

Merci d'avance.. (:

next.jsserver-side-rendering
10
Ganesh

Quand j'entre l'URL http: // localhost: 3000/blog/wfe436

//getting the meta tags dynamically

export const getServerSideProps = async ({ params }) => {
    // Get external data from the file system, API, DB, etc.
    console.log(params) // here is the data of the url { blogname: 'wfe436' }
    const posts = Data
    // The value of the `props` key will be
    //  passed to the `Home` component
    return {
        props: { posts }
    }
}
0
Akash Golui