Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Conflict of onBeforeRender between _default.page.server.js and .page.server.js

See original GitHub issue

As I refer to the example of vuex provided, everything works well. But whenever I add a custom .page.server.js, an error of Argument 'str' should be a string but we got 'typeof str === "undefined"' will occur, and the whole page will become empty

Seems like the onBeforeRender in _default.page.server.js and .page.server.js conflicts with each other, as everything will back to normal again when I delete/clear the custom .page.server.js file

To reproduce:

git clone git@github.com:IT-iddiot/vite-plugin-ssr-bug-reproduce.git
cd vite-plugin-ssr-bug-reproduce
npm install
npm run start

If you visit localhost:3000 now, everything should work normally.

Now you go to pages/index.page.server.js, and uncomment all the code inside. If you check the browser now, the page will be empty.

I am curious is there any way to use Vuex and customer .page.server.js at the same time. Any help is appreciated, Thank you

Issue Analytics

State:
Created 2 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

2reactions

brilloutcommented, Oct 5, 2021

I’m glad you found something to your pleasing.

If you believe there is a bug in vite-plugin-ssr, feel free to push.

But I still looking forward to the ability to use onBeforeRender on default server js and custom page server js at the same time, cause now I stuck with the custom tracking code per page haha.

I’m actually working on it at the moment.

0reactions

IT-iddiotcommented, Oct 5, 2021

I have tried, also cannot. Now I manage my SEO metadata through Vuex, which works quite well for me now ( inspired by the solution here https://github.com/brillout/vite-plugin-ssr/issues/34#issuecomment-821974773 )

Here is a simple example:

In Vuex store, add state of title and description, and a mutation to update them

// store.js
import Vuex from 'vuex'

export { createStore }

function createStore() {
  const store = Vuex.createStore({
    state() {
      return {
        title: 'Default title',
        description: 'Default description',
      }
    },

    mutations: {
      setMetaTags(state, { title, description }) {
        state.title = title;
        state.description = description;
      }
    }
  })

  return store
}

In the page component or any nested component, commit the mutation in beforeCreate/created/serverPrefetch hook

<script setup>
import { useStore } from 'vuex';

/**
 * All the code inside <script setup> will run around 
 * the beforeCreate and created lifecycle hooks, unless
 * you explicitly wrap the code under other lifecycle.
 * Refer: https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks
 */
const store = useStore();

store.commit('setMetaTags', {
  title: "Custom title",
  description: "Custom description",
})

</script>

Now in _default.page.server.js, use the title and description from your Vuex store

import { renderToString } from '@vue/server-renderer'
import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr'
import { createApp } from './app'

export { render }
export { onBeforeRender }
export { passToClient }

const passToClient = ['INITIAL_STATE']

async function render(pageContext) {
  const { appHtml, INITIAL_STATE } = pageContext

  /**
   * assign custom meta info here
   */
  const title = INITIAL_STATE?.title ?? 'Default title here'
  const description = INITIAL_STATE?.description ?? 'Default description here'

  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <body>
      <div id="root">
        ${dangerouslySkipEscape(appHtml)}
      </div>
    </body>
  </html>`
}

async function onBeforeRender(pageContext) {
  const { Page } = pageContext
  const { app, store } = createApp({ Page })

  const appHtml = await renderToString(app)

  const INITIAL_STATE = store.state

  return {
    pageContext: {
      INITIAL_STATE,
      appHtml
    }
  }
}

Now the meta info should be updated

It works for me now, although I am not sure whether this is a good way to do it. I have tried @vueuse/head and vue-meta@next before, but none of them works for me.

But I still looking forward to the ability to use onBeforeRender on default server js and custom page server js at the same time, cause now I stuck with the custom tracking code per page haha.

Anyway, thank you for this awesome tool 👍🏼