Support Server Side Rendering

[BernardZhao]

I would like to use vue-cal in my gridsome project, but currently to do so I have to wrap it in <ClientOnly> tags as the component does not support SSR. This would be a very appreciated feature!

[antoniandre]

@BernardZhao, thanks for your feedback. I will have a look after the V2 release.

[BernardZhao]

Thanks for considering this. Once I get the bandwidth, I'll see if I can help myself. I will probably just follow this guide.

[Nainterceptor]

Hello, We're using vue-cal with nuxtJS, but it's not working, we've some chunks failing to load (about i18n). I think you've to test with NuxtJS if you're considering SSR.

[antoniandre]

Hi @Nainterceptor, I've quickly tried it in dev mode and get no error, please provide a sample of code or reproduction link, and some details about when exactly does it break, so I can investigate from there.

[antoniandre]

I haven't seen any particular problem when I tried, but I am no Nuxt expert. If anyone can reproduce the problem and can give me the step by step to reproduce, I will work from the errors.

Any help is welcome.

[BernardZhao]

Not sure if anything changed, but I tried the latest version of this library and found that it works perfectly in Gridsome. It seems to be working fine now, and I'm not sure what was obstructing this before.

[BobGneu]

Good Day,

I was able to reproduce this when showing times, which is able to be addressed with the <client-only> tags, and again when querying for data. For whatever the server hangs with a file lock on .nuxt\views

Locks up after first load

<template>
    <Section class="section">
        <vue-cal :time-step="30" small :events="events" selectedDate="2018-11-16" />
    </Section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";

@Component({ components: { VueCal } })
export default class EventCalendarPage extends Vue {
    private data: any[] = [];
    private events: any[] = [
        {
            start: "2018-11-16 10:30",
            end: "2018-11-16 11:30",
            title: "Doctor appointment",
            content: '<i class="v-icon material-icons">local_hospital</i>',
            class: "health"
        },
        {
            start: "2018-11-16 10:30",
            end: "2018-11-16 11:30",
            title: "Doctor appointment",
            content: '<i class="v-icon material-icons">local_hospital</i>',
            class: "health"
        }
    ];
}
</script>

Does not lock up

<template>
    <Section class="section">
        <client-only>
            <vue-cal :time-step="30" small :events="events" selectedDate="2018-11-16" />
        </client-only>
    </Section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";

@Component({ components: { VueCal } })
export default class EventCalendarPage extends Vue {
    private data: any[] = [];
    private events: any[] = [
        {
            start: "2018-11-16 10:30",
            end: "2018-11-16 11:30",
            title: "Doctor appointment",
            content: '<i class="v-icon material-icons">local_hospital</i>',
            class: "health"
        },
        {
            start: "2018-11-16 10:30",
            end: "2018-11-16 11:30",
            title: "Doctor appointment",
            content: '<i class="v-icon material-icons">local_hospital</i>',
            class: "health"
        }
    ];
}
</script>

I am using nuxt 2.11.0 w/ typescript 3.7.5 After generation, the page behaves correctly.

[BernardZhao]

Not sure if anything changed, but I tried the latest version of this library and found that it works perfectly in Gridsome. It seems to be working fine now, and I'm not sure what was obstructing this before.

After more investigation, it seems that it works in Gridsome in development mode, but not during a build. The build gets stuck in the rendering HTML stage, as you can see in these Netlify logs:

4:05:53 AM: > gridsome build
4:05:54 AM: Gridsome v0.7.12
4:05:54 AM: Initializing plugins...
4:05:57 AM: Load sources - 0.92s
4:05:57 AM: Create GraphQL schema - 0.07s
4:05:57 AM: Create pages and templates - 0.1s
4:05:57 AM: Generate temporary code - 0.15s
4:05:57 AM: Bootstrap finish - 3.58s
4:05:57 AM: Compiling assets...
4:06:26 AM: Compile assets - 29.04s
4:06:28 AM: Execute GraphQL (126 queries) - 1.32s
4:06:28 AM: Write out page data (126 files) - 0.05s
4:08:27 AM: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

The only way to get around this is once again wrapping vue-cal in ClientOnly tags, rendering it on the client.

[BernardZhao]

After reading this, I am thinking the problem is probably the fact that timeouts are never destroyed, causing the lockup. Moving the code in the index created() hook to mounted might fix this.

[antoniandre]

Hi @BobGneu, @BernardZhao, thanks your investigation. I'd like to help on that once the V3 is released in stable version.

@BernardZhao if you want to benefit from SSR with Vue Cal, not using the client-only tag, then please create a bare project that I can clone with Nuxt & Vue Cal latest versions.

Also give me the exact steps to reproduce and command to build so that it will save me some time searching.

Hopefully it can be sorted without too much refactoring.

[BernardZhao]

Here is a bare project I created using Gridsome and Vue Cal, which is my use case.