Imitating Nuxt's asyncData: is serverPrefetch meant to be replaced by data in the options API?

[johnRivs]

I have a page component using the options API.

<template>
    <div>
        {{ foo }}
    </div>
</template>

<script>
    export default {
        data: () => ({
            foo: 'baz'
        }),

        serverPrefetch() {
            this.foo = 'bar';
        }
    }
</script>

From the server, the HTML comes with bar but after a fraction of a second, bar gets updated to baz. Is serverPrefetch something to be used exclusively with a global store?

[frandiox]

Hi there!

I think this looks correct and is the way SSR generally works. The frontend gets bar from the SSR run, but during re-hydration it overrides it with baz from the hardcoded data in the component.

To make the re-hydration work well for your case, instead of hardcoding baz in the code, you would need to read its value from the SSR's initialState, and fallback to baz if it's not provided.

You can do this in the beforeMount hook I think (this.foo = initialState.foo || 'baz'), or maybe even in the data function itself. The initialState is provided in the main hook so you can pass it to your components in the way you prefer (using stores, provide/inject, or just rely on page props).

Also, make sure you modify initialState in the SSR run so it is provided later to the frontend for re-hydration. There's more info about that here, and a code example here (it uses Suspense instead of onServerPrefetch but the concept is the same).

I think I should make guide on common SSR questions like this with examples 🤔

Hope that helps!

[frandiox]

@johnRivs Interesting. I think I got something that works. There is no instance created during beforeResolve so I think we are forced to override a component hook. This relies on created, which runs both in server and client:

  router.beforeResolve(async (to) => {
    // Maybe this should be last matched to support nested routes?
    const component = to.matched[0].components.default

    if (component.prefetch) {
      // Wrap Created hook
      const originalCreatedHook = component.created
      if (!originalCreatedHook || !originalCreatedHook._prefetchWrap) {
        component.created = function (...args) {
          // Merge data in component instance
          Object.assign(this, initialState[to.name] || {})

          if (originalCreatedHook) {
            originalCreatedHook(...args)
          }
        }

        // Mark it to avoid further wrapping
        component.created._prefetchWrap = true
      }

      if (!initialState[to.name]) {
        // Fetch data and save for this route
        initialState[to.name] = await component.prefetch(context)
      }
    }
  }

This is basically using initialState as a central store for fetched data, even in browser.
Would something like this fit your needs?

[johnRivs]

I like it. Clever and compact.

There's one issue I can think of. If I navigate from /users to /users?page=7 created won't be enough. Updated covers that but it doesn't run during SSR.

[johnRivs]

I think I got it 😭 Also works when navigating to the same page (e.g. pagination) and can be adjusted if you want to support nested routes. Thanks for going back and forth with me.

router.beforeResolve(async (to, from, next) => {
    let component = to.matched[0].components.default,
        instance  = to.matched[0].instances.default;

    if (! component.prefetch || ! component) return next();

    to.meta = {};

    if (! from.href && isClient) {
        component.data = () => ({ ...initialState.pageData });

        return next();
    }

    let result = await component.prefetch({ app, router, initialState, to, api }),
        data   = ! instance && component.data?.();

    instance ? Object.assign(instance, result) : component.data = () => ({ ...data, ...result });

    if (! isClient) initialState.pageData = { ...data, ...result };

    next();
});

Usage:

<template>
    <div>
        home page {{ asdf }} {{ qwer }}
    </div>
</template>

<script>
    export default {
        data: () => ({
            asdf: 'zxcv'
        }),

        prefetch({ api, to }) {
            return new Promise((resolve) => {
                setTimeout(() => resolve({ qwer: +new Date }), 100)
            });
        }
    }
</script>

[frandiox]

@johnRivs That's great! I wonder if we should add an optional module to vite-ssr to implement this 🤔

[m4rvr]

Not sure if I missed something, but is it possible to do the same thing for components? Currently I need to fetch data in the page component, wait with <Suspense> and pass it down to the components. Nuxt's asyncData is for pages where fetch can be called in components too. What would be the solution for it?

I thought the components should do the data fetching and not the page. If I have 3 different components that fetch from 3 different data sources, would I do that in the page component and pass the result to each component?

Okay nvm, I thought Nuxt handles it differently and fetches the data in the component before the route is visible. But the behavior is the same.

[johnRivs]

Ahh, I see what you mean now. I thought you were saying to fetch the data first, then put it into initialState and then pass it to the component (although that's possible too I guess, for the logged in user example). My bad.

Well, if you want to fetch data using vue-router, you can also rely on beforeEnter or in-component beforeRouteEnter, so you have each page data-fetch logic separate.

Yeah, I didn't mention those cause of the lack of this which may or may not end up being a problem.

Vitedge looks really cool, I'm just not familiar with that type of workflow and deployment, but with your response I should be able to keep going with vite-ssr. Thanks for your time!

[m4rvr]

Would it be possible to provide some hooks like Nuxt's fetch or asyncData so you can fetch and return data in the component (pages)? router.beforeEach is kinda okay but imo it would be much better to fetch the data directly in the components. I use Composition API which doesn't work nicely with beforeRouterEnter.

[frandiox]

Possible yes, but I would prefer to keep vite-ssr as a simple library to do SSR and leave sugar-syntax fetching to each framework (React/Vue/etc) or any other library wrapping vite-ssr (like Vitedge).

In composition API, the simplest way is probably using async setup + <Suspense>. That will stop the rendering in both browser and server until the data is fetched. There's an example here.

You can easily extract that logic into a hook and just do async setup() { const state = await useFetchData() } from your components:

import { inject, ref } from 'vue'
import { useRoute } from 'vue-router'

export async function useFetchData() {
  const { name } = useRoute() // this is just a unique key
  const initialState = inject('initialState')
  const state = ref(initialState[name] || null)

  if (!state.value) {
    state.value = await (await fetch('https://my-api.com?page=' + name)).json()

    if (import.meta.env.SSR) {
      initialState[name] = state.value
    }
  }

  return state
}

You can modify that to accept parameters instead of relying on Route's name or anything you need.

[m4rvr]

Oh wow, simple as that? I will try that, thanks for your feedback again. It's slowly become clearer. 😄

[johnRivs]

End result: #46 (reply in thread)