Don't let opengraph image embeds go stale

[tarehart]

This is another attempt of this prior pull request: #2731

Folks are reporting that the og image embeds show stale data.

That's expected because the image is rendered entirely based on data provided in the URL params. I'm changing it to try loading fresh data from the database, and to cache with an appropriate TTL.

When looking at an opengraph image preview like this one, we can inspect the response headers and see that cache-control is public, immutable, no-transform, max-age=31536000. That's one year expressed in seconds. This appears to be a default set by the Vercel og library, per https://vercel.com/docs/functions/og-image-generation/og-image-api:

By default, the following headers will be included by @vercel/og:

'content-type': 'image/png',
'cache-control': 'public, immutable, no-transform, max-age=31536000',

Updating the max-age to 30 seconds to get freshness while still limiting load on the API server.

Testing

This is not tested yet because I don't have dev credentials; I'm hoping the vercel PR environment will help me do a little testing.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev	❌ Failed (Inspect)			Sep 25, 2024 5:40pm
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 25, 2024 5:40pm
prod	❌ Failed (Inspect)			Sep 25, 2024 5:40pm

[vercel]

@tarehart is attempting to deploy a commit to the Manifold Markets Team on Vercel.

A member of the Team first needs to authorize it.

[tarehart]

I see the deployment to dev failed, I don't know why and I don't have access to the logs. Running yarn build from backend/api/ succeeds locally.

[IanPhilips]

Nice, thanks for taking a crack at this! I believe the vercel og edge environment is pretty weird and can't import some normal libraries, see here:
https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

[tarehart]

Thanks for providing the error message and explaining!

My new commit is inspired by https://gist.github.com/Thinkscape/ca9a7e47e3b44a5cc92d8e552f455eb6, we'll see if it works...

I first experimented with refactoring so that lodash didn't get pulled in to /api/og/market.tsx transitively, but I found that the Contract type is defined in a file that uses lodash, and I felt that:

• It would quickly turn into a game of whack-a-mole
• There would be a maintainability issue where lodash could be accidentally pulled in again by innocent changes.

I prefer the idea of patching lodash so it can be used wherever.

References:

• https://www.npmjs.com/package/patch-package
• Lodash fails to run in edge environments (Vercel edge, CloudFlare workers) lodash/lodash#5862

[IanPhilips]

It think it would be simpler to just use the public api to fetch the contract rather than use the internal api. That way we don't have to patch lodash, either.

[tarehart]

I wasn't aware of the public API, thanks for the pointer.

[IanPhilips]

Hmm, so when are we're supposed to run this?

[tarehart]

It runs automatically as part of the installation lifecycle, apparently: https://yarnpkg.com/advanced/lifecycle-scripts#postinstall

But moot point if we're going with the public API.

[tarehart]

Updated to use the public API.

I see that dev deployment failed, my understanding is the deployments are flaky sometimes per discussion on #2776, so I don't know if there's a problem or not.

This is NOT properly tested; I had been planning to test on Vercel's dev deployment.

[sipec]

the temporality of og images is unavoidable, since most social media sites will cache the images themselves on the first fetch. I think some of them even cache the site url -> image, so anyone else sharing the link gets the same preview image.

a live display is just not what the og image is for. this is why we have embeds