OG Image generation
Unanswered
Mickey posted this in #help-forum
MickeyOP
Hey, I would like to ask how do you usually manage image generation in nextjs on vercel. If you have separate
/api/og file where you generate it and you need to fetch some data for it do you only pass some unique identifier like api/og/ID and do all the requests inside or do you pass all the values in URL by searchparams?18 Replies
MickeyOP
Im asking because I have some issues with fetching some data inside and it looks it takes so much time that it does not load the image for the first time. I have to paste the link somewhere first and it works after some time when I paste it again
@Mickey Im asking because I have some issues with fetching some data inside and it looks it takes so much time that it does not load the image for the first time. I have to paste the link somewhere first and it works after some time when I paste it again
Northeast Congo Lion
/api is not available at build time@Northeast Congo Lion `/api` is not available at build time
MickeyOP
okay but sharing this link works after some time like it has a delay, I have to share it once and it works when I just paste it for the second time
and I am not using
/app but the old /api versionNortheast Congo Lion
You using pages router
On the documentation top left
You can change between app and pages
@Northeast Congo Lion You using pages router
MickeyOP
if I use app router are there any edge function limitations?
are there only limitations for pagees
@Mickey if I use app router are there any edge function limitations?
Northeast Congo Lion
yes
vercel is limited
you can view ur usage in vercel dashboard
usage tab
@Northeast Congo Lion yes
MickeyOP
sorry I was little busy to answer, let me maybe give some more details about the problem - so I want to share user profile to socials, I want to do that by just pasting in a link and it will render this "card" and it looks nice and have some data inside. I am using nextjs
/api component for this and Open Graph image render. The problem is that because I need to get profile data first (I cannot pass it through params to /api component) and additionally I have to fetch some external images it takes sometimes 4-5 seconds to load the image. The problem is that when I paste a profile link to twitter and wait few seconds the "card" preview does not load. I have to paste it few times to actually load the data. I've tried to put all the images to my project files and fetch it instead of making external requests but it does not work because edge functions have limit to 2mb. I was able to speed image loading to like 3-4 seconds but its still not enough for twitter to load it correctly.I have no idea how to fix this
and its a very important feature to let people just copy paste user link and get his statistics