Maik Posts - Answer Overflow

Maik

•Created by Maik on 4/17/2024 in #❓・help

SSR, Clientside Navigation and rendering behaviour

Hi! My issue is the following. I have components that I want to render via SSR for SEO that have rather long rendering times since they wait for data. I now want to render a Component with SSR but lazy load the component (non-blocking) on client-side navigation. That way I can keep the time to navigate low and get all my SSR data. Or so I am thinking at least. Is there any way to achieve this?

1 replies

NNuxt

•Created by Maik on 7/3/2023 in #❓・help

Errors migrating to server-only components

Hey guys, has anyone experience with migrating existing components to server components? The first components I tried to migrate were Text/Markdown Components. When I create a text.client.vue it works on the client. When I got both text.client and text.server it shows usual behaviour as with text.vue. When I create a text.server.vue only though (which is my goal to save bundle size) I always get: 1. A 400 Bad Request

at createError (./node_modules/h3/dist/index.mjs:128:15)
at Object.handler (./.nuxt/dev/index.mjs:1710:15)
at Object.handler (./node_modules/h3/dist/index.mjs:1247:31)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:1333:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1329:9)

at createError (./node_modules/h3/dist/index.mjs:128:15)
at Object.handler (./.nuxt/dev/index.mjs:1710:15)
at Object.handler (./node_modules/h3/dist/index.mjs:1247:31)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async toNodeHandle (./node_modules/h3/dist/index.mjs:1322:7)
at async Object.ufetch [as localFetch] (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:1333:30)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1329:9)

2. This Serverlog: [Vue warn]: Component NuxtIsland is missing template or render function.
3. I get no additional logs using app:error This is the component:

<script setup lang="ts">
const props = defineProps<{ imprint: ImprintModel }>();
const text = props.imprint.translations?.[0]?.imprint_text;
</script>

<template>
    <div
        class="content pt-[10rem] p-10 dark:text-white"
        v-html="text" />
</template>

<script setup lang="ts">
const props = defineProps<{ imprint: ImprintModel }>();
const text = props.imprint.translations?.[0]?.imprint_text;
</script>

<template>
    <div
        class="content pt-[10rem] p-10 dark:text-white"
        v-html="text" />
</template>

Does anyone have an idea what I'm doing wrong? Or could this be cause by outside factors (modules & plugins)?

9 replies

NNuxt

•Created by Maik on 2/10/2023 in #❓・help

✨ Dynamic Sitemap with SSR without pre-render

Hello Discord, I'm currently using the simple-sitemap module to handle my sitemap. Since the site I'm building should be SSR without pre-rendering, I cant rely on the module to crawl my routes. So I want to query our CMS using the graphql-client module. I've tried the "sitemap:generate" hook and failed because it wouldn't import the generated GQL Query call. I'm now wondering what is the best way to implement this for my context? I kinda wanna make it work with simple-sitemap, but I'm almost ready to try just creating a sitemap.xml.ts in my server directory 😄

38 replies

Gaming

Programming