`headTags` are empty when using `pipeToWebWritable` #27

daliborgogic · 2022-11-28T13:25:39Z

import { createHead, useHead } from '@unhead/vue'
import { createSSRApp, ref } from 'vue'
import { pipeToWebWritable } from '@vue/server-renderer'
import { renderSSRHead } from '@unhead/ssr'
import { describe, it, expect } from 'vitest'

const template = String.raw`<!doctype html><html lang="en"><!--head--><div id="app"><!--app--></div></html>`

describe('vue ssr', () => {
  it('pipeToWebWritable', async () => {
    const head = createHead()
    const app = createSSRApp({
      async setup() {
        const title = ref('initial title')
        useHead({
          title,
        })
        await new Promise(resolve => setTimeout(resolve, 200))
        title.value = 'new title'
        return () => '<div>hi</div>'
      },
    })
    app.use(head)

    const [prepend, append] = template.split('<!--app-->')
    const { headTags } = await renderSSRHead(head)
    const encoder = new TextEncoder()

    const { writable } = new TransformStream({
      start(controller) {
        // prepend.replace('<!--head-->', headTags)
        controller.enqueue(encoder.encode(prepend))
      },
      flush(controller) {
        controller.enqueue(encoder.encode(append))
      }
    })

    pipeToWebWritable(app, {}, writable)

    expect(headTags).eq('<title>new title</title>')
  })
})

 ❯ test/stream.test.js:29:22
     27|     await pipeToWebWritable(app, {}, writable)
     28| 
     29|     expect(headTags).eq('<title>new title</title>')
       |                      ^
     30|   })
     31| })
-    Expected   "<title>new title</title>"
+    Received   ""

harlan-zw · 2022-12-01T01:25:06Z

Hey @daliborgogic

Thanks for the issue.

I'm not entirely sure how to solve this, as head tags are written as the Vue app is rendered. Do you have any ideas?

daliborgogic · 2022-12-14T12:48:55Z

@harlan-zw For now no idea. Will check what we can and what we can with hooks. You can close this issue. If we found a solution we will make a PR.

bukandicki · 2022-12-27T09:11:41Z

have you tried this code @daliborgogic @harlan-zw ?

const appHtml = await renderToString(app);
const { headTags } = await renderSSRHead(head);

I had the same case, then I was able to solve it by changing the order, first renderToString then renderSSRRHead

harlan-zw · 2022-12-27T09:20:46Z

Isn't that just regular SSR? My understanding of the Vue rendering stream is that it's sending chunks as they are rendered so the head data would need to be appended as it's rendered, which it isn't for performance reasons.

daliborgogic · 2023-04-10T19:03:17Z

@harlan-zw yes, it's regular SSR. You are right. Workaround until there is a better way

- const { headTags } = await renderSSRHead(head)
+ const decoder = new TextDecoder()
+ let c
+ let once = false
  const { readable, writable } = new TransformStream({
-   start() {/**/},
+   async transform(chunk, controller) {     
+     if (!once) {
+      const decodedChunk = decoder.decode(chunk)
+      const { headTags } = await renderSSRHead(head)
+      const replacedHead = prepend.replace(`<!--head-->`, headTags)
+      const encodedChunk = encoder.encode(replacedHead + decodedChunk)
+      c = encodedChunk
+      once = true 
+     } else {
+       c = chunk
+     }
+     controller.enqueue(c)
+   },
    flush(controller) {
      controller.enqueue(encoder.encode(append))
    }
  })

harlan-zw · 2024-09-07T16:35:43Z

Going to track here #396 which is part of the v2 roadmap.

daliborgogic changed the title ~~Headtags are empty when using pipeToWebWritable~~ headTags are empty when using pipeToWebWritable Nov 28, 2022

harlan-zw changed the title ~~headTags are empty when using pipeToWebWritable~~ headTags are empty when using pipeToWebWritable Dec 1, 2022

daliborgogic closed this as completed Dec 14, 2022

harlan-zw reopened this Apr 11, 2023

harlan-zw mentioned this issue Sep 7, 2024

Streaming support #396

Open

1 task

harlan-zw closed this as completed Sep 7, 2024

harlan-zw closed this as not planned Won't fix, can't repro, duplicate, stale Sep 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`headTags` are empty when using `pipeToWebWritable` #27

`headTags` are empty when using `pipeToWebWritable` #27

daliborgogic commented Nov 28, 2022 •

edited

Loading

harlan-zw commented Dec 1, 2022

daliborgogic commented Dec 14, 2022

bukandicki commented Dec 27, 2022

harlan-zw commented Dec 27, 2022 •

edited

Loading

daliborgogic commented Apr 10, 2023 •

edited

Loading

harlan-zw commented Sep 7, 2024

headTags are empty when using pipeToWebWritable #27

headTags are empty when using pipeToWebWritable #27

Comments

daliborgogic commented Nov 28, 2022 • edited Loading

harlan-zw commented Dec 1, 2022

daliborgogic commented Dec 14, 2022

bukandicki commented Dec 27, 2022

harlan-zw commented Dec 27, 2022 • edited Loading

daliborgogic commented Apr 10, 2023 • edited Loading

harlan-zw commented Sep 7, 2024

`headTags` are empty when using `pipeToWebWritable` #27

`headTags` are empty when using `pipeToWebWritable` #27

daliborgogic commented Nov 28, 2022 •

edited

Loading

harlan-zw commented Dec 27, 2022 •

edited

Loading

daliborgogic commented Apr 10, 2023 •

edited

Loading