Is it possible to prevent a dynamically | Next.js | Page 1

unkempt mulch Jul 25, 2023, 11:30 AM

#

Maybe my composition is wrong. Because the reason for changing the url is to pass SearchParams to the ArticleContainer to render articles depending on the active tags in the DataSearch component.

crimson sundial Jul 25, 2023, 11:32 AM

#

so u want to stop the server side data fetching when u open a specific route ?

unkempt mulch Jul 25, 2023, 11:32 AM

#

Essentially I want it to run only once, at the first render.

crimson sundial Jul 25, 2023, 11:32 AM

#

im bad at english so bare with me

coral grove Jul 25, 2023, 11:32 AM

#

unkempt mulch Essentially I want it to run only once, at the first render.

At first render? like hard refresh?

#

so skip data fetching on soft and hard navigation?

unkempt mulch Jul 25, 2023, 11:33 AM

#

Only solution I've been able to come up with is to set a cookie that checks wheter to run the data-fetching methods.

#

Exactly, @coral grove

coral grove Jul 25, 2023, 11:33 AM

#

you can check the header to differentiate those kind of navigation

unkempt mulch Jul 25, 2023, 11:33 AM

#

Oh, really

#

That would be perfect

crimson sundial Jul 25, 2023, 11:34 AM

#

i can imagine a weird implementation tho. like use redis as cache and if there is cache stop the data fetch ig (or i didnt understand the question)

unkempt mulch Jul 25, 2023, 11:34 AM

#

I still think my composition is poor, somehow. Managing global state with url search params isn't exactly great

#

I just feel like the ArticleContainer should be server side rendered

coral grove Jul 25, 2023, 11:35 AM

#

#

This is the code to differentiate those navigation

#

now I do not know if this would solve your issue as a bigger picture

#

my guts says that you don't need this if you set it up properly

unkempt mulch Jul 25, 2023, 11:41 AM

#

Yeah, I have the same gut feeling.

#

How would you solve it though?

I have a client side search component that sets state from the chosen tags:

#

So on every tag change my url changes (doesn't have to)

#

Then I need to render the server component with the articles based on the chosen tags

coral grove Jul 25, 2023, 11:42 AM

#

unkempt mulch How would you solve it though? I have a client side search component that sets ...

Id put my route processing in a layout and leave the page empty :))

unkempt mulch Jul 25, 2023, 11:42 AM

#

coral grove Jul 25, 2023, 11:43 AM

#

idk i havent experimented with it

#

also whats that neat label showing server/client comp?

unkempt mulch Jul 25, 2023, 11:43 AM

#

Okay, I though about that, but the layout doesn't have access to search params

coral grove Jul 25, 2023, 11:43 AM

#

they do on client

unkempt mulch Jul 25, 2023, 11:43 AM

#

I want the search to be sharable

#

Aah

#

So a client side layout

coral grove Jul 25, 2023, 11:43 AM

#

and if you process it in client, I THINK (experiment needed) SSR would be minimal

#

not client-side layout

#

client-side component inside a layout.tsx

#

did you made the server/client component label thingy btw

unkempt mulch Jul 25, 2023, 11:46 AM

#

No, that's copy pasted from the code for this: https://app-router.vercel.app/

#

https://github.com/vercel/app-playground/blob/main/ui/boundary.tsx

#

This one

coral grove Jul 25, 2023, 11:47 AM

#

unkempt mulch No, that's copy pasted from the code for this: https://app-router.vercel.app/

what about this?

unkempt mulch Jul 25, 2023, 11:47 AM

#

So let me see if I understand you correctly.

Server side Layout, client side DataSearch within Layout. But then would the ArticleContainer be server side or client side?

coral grove Jul 25, 2023, 11:48 AM

#

also client

unkempt mulch Jul 25, 2023, 11:48 AM

#

That's just data I use for debugging my search:

coral grove Jul 25, 2023, 11:48 AM

#

oooo

#

neat stuff

unkempt mulch Jul 25, 2023, 11:48 AM

#

🙂

#

Thanks

coral grove Jul 25, 2023, 11:48 AM

#

also client, coz you lose the privilege to ~~Serverside ~~ static render if you don't know what the searchParam is gonna be...

unkempt mulch Jul 25, 2023, 11:49 AM

#

Okay, I kinda wanted to preserve that privelege :\

coral grove Jul 25, 2023, 11:49 AM

#

unkempt mulch Okay, I kinda wanted to preserve that privelege :\

then dynamic render page on route change is inevitable 👍

unkempt mulch Jul 25, 2023, 11:49 AM

#

I don't need it to be statically rendered. Dynamic is fine, but I would like for it to render on server

#

Rather than in the client

coral grove Jul 25, 2023, 11:50 AM

#

unkempt mulch I don't need it to be statically rendered. Dynamic is fine, but I would like for...

so whats this all about?

Is it possible to prevent a dynamically rendered page from running it's data fetching methods on route change?

unkempt mulch Jul 25, 2023, 11:50 AM

#

Well, I want the searchParams to change, which they do, but I do want to prevent re-running the data-fetching methods.

#

They are there only for the first page load, really. So that when someone pastes a url with search params, those things are fetched. But when you do navigation afterwards, such as by choosing a new tag in the search, then I want the data-fetching to be prevented.

