我正在使用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
函数中,以便它将利用该数据在服务器本身中生成整个页面。请指导我解决此问题。任何帮助,将不胜感激。
先谢谢了。(:
答案 0 :(得分: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。然后在产品详细信息页面上阅读该内容。
答案 1 :(得分:0)
当我输入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 }
}
}