Revalidating server function

Unanswered

American black bear posted this in #help-forum

American black bearOP

2023-06-21T11:26:40.000Z

Hi all,
My application works with Umbraco CMS, and the use case is that I want to fetch navigation data (which is configurable in the CMS) in the build time. Because I want to have prepared navigation data at the moment when the user clicks on the navigation button instead of call fetch at that moment (I wish to avoid delay).

I achieve that with the server component in the/app folder, and await that async function in getInitialProps of _app.js "page" and pass that data in the navigation context.

It works fine but I have two problems: 1. I need to build the whole application if someone changes navigation data in the CMS. 2. I have an understandable warning that I have opted out of Automatic Static Optimization because I use getInitialProps in _app.js

Can anyone help me with some idea of how I can have server component (function for fetching navigation data) but with some kind of revalidation of that function on demand, something as we do with on-demand ISR?

52 Replies

Asiatic Lion

2023-06-21T11:37:22.000Z

Check out https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating

Also why are you using both the pages and the app folder for this?

American black bearOP

2023-06-21T11:49:21.000Z

Thanks for the resource, I already using page revalidation or Incremental Static Regeneration to revalidate pages on demand.
But I wish to know how I can revalidate server function, not a page.

I using the app folder just to run the function (for fetching navigation data) on the server in the build time, becase I don't want to send request for navigation data on the server when user click on the button (instead of that I want to have stored that data)

American black bearOP

2023-06-21T15:20:18.000Z

Does anyone have any potential idea?

alfon

2023-06-21T15:21:12.000Z

I just glossed over the CMS part since i dont have experience with those.

Can anyone help me with some idea of how I can have server component (function for fetching navigation data) but with some kind of revalidation of that function on demand, something as we do with on-demand ISR?

you can try revalidatePath('/')

revalidate server function? what server function are you using?

is it a fetch or a non-fetch

American black bearOP

2023-06-21T15:22:35.000Z

I understand part with revalidatePath('/'), but I don't want to revalidate any specific page, becase that navigation setting is visible on all pages

When I said server function I mean the function in app folder which is fetch function

alfon

2023-06-21T15:23:02.000Z

its weird since server function on a SSR should be fetched per request

what about using revalidateTags and put the tags in your server fetch function

American black bearOP

2023-06-21T15:23:36.000Z

Hmm

revalidateTags, what is it?

Ohh I understand

alfon

2023-06-21T15:25:28.000Z

but revalidateTags only exist in server fetch function ðŸ™ƒ which is kinda limiting

American black bearOP

2023-06-21T15:25:32.000Z

You mean that I can set revalidateTag in my server fetch function, and when I got request for revalidation navigation data, I can refetch that function...Hmm it's sounds good

I just don't understang how I can "tag" my function

@American black bear I just don't understang how I can "tag" my function

alfon

2023-06-21T15:27:42.000Z

what is your function...................

does it use the fetch() function at server components

yes or no answer only >:(

American black bearOP

2023-06-21T15:28:22.000Z

This is my function

alfon

2023-06-21T15:28:30.000Z

oh..

its not a fetch() function

welp revalidateTags are not yet supported for non-fetch() function

American black bearOP

2023-06-21T15:29:15.000Z

You're right that's not a fetch() function, but I fetch data in that function

alfon

2023-06-21T15:29:24.000Z

ah my bad

im not sure ISR works yet on function that uses non-fetch ðŸ˜¦

best you can do is convert the function into using fetch() so that you can use this

this is talking from app dir perspective. im not sure about pages

American black bearOP

2023-06-21T15:33:37.000Z

I'm working with graphQl and Apollo Client, becase that fetch function not meeting requirement

Sorry I feel that I'm not explain well

alfon

2023-06-21T15:34:17.000Z

no its fine, my bad

hmm im sorry then, theres not a way im sure of that would invalidate a server function

best you can try is isolate the route for that single graphQL fetch

then you can specify the route segment config

American black bearOP

2023-06-21T15:36:02.000Z

Hmm if we sort things like this

We have a server function which is called once at the build time if we call that function in getIntialProps in _app.js

That data is rendered (in the header) on all pages

alfon

2023-06-21T15:37:11.000Z

also there is no _app.js in app dir? or are you using both dirs ðŸ™ƒ

American black bearOP

2023-06-21T15:37:51.000Z

Yap, in app dir I only have a one server function from the SS

alfon

2023-06-21T15:38:18.000Z

then i have in no obligation to help you as i dont have experience with pages dir ðŸ’€

American black bearOP

2023-06-21T15:38:41.000Z

Ohh maan I hope in your experience

Hahaha

Thanks for help

American black bearOP

2023-06-21T16:05:27.000Z

@alfon I did it! With wrapping graphql call in fetch function and set revalidation

And when I log function data in getInitialProps it's change

But prop in _app.js component when I log in component doesn't changes

Does anyone know how offten getInitialProps function change property value in _app.js

Turkish Angora

2023-06-22T09:14:40.000Z

I ended up pushing a query string to the url to invalidate the cache when my server action is successful

American black bearOP

2023-06-22T15:08:34.000Z

I'm not sure how pushing query string to the url can help in this use-case

Just one thing left to done this. getInitialProps got a changed value but don't send new value to _app.js component