almost done

Author: yyx990803

en/SUMMARY.md

@@ -3,12 +3,11 @@
 - [Source Code Structure](structure.md)
 - [Routing and Code-Splitting](routing.md)
 - [Data Pre-fetching and State](data.md)
+- [Client Side Hydration](hydration.md)
 - [Introducing Bundle Renderer](bundle-renderer.md)
 - [Build Configuration](build-config.md)
 - [CSS Management](css.md)
 - [Head Management](head.md)
 - [Caching](caching.md)
 - [Streaming](streaming.md)
-- [Client Side Hydration](hydration.md)
-- [Security](security.md)
 - [API Reference](api.md)

en/hydration.md

@@ -0,0 +1,32 @@
+# Client Side Hydration
+
+In `entry-client.js`, we are simply mounting the app with this line:
+
+``` js
+// this assumes App.vue template root element has id="app"
+app.$mount('#app')
+```
+
+Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive.
+
+If you inspect the server-rendered output, you will notice that the app's root element has a special attribute:
+
+``` js
+<div id="app" data-server-rendered="true">
+```
+
+The `data-server-rendered` special attribute lets the client-side Vue know that the markup is rendered by the server and it should mount in hydration mode.
+
+In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. **In production mode, this assertion is disabled for maximum performance.**
+
+### Hydration Caveats
+
+One thing to be aware of when using SSR + client hydration is some special HTML structures that may be altered by the browser. For example, when you write this in a Vue template:
+
+``` html
+<table>
+  <tr><td>hi</td></tr>
+</table>
+```
+
+The browser will automatically inject `<tbody>` inside `<table>`, however, the virtual DOM generated by Vue does not contain `<tbody>`, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates.

en/security.md

@@ -0,0 +1,33 @@
+# Streaming
+
+`vue-server-renderer` supports stream rendering out of the box, for both the base renderer and the bundle renderer. All you need to do is use `renderToStream` instead of `renderToString`:
+
+``` js
+const stream = renderer.renderToStream(context)
+```
+
+The returned value is a [Node.js stream](https://nodejs.org/api/stream.html):
+
+``` js
+let html = ''
+
+stream.on('data', data => {
+  html += data.toString()
+})
+
+stream.on('end', () => {
+  console.log(html) // render complete
+})
+
+stream.on('error', err => {
+  // handle error...
+})
+```
+
+## Streaming Caveats
+
+In stream rendering mode, data is emitted as soon as possible when the renderer traverses the Virtual DOM tree. This means we can get an earlier "first chunk" and start sending it to the client faster.
+
+However, when the first data chunk is emitted, the child components may not even be instantiated yet, neither will their lifecycle hooks get called. This means if the child components need to attach data to the render context in their lifecycle hooks, these data will not be available when the stream starts. Since a lot of the context information (like head information or inlined critical CSS) needs to be appear before the application markup, we essentially have to wait until the stream to complete before we can start making use of these context data.
+
+It is therefore **NOT** recommended to use streaming mode if you rely on context data populated by component lifecycle hooks.

en/streaming.md

@@ -104,6 +104,8 @@ import { createApp } from './app'
 // client-specific bootstrapping logic...
 
 const { app } = createApp()
+
+// this assumes App.vue template root element has id="app"
 app.$mount('#app')
 ```