basic background

I am designing an anonymous board using Svelte 4, now I have a route routes\board\[board_url]\ which has +page.server.js and +page.svelte. In +page.server.js, I will get information like board_name and board_intro from database, like this:

// +page.server.jsexport const load = async ({ params }) => {  // code for get some info from `board` table  return {    board_name, // like 'notopic',    board_intro, // like  'Emmmmmm',    board_url, // like 'notopic'  }}

and in the +page.svelte, I use the board_url in the data of +page.server.js return, to fetch API /board/getPost/[board_url] to get those posts in this board, all seem to be well, like this:

// +page.svelte<script>import { onMount } from 'svelte';onMount(() => {  const board_url = window.location.href.split('/').at(-1);  fetch(`/board/getPosts/${board_url}`).then(r => r.json())  // other data handle})</script><!-- code for 20 posts in the board -->

problem

the problem is when I use <a> tag to go to other board, like from /board/buybuybuy to /board/notopic, It won't trigger onMount() function, cause I know the component has already mounted.

two questions

1. how to trigger once the fetch request every time after I change the route(refresh or use <a>, use store? or other way
2. cause we can fetch first 20 posts from API, and when the page scroll to the bottom, we can use IntersectionObserver to trigger another fetch to next page, if you can offer answer of question 1, please also give some advise to trigger the get for next page post

possible way

There is a solution, add data-sveltekit-reload to <a> tag cause a refresh of page, but I think it seems not so svelte like the framework name.