caching? | Next.js | Page 1

frozen crest Sep 12, 2023, 7:05 AM

#

Hi I have a server on steam. I have a website that is integratied with the in-game chat (using postgres database).

Now I have a little issue... I want to display profile pictures for each user. My current implementation is getting all the steam profile through api from all the unique steamids from the messages everytime a new message is send.

Well say I have 100 messages and 40 unique users- it'll pull 40 steam profiles (at least) on each new message.

Not sure how I would go about this... any tips?

little narwhalBOT Sep 12, 2023, 7:05 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

uneven marsh Sep 12, 2023, 7:06 AM

#

you can cache in next.js for a certain amount of period

#

you can either:

cache a full route
or
cache only the data but keep rendering dynamic

frozen crest Sep 12, 2023, 7:09 AM

#

We're running 3 servers and we should be storing like 2/3 strings (for now) for each user. Will be stored for a max of 24h as chats reset at midnight

uneven marsh Sep 12, 2023, 7:09 AM

#

how is the data accessed?

#

from where to where?

frozen crest Sep 12, 2023, 7:10 AM

#

Well so we get the steamid (which never changes) from the messages table. But we have to fetch the name + profile pic url through the api as those can change at any given time

uneven marsh Sep 12, 2023, 7:10 AM

#

what does your current implementaiton looks like?

uneven marsh Sep 12, 2023, 7:11 AM

#

frozen crest Well so we get the steamid (which never changes) from the messages table. But we...

if you want to cache it then you need to give up the idea that "name + profile pic has to be fresh coz they can change at any given time"

#

caching means that its okay to be outdated/stale for an amount of time

frozen crest Sep 12, 2023, 7:11 AM

#

I can live with it being outdated for a bit

uneven marsh Sep 12, 2023, 7:12 AM

#

you can cache your fetches.
for example: revalidate: 60 will cache fetch result up until 60 second

#

the fetch() api is already modified to allow this kind of caching.

#

unless you are using external fetching libraries, there is another way

#

look up more info here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

Data Fetching: Fetching, Caching, and Revalidating

Learn how to fetch, cache, and revalidate data in your Next.js application.

frozen crest Sep 12, 2023, 7:13 AM

#

So that would refetch all existing ids each 60s but still fetch like unique ids?

#

It can be much longer than 60s tbh

uneven marsh Sep 12, 2023, 7:14 AM

#

at 61st second, it will still show up old data but the first request that is stale will do a background revalidation that will pull up new data on the subsequent request

#

tbh the duration can be up to you

frozen crest Sep 12, 2023, 7:16 AM

#

But this would handle like a message every few seconds for like a lot of messages and users

uneven marsh Sep 12, 2023, 7:16 AM

#

yeah good then

#

i dont see a problem with that

frozen crest Sep 12, 2023, 7:16 AM

#

Is that done server sided or client sided?

uneven marsh Sep 12, 2023, 7:16 AM

#

server sided

#

the cache is unique for every URL

#

so if i fetch for user1, it wont replace cache of user2

frozen crest Sep 12, 2023, 7:17 AM

#

And what if that URL is dynamic? Or like has these ?example=true

uneven marsh Sep 12, 2023, 7:17 AM

#

for every URL

#

cache for user1 and cache for user1?example=true will be different

frozen crest Sep 12, 2023, 7:18 AM

#

Well thats an issue in that case :/

uneven marsh Sep 12, 2023, 7:18 AM

#

why would it be?

frozen crest Sep 12, 2023, 7:19 AM

#

Because it also has a leaderboard implemented on that same page in which the chat is. So like when you say filter based on most kills the url would change

uneven marsh Sep 12, 2023, 7:19 AM

#

i thought you only want to cache the name and the images

#

you need to separate the data in different URLs to control which data you want to cache

frozen crest Sep 12, 2023, 7:20 AM

#

uneven marsh i thought you only want to cache the name and the images

I do. But like the chat is like a little box on the site which you can open/close. It's like a little modal on the leaderboard page

uneven marsh Sep 12, 2023, 7:21 AM

#

frozen crest Because it also has a leaderboard implemented on that same page in which the cha...

the next.js url would change but would the url fetch to the data source change?

frozen crest Sep 12, 2023, 7:22 AM

#

I'm using a socket to fetch unique messages every few seconds

#

Just checking on that page if a new "message" event is triggered and that'll fetch like names + profile pics

uneven marsh Sep 12, 2023, 7:23 AM

#

yes

#

you cache the names + profile pics part not the socket url part

#

~~it shouldn't really need any searchparams~~

#

its a cache thats used in the server that has nothing to do with the client. Client only see the data

#

its a cache that doesn't have anything to do with how Client access the Next.js URL

frozen crest Sep 12, 2023, 7:26 AM

#

So it doesnt matter if the URL parameters change?

#

Because they definitely will

#

Im not fetching through the socket

#

Or how do I say it... whenever I get a new socket event I start fetching name + profile

uneven marsh Sep 12, 2023, 7:28 AM

#

If you are doing data fetching in the server through the same URL regardless of where it come from then it doesn't matter

in route /a you could fetch('https://.../getUserID')
in route /b you could fetch('https://.../getUserID')
in route /c you could fetch('https://.../getUserID')

the cache will be the same

frozen crest Sep 12, 2023, 7:28 AM

#

Ah okay

uneven marsh Sep 12, 2023, 7:29 AM

#

frozen crest Ah okay

so the URL where client access from doesn't matter
it has nothing to do with the cache

the Data cache only caches based on the URL of the fetch(url) function in the server

#

its a data cache, not a route cache

#

2 different thing

frozen crest Sep 12, 2023, 7:31 AM

#

so if I fetch(player1), and then 30s later I fetch(player1) again it wouldn't matter as it's cached?

uneven marsh Sep 12, 2023, 7:32 AM

#

yeah

#

it doesn't care where the fetch takes place

frozen crest Sep 12, 2023, 7:32 AM

#

Ahhh okay yeah that makes much more sense

#

Sorry im not natively english, but what you were saying made sense haha

uneven marsh Sep 12, 2023, 7:34 AM

#

No problem

#caching?