I love and hate Svelte

[Ohyenno]

We're used to the new file standards and spending a lot of time figuring out where the problem is: in +page.ts or +page.ts. Oh, may be in +page.ts?

ok ate it

The largest and biggest trouble of the Svelte Kit project - is incorrect rendering work. Unfortunately, I can’t use the framework after the last global changes at all. Damn.

Look the case:

I have such structure
/about/page1
/about/page2
...

I have page /[url]/+page.svelte

load url
...
const url: string = params.url;
...

and then call api
... await fetch(api/${url}, ...

Switching between pages, the content does not change. Why??? I tried update caches, send dynamic params. Nothing. Only one thing was helpfull is render = false.

It was damn solution, but it was solution.
There is no more render parameter and nothing works now.

How to reload data? i want to have ability set param - reload api data or not
if i ll set params to reload - it should always reload.

I do not want manually add a million times data-sveltekit-reload. It's awfull
And i do not want reload all data, menu and so on. I need reload just exactly content. Set one param

await fetch(api/${url}, headers, {reload:true}`)

Please, solve this problem. I can't upgrade version higher than 449

[BillyCallahan]

For that kind of matter, open an issue.
I don’t see any question or proposal here.

[eltigerchino]

Only one thing was helpful is render = false.

Do you mean prerender?

How to reload data? i want to have ability set param - reload api data or not
if i ll set params to reload - it should always reload.

Can you share a more detailed example of how your data is being fetched?
If it's being fetched in a load function in +page or +page.server, it should be returning different data based on your /[url] parameter.
Otherwise, if you're fetching in +page.svelte, make sure the data retrieval logic is reactive so that it fetches new data when the url changes.

I do not want manually add a million times data-sveltekit-reload. It's awful

You can add it once to a parent element and it will apply to all child elements that are anchor tags.

[Ohyenno]

Do you mean prerender?

Sorry I meant route = false

In my current project I use
browser: { router: false }

You can add it once to a parent element and it will apply to all child elements that are anchor tags.

I know this and have written about it, but it's not an elegant solution

The idea was to reload data only when I need, using fetch.
If the data on the server has not changed using the prefetch, I should get 304 and not reload the component.
If I call a url that has not loaded before, or it has a parameter to reload, it should be reload.

Now the problem is that the user fetch data from the same component. Of course, data-sveltekit-reload is a solution similar to the previous rel="external", but I cant controll all situations when the link changes the component or not. If i set data-sveltekit-reload - it will reload data constantly, but i need it be realoded only when the data in the same component changes.

[eltigerchino]

The idea was to reload data only when I need, using fetch. If the data on the server has not changed using the prefetch, I should get 304 and not reload the component. If I call a url that has not loaded before, or it has a parameter to reload, it should be reload.

Can you reproduce how you are fetching your data and in which file?
It sounds like the issue lies in how fetch is being called.

If it's being fetched in a load function in +page or +page.server, it should be returning different data based on your /[url] parameter.
Otherwise, if you're fetching in +page.svelte, make sure the data retrieval logic is reactive so that it fetches new data when the url changes.

[Ohyenno]

You are great! It really was a bug from the very beginning. I so happy! I Love Svelte! =))

I tried to recreate the basic situation for you and everything was fine. The content has been updated. It was strange and interesting.
After a lot of tests in the main code, I found the problem!

I have a dynamic component that updates default data with some important calculations (wraps them).
I didn't use onMount, because it needs to update in ssr

This is not reloading code
It was only reloaded with router = false

`
export let data: any = undefined;
data.forEach((element: any) => {
...
})

const data_render = data;

....

{#each data_render as content}
...
{/each}
`

This is updated code
Now it reloads by default (router = true)
`
export let data: any = undefined;

data.forEach((element: any) => {
...
})

let data_render: any = undefined
$:{ data_render = data; }
...

{#each data_render as content}
...
{/each}
`

I'm not sure if this is a good solution, but it works.
If I use default data object in #each — it also works.

Anyway, I see that the content is changing. And now I can use the latest version.
Thank you very much!

[eltigerchino]

Happy to help! The problem was indeed the logic not executing reactively to data.

I'd recommend the below as another solution:

<script lang="ts">
export let data: any = undefined;

// this mutates the data passed in, which could accidentally affect other code relying on `data`.
- data.forEach((element: any) => { ... });

// the $: syntax can also be used to declare a variable without needing `let` on a separate line.
- let data_render: any = undefined;
- $: { data_render = data; }
+ $: data_render = data?.map((element: any) => { ... });
// .map() will return a new array with your changes so it doesn't mutate the original `data`.
</script>

{#each data_render as content}
{/each}

[Ohyenno]

Thank you!