CODEWITHSUNDEEP
vue.js
Eric Guan
Eric Guan

Reputation: 15982

How does vue take over a prerendered page?

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.

Upvotes: 6

Views: 436

Answers (3)

coedycode
coedycode

Reputation: 460

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

Upvotes: 0

hitesh
hitesh

Reputation: 46

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

Upvotes: 0

ProblemsOfSumit
ProblemsOfSumit

Reputation: 21325

As far as I know, Javascript kicks in as usual and renders the components. But, the page includes the rendered output before already. So it's basically the default HTML if the user has no JS enabled. After JS parses, the DOM (or the applications root div) is emptied and the apps components are rendered as usual.

The prefilled output (HTML) is without CSS and images, but as those chunks are loaded on your page as well (hopefully fast and successful), everything is styled and beautiful, ready to be looked at.

Upvotes: 1

Related Questions