Vuepress: Allow fully hydrated HTML output

Created on 19 Jun 2018 · 9Comments · Source: vuejs/vuepress

What problem does this feature solve?

I want to output a HTML page without all the fancy preload, prefetch and hydration script/styles.
I just use Vue / MD files as a way to organize the static website structure. I do CSS by setting a link that points to the CSS in the <head>. I don't need JS.

What does the proposed API look like?

In config.js, have a setting hydrate: true by default. When set to false, it sets clientManifest to null for building.

How should this be implemented in your opinion?

Use the option to toggle the clientManifest in here: https://github.com/vuejs/vuepress/blob/5afff6fe89b056383931f33ef32048d179a93a45/lib/build.js#L56

Will possibly break some things, such as <style> in each Vue SFC.

Are you willing to work on this yourself?

Yes.
I also realize this might be different than VuePress's use case. I want output that resembles a traditional static website, only using Vue for content organization purpose. If this case don't fall into VuePress's scope, I can just use my own fork.

Comparison of fully-hydrated vs need-hydration

Fully hydrated

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Pine Wu&#39;s Blog</title>
    <meta name="description" content="Pine Wu&#39;s Blog">
    <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="f6 avenir"><header id="header" class="measure-wide center mt6 mb4"><nav><div class="mb2 dib"><a href="/" title="blog" class="gray link active">blog</a>
        .
        <a href="/about" title="matsu" class="gray link">matsu</a></div></nav></header><section id="content" class="gray mb6 lh-copy"><ul class="ph0"><li class="flex justify-between pb3"><a href="/1" class="link">Debug Electron App with VS Code</a><span class="date gray"></span></li><!----><!----></ul></section></div></div></div>
  </body>
</html>

Need Hydration

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Pine Wu&#39;s Blog</title>
    <meta name="description" content="Pine Wu&#39;s Blog">
    <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/style.css">

    <!-- /rant I hate these random css/js included in each of my static pages -->
    <link rel="preload" href="/assets/css/3.styles.e31b7c6e.css" as="style"><link rel="preload" href="/assets/js/app.f49db1d2.js" as="script"><link rel="prefetch" href="/assets/js/0.dc809a76.js"><link rel="prefetch" href="/assets/js/1.0b1dee9b.js"><link rel="prefetch" href="/assets/js/2.7636b54f.js">
    <link rel="stylesheet" href="/assets/css/3.styles.e31b7c6e.css">
    <!-- /endrant I hate these random css/js included in each of my static pages -->
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="f6 avenir"><header id="header" class="measure-wide center mt6 mb4"><nav><div class="mb2 dib"><a href="/" title="blog" class="gray link active">blog</a>
        .
        <a href="/about" title="matsu" class="gray link">matsu</a></div></nav></header><section id="content" class="gray mb6 lh-copy"><ul class="ph0"><li class="flex justify-between pb3"><a href="/1" class="link">Debug Electron App with VS Code</a><span class="date gray"></span></li><!----><!----></ul></section></div></div></div>
    <!-- /rant I hate these random css/js included in each of my static pages -->
    <script src="/assets/js/app.f49db1d2.js" defer></script>
    <!-- /endrant I hate these random css/js included in each of my static pages -->
  </body>
</html>

feature request

Source

octref

👍4

All 9 comments

This would also include a dev server that doesn't rely on client side routing.

octref on 19 Jun 2018

Looks good to me, contribution welcome! I guess it would not take breaking changes.

ulivz on 19 Jun 2018

Actually now looking back, I think using this emit for functional components would be a perfect match.

octref on 20 Jun 2018

@ulivz I think this might be different than Vuepress's vision (output SPA as compared to output pure static HTML). I'll just build my own alternative.

https://github.com/vuejs/vuepress/issues/36#issuecomment-400019456

octref on 25 Jun 2018

@octref Why not use Hexo? I use it, it's great... https://www.vblip.com/2018/how-this-site-was-built/ It sounds exactly like what you're asking for... Vue is a thick front end javascript library, it's strength is in PWA... You seem like you would like polymer

rayfoss on 25 Jun 2018

👎1 👍1

@rayfoss I enjoy Vue's template language. I don't like polymer at all.

octref on 25 Jun 2018

The problem with Hexo and so on is that it dosn't offer the same strength as Vue when it comes to dynamically loading things. Vue is awesome for dynamic site, I just wish that there was one generator that created simple standalone static vue pages with the ability to use the dynamic features on those pages. I guess that's what @octref wants as well.