Are page load functions rerun when the user navigates to a different page? How to implement caching for a page the user can navigate away from while its data remains valid?

[benjamindedonder]

Hello,

I think I'm having the same issue as #9155, which remains unanswered, but I'm starting a new discussion here because I wish to further explain my situation, provide some context and my thought process for people to give feedback on, and also ask a new follow-up question.

Whenever I navigate from /profile-1 or /[handle] to /profile-1/post-1 or /[handle]/[slug] and back, the page load functions are being rerun and the shared layout load function is not. This is to be expected when navigating to the post page, but not when navigating back to the profile page since this data is still valid.

Could this be because of the page change? It's the only thing that makes sense to me, because none of the situations described in the documentation are present in my situation.

Both page load functions depend on the data from the layout load function and use await parent() to receive that data. The layout load function will fetch the profile info, the page load function for /[handle] will fetch that profile's posts and the page load function for /[handle]/[slug] will fetch the single requested post.

So the page load function for /[handle] doesn't depend on anything but the parent's data. It's as simple a function as this:

// src/routes/[handle]/+page.ts

export const load: PageLoad = async ({ parent }) => {
  const { profile } = await parent()

  const posts = await fetchPosts(profile)

  return { posts }
}

Here's what the documentation says about when load functions are rerun regarding to parent dependencies:

• It calls await parent() and a parent load function reran
• A child load function calls await parent() and is rerunning, and the parent is a server load function

The layout load function is not rerunning, so that's not the cause. The latter one I don't feel like I fully understand, but I made sure to make the load functions universal because they were server-side only at first, but that didn't change anything.

The example in the documentation stays on the same dynamic page, navigating from /blog/trying-the-raw-meat-diet to /blog/i-regret-my-choices. So I'm guessing when the user changes page, the page load functions are always rerun and the shared layout functions are only rerun in the documented situations. Can anyone confirm this?

For completeness sake, here are my other load functions:

// src/routes/[handle]/+layout.ts

export const load: PageLoad = async ({ fetch, params }) => {
  const profilePointer = await fetchProfilePointer(params.handle, fetch)
  if (!profilePointer) error(404)

  const profile = await fetchProfile(profilePointer)
  if (!profile || profile.nip05 !== params.handle) error(500, m.error_profile_not_found())

  return { profile }
}

// src/routes/[handle]/[slug]/+page.ts

export const load: PageLoad = async ({ parent, params }) => {
  const { profile } = await parent()

  const post = await fetchPost(profile, params.slug)
  if (!post) error(404)

  return { post }
}

Does anyone have some tips for me on how to solve this issue? I want the profile posts to be cached while the user is navigating on the website, as long as he stays on the same /[handle] page. I don't necessarily want to fetch all the profile's posts when the user enters the website on a /[handle]/[slug] page. When the user refreshes the page or navigates to a different /[handle] page, I want to invalidate this cache and refetch the posts. Ideally, I would also use this cache for the /[handle]/[slug] page.

I tried implementing this with a simple JavaScript object, but then I realised this data lives on the server and is shared for all clients and so I would have to work with session ids, or something alike. And then I should probably use a proper caching database. But maybe that's the best solution? Any thoughts?

Thanks for reading.

[benjamindedonder]

I was able to solve my issue by reimplementing my original store and, inside the load functions, making sure to only cache data when in the browser:

// src/routes/[handle]/+layout.ts

import { browser } from "$app/environment"

export const load: LayoutLoad = async ({ fetch, params }) => {
  // Will always be null on the server
  let profile = blogStore.profile

  if (!profile || profile.nip05 !== params.handle) {
    blogStore.clear()

    const profilePointer = await fetchProfilePointer(params.handle, fetch)
    if (!profilePointer) error(404)

    profile = await fetchProfile(profilePointer)
    if (!profile || profile.nip05 !== params.handle) error(500, m.error_profile_not_found())

    // Only cache in the browser
    if (browser) blogStore.profile = profile
  }

  return { profile }
}

// src/routes/[handle]/+page.ts

import { browser } from "$app/environment"

export const load: PageLoad = async ({ parent }) => {
  const { profile } = await parent()
  
  // Will always be null on the server
  let posts = blogStore.profilePosts

  if (!posts) {
    posts = await fetchPosts(profile)

    // Only cache in the browser
    if (browser) {
      blogStore.profilePosts = posts
      blogStore.cache(...blogStore.profilePosts)
    }
  }

  return { posts }
}

// src/routes/[handle]/[slug]/+page.ts

import { browser } from "$app/environment"

export const load: PageLoad = async ({ parent, params }) => {
  const { profile } = await parent()

  // Will always be null on the server
  let post = blogStore.getCached(params.slug)

  if (!post) {
    post = await fetchPost(profile, params.slug)
    if (!post) error(404)

    // Only cache in the browser
    if (browser) blogStore.cache(post)
  }

  return { post }
}

I know this goes against the recommendations on state management in the documentation. I'm open to suggestions on a better way of doing this.

And my question remains as well: Are page load functions rerun when the user navigates to a different page? Because I don't find a clear answer to that question in the documentation.