#

Because, as I said, it's just initial data

#

It's a bit hard to explain, probably because it's a stupid concept

#

And I'm doing it wrong

coral grove Jul 25, 2023, 11:52 AM

#

ohhhhh so all the unfiltered data is already on the page.tsx?
and the searchquery on filters the unfiltered data?

#

so the filter is done client-side not server-side?

unkempt mulch Jul 25, 2023, 11:52 AM

#

Yes

#

Essentially I want to send client side state to the server, which I know is not usually possible

#

Except maybe through url params

coral grove Jul 25, 2023, 11:53 AM

#

I dont think thats what you want. You just want to filter the given data from the server in the client

#

i.e the filtered data is the subset of the whole fetched data. not like a paginated result

unkempt mulch Jul 25, 2023, 11:54 AM

#

Hmm, not exactly.

I have two indexes on Meilisearch, one is called "Data" and one is called "Articles".

In DataSearch I choose items from "Data", those items are then used to find items from "Articles"

#

So there are two searches happening, basically

coral grove Jul 25, 2023, 11:55 AM

#

unkempt mulch They are there only for the first page load, really. So that when someone pastes...

How do you display the data if data-fetching is prevented upon choosing a new tag?

#

client-side fetching? client-side filtering?

unkempt mulch Jul 25, 2023, 11:55 AM

#

On page load an empty "Data" search is prefetched and all "Articles" are prefetched too

#

When I choose a new tag two things happen:

Through Jotai an atom with activeTags is updated.
The URL is updated with for example team=rosenborg

coral grove Jul 25, 2023, 11:57 AM

#

right so its a client-side filtering from the prefetched data

unkempt mulch Jul 25, 2023, 11:57 AM

#

Would it help if I streamed to you?

coral grove Jul 25, 2023, 11:57 AM

#

im uncomfortable with that :D

unkempt mulch Jul 25, 2023, 11:58 AM

#

The interaction is done client-side, and I have an atom that uses tanstack-query to fetch from my api route api/searchData

coral grove Jul 25, 2023, 11:58 AM

#

right

#

well

coral grove Jul 25, 2023, 11:58 AM

#

coral grove

yeah you could use this then

unkempt mulch Jul 25, 2023, 11:58 AM

#

coral grove Jul 25, 2023, 11:58 AM

#

HAHA

unkempt mulch Jul 25, 2023, 11:59 AM

#

Yeah, I'll try

#

What? 😄

coral grove Jul 25, 2023, 12:00 PM

#

wrap the function to prefetch data with const data = onPageReload()

#

#

so that it is only prefetched at hard refresh

unkempt mulch Jul 25, 2023, 12:01 PM

#

Great! Where is this code from?

coral grove Jul 25, 2023, 12:01 PM

#

homebrew

unkempt mulch Jul 25, 2023, 12:01 PM

#

what's that?

coral grove Jul 25, 2023, 12:01 PM

#

coral grove

this is the implementation

coral grove Jul 25, 2023, 12:01 PM

#

coral grove homebrew

I made it myself

unkempt mulch Jul 25, 2023, 12:01 PM

#

Ah, cool

coral grove Jul 25, 2023, 12:01 PM

#

its inspired by cache() from react

unkempt mulch Jul 25, 2023, 12:05 PM

#

I guess the notFound stuff is unecessary for me

coral grove Jul 25, 2023, 12:07 PM

#

unkempt mulch I guess the notFound stuff is unecessary for me

Ofc, im just sharing how i did it, nodify it to best suits ur needs xD

#

Just know that on soft/navigation the header ssc-fetch-dest is not equal to document

unkempt mulch Jul 25, 2023, 12:08 PM

#

Dude, it works flawlessly

#

What does that mean actually?

coral grove Jul 25, 2023, 12:09 PM

#

Which.. part...?

unkempt mulch Jul 25, 2023, 12:09 PM

#

headers().get("sec-fetch-dest") === "document";

#

What is this actually doing?

#

I should look into nextjs headers more.
Sec-Fetch-Dest

#

indicates the request's destination. That is the initiator of the original fetch request, which is where (and how) the fetched data will be used.

#

Hmm

coral grove Jul 25, 2023, 12:11 PM

#

Each route change sends a request to the server

Each request sends to the serve rhas headers attached to it

headers() is a server funtion to get headers of request

So i checked how navigation and hard refresh can differentited on the headers

Idk what sec-fetch-dest is

Soft/hard navigation doesnt send the sec-fetch-dest : "document" upon investigation

coral grove Jul 25, 2023, 12:12 PM

#

unkempt mulch indicates the request's destination. That is the initiator of the original fetch...

I mean i could look it up on MDN web docs but idk how Next.js uses them for soft/hard navigation xD

unkempt mulch Jul 25, 2023, 12:12 PM

#

Yeah. So it's kind of a hack 😄

#

But it works, for now

coral grove Jul 25, 2023, 12:12 PM

#

It really is xD

unkempt mulch Jul 25, 2023, 12:13 PM

#

There really should be more info here:
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#soft-navigation

#

But there isn't

#

Anyway, you just saved me a lot of work, so thanks a lot

#Is it possible to prevent a dynamically