Question

我正在使用NextJS开发类似电子商务的网站。

我将在/products页中获取并显示产品列表。单击任何产品时，我将导航至/details/[productId]，然后按如下所述获取这些产品详细信息。

// 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
        }
    }
}

问题

在此步骤之前，一切看起来都很不错。但是我想减少数据库读取次数，因此，我打算使用上一页（detail）中获取的数据，而不是再次在/products页面中获取产品详细信息，产品。因此，我需要一种将那些产品对象传递到下一个屏幕/details/[productId]的getServerSideProps中的方法（以实现用于SEO的SSR）。

解决方法

我目前拥有的一种解决方案是stringify产品json并通过查询参数传递它，然后将其返回到getServerSideProps({params, query})中。但这只是在浏览器中向我的网址发送了垃圾邮件，看起来一点也不好。

期望

还有其他方法可以将数据传递到getServerSideProps函数中，以便它将利用该数据在服务器本身中生成整个页面。请指导我解决此问题。任何帮助，将不胜感激。

先谢谢了。（：

Answer 1

您可以引入自定义服务器作为Express，该服务器提供在应用程序或请求的生存期内可用的locals属性。

const next = require('next');
const express = require('express');

const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = routes.getRequestHandler(app);
const env = process.env.NODE_ENV || 'dev';


app.prepare().then(() => {
  const server = express();
   
  server.get('/products', async (req, reply) => {
    const products = await //... fetch product with details
    req.app.locals.products =  products;
    return app.render(req, reply, '/path/to/products/page', req.query);
  });
  
  server.get('/details/:productId', async (req, reply) => {
    const {productId} = req.params;
    const {products} = req.app.locals;
    // find product using productId and make available in req.locals
    req.locals.product = // product;
    return app.render(req, reply, '/path/to/product/detail/page', req.query)
  }); 
  
  server.get('*', (req, reply) => {
    return handle(req, reply)
  });

  server.listen(3000);
});

请注意您的产品列表会增加多少，以避免运行应用程序内存不足。

您还可以根据产品要求（See limits for HTTP cookies）返回包含产品列表的cookie。然后在产品详细信息页面上阅读该内容。

Answer 2

当我输入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 }
    }
}

将数据从NextJS的上一页传递到getServerSideProps

2 个答案: