Nextjs14 SEO query
Answered
bscdev#1145 posted this in #help-forum
When I am generating metadata using params , same function is called up to render data in the page also. Does Nextjs call server action fetchData twice ? If so does anyone know other way to manage this function fetchData.
export async function generateMetadata({params}){
const {data} = await fetchData({id: params.id })
return {
title:${data.name}-Page Title}
}Answered by Asian paper wasp
Then you can use two types of cache, depending what your expectation is
1.
2.
1.
React.cache() - it will essentially de-duplicate the request. So each page request will only call findById once, instead of twice. Yet, the result is not cached across multiple page requests or project build2.
unstable_cache from Next.js - The cache will persist across page requests and builds, similar to the caching behavior in fetch()13 Replies
Asian paper wasp
Does Nextjs call server action fetchData twice ?Yes.
If you don't want that to happen, you need to cache it. Show us the current implementation of
fetchData and we will start from thereDo I need to use cache from react. do you know any documentation where I can find some details. Thanks for your reply.
Asian paper wasp
It depends on what type of cache behavior you are expecting. Again, show us some code
Ok. Could you check below code
import {cache} from 'react';
const getData = cache(async(id)=>{
const {data} = await fetchData({id})
return data
})
generateMetadata({params}){
const id = params.id
const {data} = await getData(id)
return {
title:${data.name}-Page Title}
}
async function Page({params}){
const id = params.id
const {data} = await getData(id)
return (
<>
......
</>
)
} export default PageAsian paper wasp
This doesn't answer the question.
Show us the current implementation of fetchData and we will start from therecurrent implementation ->
generateMetadata({params}){
const {data} = await await fetchData({id:params.id})
return {
title:${data.name}-Page Title}
}
async function Page({params}){
const {data} = await await fetchData({id:params.id})
return (
<>
......
</>
)
}
export default PageAsian paper wasp
I asked, because whether you are using
Again, READ before you post. I said the implementation of
fetch() has a heavy influence on how caching should be implemented.Again, READ before you post. I said the implementation of
fetchData().No I am not using fetch I know fetch() is managed internally by nextjs. I am calling server action fetchData() in an async function. "use server"
export async function fetchData({id}){
DBconnect()
const blog = await Blog.findById({_id: id})
return {blog:formatData(blog)}
}
export async function fetchData({id}){
DBconnect()
const blog = await Blog.findById({_id: id})
return {blog:formatData(blog)}
}
Asian paper wasp
Then you can use two types of cache, depending what your expectation is
1.
2.
1.
React.cache() - it will essentially de-duplicate the request. So each page request will only call findById once, instead of twice. Yet, the result is not cached across multiple page requests or project build2.
unstable_cache from Next.js - The cache will persist across page requests and builds, similar to the caching behavior in fetch()Answer
Ok. Can I go ahead with below code
import {cache} from 'react';
const getData = cache(async(id)=>{
const {data} = await fetchData({id})
return data
})
generateMetadata({params}){
const id = params.id
const {data} = await getData(id)
return {
title:${data.name}-Page Title
}
}
async function Page({params}){
const id = params.id
const {data} = await getData(id)
return (
<>
......
</>
)
} export default Page Thanks for your help.Asian paper wasp
Yes, that's the ideal case, if your goal is a dynamic page.
Its a dynamic page.Thank you so much.
Hello @Asian paper wasp , I have a final question, does caching affect the nature of dynamic properties in Nextjs14.? I mean if I need do regualr crud operations in that dynamic page and objective of that page has to render updated data for users.Because in my application this page will play an important role in interacting with users inputs and fetch datas accordingly where I am going to implement the cahching . I mean I have like, dislike functions, comments, review operation and that page has to render all updated status and data.