Fix window is not defined in SSR

[QingWei-Li]

Related to ElemeFE/element#3050

[codecov-io]

Codecov Report

Merging #60 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master      #60   +/-   ##
=======================================
  Coverage   26.42%   26.42%           
=======================================
  Files          18       18           
  Lines         193      193           
=======================================
  Hits           51       51           
  Misses        142      142

Impacted Files	Coverage Δ
src/client/batchUpdate.js	33.33% <100%> (ø)	✅

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 81d0139...57bb096. Read the comment docs.

[yuchonghua]

Why did not anyone respond to this pr?

[yuchonghua]

？？？？？？

[HadiChen]

I also encountered this problem

[QingWei-Li]

My bad.

[zspecza]

Sorry guys, I was in a motorcycle accident and have been recovering from severe nerve damage. I don't have time nor strength to maintain any code right now, just the act of typing is incredibly painful. That being said, I think it is time to retire vue-meta as this is now built into vue core with the 2.2 updates: https://github.com/vuejs/vue/tree/36810163386dd4f2690d8d1c4b1016f17e467e2d/packages/vue-server-renderer#template

[QingWei-Li]

@declandewet I am sorry to hear it. I hope you'll be better soon. ❤️

[jazoom]

@declandewet That's awful! I hope you get a full and speedy recovery.

[jazoom]

@declandewet Is this project really retired? I don't see how those templates replace the need for this project.

[atinux]

The template does not replace vue-meta @jazoom

My brother @alexchopin and I are maintaining this project because it's a major dependency of nutxt.js

[jazoom]

Ah, thanks @atinux.

I've been a bit confused about how to integrate it because looking at the example here: https://github.com/vuejs/vue-ssr-html-stream/blob/master/README.md
it says to do this: const meta = context.meta.inject()

But const context = { url: req.url } obviously doesn't have a meta property, so of course it gives an error.

A similar thing is mentioned in the vue-meta README and it doesn't seem to make sense. I must be missing something. I might have a dig through Nuxt.js to see how you guys set it up with SSR.

[atinux]

This may help you @jazoom

https://github.com/nuxt/nuxt.js/blob/master/lib/render.js#L86-L117
and
https://github.com/nuxt/nuxt.js/blob/master/lib/app/server.js#L44

SSR with Vue.js might be pretty hard at first, and nuxt.js adds a lot a features so the source code might be hard to understand.

You can take a look at ream to work with SSR without conventions.

[jazoom]

Thanks @atinux . I've actually got SSR working beautifully in a complex app with WebPack chunking and everything. I've recently updated it to use the new bundle format.

It's really just vue-meta I can't work out with SSR.

By the way, Nuxt is awesome. I looked into using it but this app has too much of a complex routing system and layout to make it work with Nuxt.

[jazoom]

Ream looks interesting. Thanks for pointing that out. I hadn't heard of it before (probably because it's only 6 days old!). It looks like I might be able to see how they used vue-meta (along with how Nuxt does it).

I wonder why egoist has started creating yet another build project (previously created vbuild and some other things).

[zspecza]

@jazoom i'm not planning on retiring vue-meta at all - i just unfortunately cannot type anything intensive like code, because my hands are in casts - so i have allowed the very generous Chopin brothers to maintain this in my stead while i recover from the nerve damage.

the context.meta is a property from vue-meta that you add to the context yourself

when you do

Vue.use(VueMeta)

That adds a $meta function to your root vue instance so you can do this:

const meta = app.$meta()

export default (context) => {
  router.push(context.url)
  context.meta = meta
  return app
}

[jazoom]

@declandewet thanks for pointing that out. I've gotten that far. I think the piece I'm missing is how to access that context in server.js.

I modelled my app after the Vue Hacker News 2.0 example app, which uses { url: req.url } as the context. That is also what is used as the context here: https://github.com/vuejs/vue-ssr-html-stream/blob/master/README.md

I've realised I need to access that context that I've applied in the app (as you demonstrated) and now I'm just trying to work out how my server gets that context since all it has is the URL/req.

[jazoom]

I think I've found what's going on. The context is created then magically the object is altered by the renderToStream function with the code that we place in server-entry.js. We then use that magically altered context again after the rendering.

[jazoom]

For the benefit of those reading in future, this is what you need to do in server.js when using the new bundle from Vue 2.2:

  const vueServerRenderer = require('vue-server-renderer');

  const template = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8');
  const renderer = createRenderer(bundle, template);



  const startTime = Date.now();

  const context = { url: req.url };

  renderer.renderToStream(context)
    .on('error', errorHandler)
    .on('end', () => {
      console.log(`${Date.now() - startTime}ms to render ${req.url}`);
    })
    .once('data', () => {
      const { meta, title, link, style, script, noscript } = context.meta.inject();

      context.head = `
      ${(context.head || '')}
      ${meta.text()}
      ${title.text()}
      ${link.text()}
      ${style.text()}
      ${script.text()}
      ${noscript.text()}
      `
    })
    .pipe(res);



function createRenderer(bundle, template) {
  // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
  return vueServerRenderer.createBundleRenderer(bundle, {
    template,
    cache: lruCache({
      max: 100,
      maxAge: 1000 * 60 * 5 // 5 minutes
    })
  });
}


  const errorHandler = error => {
    if (error && error.code === 404) {
      res.status(404).end('404 | Page Not Found');
    } else {
      // Render Error Page or Redirect
      res.status(500).end('500 | Internal Server Error');
      console.error(`error during render : ${req.url}`);
      console.error(error);
    }
  }