chrisvfritz / prerender-spa-plugin

Prerenders static HTML in a single-page application.
MIT License
7.33k stars 634 forks source link

How can I judge the environment is prerende or online in javascript #239

Open surahe opened 6 years ago

surahe commented 6 years ago

I use Vue.js V2 with prerender-spa-plugin V2 and now I am in trouble.

<template>
  <div>
       <loadingAndMask v-show="isLoading">
       <p>Some Other DOMs</p>
   </div>
<template>
<script>
     data () {
         return {isLoading: true}
      },
     created () {
          ajax.getData().then((res) => {
              this.isLoading = false
          })
     }
</script>

In this case,after prerender the .html file is rendered as

<div>
   <div class="mask" style="display: none">
   <p>Some Other DOMs</p>
</div>

and DOM will appear before the mask show.

On the other hand, I initialize some UI plugins in main.js:

import plugins from './plugin/toast'
Vue.use(plugins)

......

this will mount DOM in but as prerender and online environment run it,finally two same DOMs will add in .

How can I judge the environment is prerende or online in javascript?Should I update prerender-spa-plugin to V3?

isidrok commented 6 years ago

From the readme:

renderer: new Renderer({
        // Optional - The name of the property to add to the window object with the contents of `inject`.
        injectProperty: '__PRERENDER_INJECTED',
        // Optional - Any values you'd like your app to have access to via `window.injectProperty`.
        inject: {
          foo: 'bar'
        },

So you can check from JS if __PRERENDER_INJECTED is in window or not and even add some information to that object.

Don't know if this is supoorted in V2 but I would adivice you update to V3 anyway since PhantomJS development is discontinued and Puppetter just rocks.