How does vue take over a prerendered page?

user_2498782 0
Viewed 358

I'm using the prerender-spa-plugin, and it works great! I'm curious on how vue manages to detect the prerendering. Why doesn't it try to render its components as usual?

I've tried searching for answers but no one is discussing how vue accomplishes this.

vue.js
3 Answers

Umm I will try to answer the best I can.

  • The prerenderer uses a puppeteer plugin to open a chrome window and hit your route. Then It as the page is rendered it will generate a new HTML file from the loaded HTML dom(How exactly it does it? don't know).
  • The newly generated pages will have all the scripts running. Vue components are like sections generating their own set of HTML and js on its own.
  • You can check all the rendered components on the rendered page using the inspect element. When you build using npm the prerenderer generates the HTML files for all the routes you have specified in a folder pattern. you direct all your domain requests to the now htmlised pages.
  • The scripts that were running in the Vue project are still there. And they will run just as they did when you were running in the Vue project. Everything will work the same except everything will be basic html,css and js. Hope this helps
user_54701680

The HTML produced by Prerendering is similar to that produced by Vue SSR. The documentation for Vue SSR explains how Vue hydrates that pre-rendered HTML, I think that might be the explanation you're looking for.

Client Side Hydration

user_102948110
Related