Built-in SSR support #10

Activity

1. MartinMalinda commented on Jul 3, 2020

   

   MartinMalinda

   on Jul 3, 2020

   OwnerAuthor

   More actions

   Experimental support here:
   https://vue-concurrency.netlify.app/ssr-support/#with-vue-concurrency-ssr-utils

   It's been tested briefly, but I expect to revisit this in a month or two when I'll be dealing with this at work.
2. MartinMalinda

   added

   enhancementNew feature or requestNew feature or request

   on Dec 7, 2020
3. kpdemetriou commented on Jan 25, 2021

   

   kpdemetriou

   on Jan 25, 2021

   Last edited by kpdemetriou

   More actions

   I'm interested in this feature. @MartinMalinda how can I help you build this out?

   Edit:

   import { useTask } from 'vue-concurrency';
   import { getCurrentInstance, onServerPrefetch, onBeforeMount } from '@nuxtjs/composition-api';
   export { useTask } from 'vue-concurrency';
   import wrap from 'REDACTED';
   
   const nuxtState = process.client && window['__NUXT__'];
   
   export function useServerTask (generator) {
     const vm = getCurrentInstance();
     const task = useTask(generator);
   
     onServerPrefetch(async () => {
       await wrap(task.perform); // Muffle errors
   
       if (!vm.$ssrContext.nuxt.task)
         vm.$ssrContext.nuxt.task = [];
   
       vm._taskKey = vm.$ssrContext.nuxt.task.length;
   
       if (!vm.$vnode.data) vm.$vnode.data = {}
       const attrs = (vm.$vnode.data.attrs = vm.$vnode.data.attrs || {})
       attrs['data-task-key'] = vm._taskKey;
   
       vm.$ssrContext.nuxt.task.push(task._instances);
     });
   
     onBeforeMount(async () => !vm._hydrated && await task.perform());
   
     // Hydrate component
     if (process.client) {
       vm._hydrated = true
       vm._taskKey = vm.$vnode.elm.dataset.taskKey;
       task._instances = nuxtState.task[vm._taskKey];
       console.log(task.isError)
     }
   
     return task;
   }
   
4. MartinMalinda commented on Jan 25, 2021

   

   MartinMalinda

   on Jan 25, 2021

   OwnerAuthor

   More actions

   @kpdemetriou

   thanks for reaching out about this

   There's some WIP on this: https://github.com/MartinMalinda/vue-concurrency/blob/master/src/utils/ssr-utils.ts

   Maybe it's not the latest WIP.. I think I have some tweaked (better) version that I tested directly in a Nuxt app... I'll try to recover it (tomorrow hopefully 🙏 ). There was some trick with reactive that made sure that even some later changes to the task state were propagated, I don't remember exactly.

   I have no use for this feature currently. I have changed my SSR server -> client strategy. I fully rely on Pinia (pinia is used inside the task). But even with Pinia I had to do some hack to make it work:

   export function usePiniaPrefetch(cb: () => Promise<any>) {
     const root = useRoot() as any;
     onServerPrefetch(async () => {
       await cb();
       const ssrContext = root.context.ssrContext;
       ssrContext.nuxt.pinia = getRootState(root.context.req);
     });
   }

   I won't have much time to implement this any time soon - but if you play with these things I can definitely do code reviews in a PR and help out a bit 🙏
5. MartinMalinda commented on Jan 25, 2021

   

   MartinMalinda

   on Jan 25, 2021

   OwnerAuthor

   More actions

   The latest WIP solution worked for me actually. But I remember it broke with Nuxt upgrade. It was quite fragile in a way that it somehow used some Nuxt internal things. Nuxt itself isn't actually doing great job with all the nuxtState etc IMO, it changes often and it the structure is different in different places (nuxt plugin, context etc)

   vuejs/pinia#332
   nuxt/nuxt#8620
6. kpdemetriou commented on Jan 25, 2021

   

   kpdemetriou

   on Jan 25, 2021

   Last edited by kpdemetriou

   More actions

   Thanks for the quick turnaround @MartinMalinda. I've modified your implementation in ssr-utils.ts (which indeed doesn't work in Nuxt latest for me) and I believe it should be sustainable now. Would you mind digging up that latest WIP so I can merge any useful additions before I create a PR?
7. MartinMalinda commented on Jan 27, 2021

   

   MartinMalinda

   on Jan 27, 2021

   Last edited by MartinMalinda

   OwnerAuthor

   More actions

   @kpdemetriou I tried to look it up but couldn't find it, welp. It's in some old branch that I can't identify right now 😬 but I rechecked the implementation and what was important was the usage of computed for the saving of task instances and that's present in the current master also... so maybe It's fine.

   PR for the fix for latest Nuxt is welcome 🙏
8. kpdemetriou commented on Jan 27, 2021

   

   kpdemetriou

   on Jan 27, 2021

   More actions

   I thought that might be what you meant; relevant PR in #34.