Allow fully hydrated HTML output #602
Description
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:
Line 56 in 5afff6f
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's Blog</title>
<meta name="description" content="Pine Wu'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's Blog</title>
<meta name="description" content="Pine Wu'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>