Web 渲染（1）

web 应用的架构

• 渲染和加载 (Rendering 和 loading）
• 数据/状态管理
• 组件模式
• 路由和转换

接收页面的过程

在用户看到浏览器中自己想要界面通常会经历三个阶段。

• Get 请求服务端下载界面
• 解析 bundle.js
• 渲染界面
  Bigger JS bundle = slower performance
• 服务端渲染 (server side render)
• 客户端渲染 (client side render)

这些年我们经历从服务端渲染来到客户端渲染，现在又回到客户端渲染，其实并不能说哪个好，就像 OOP 和 FP 其实并不是非黑即白，其实各有优点。我们只有进行权衡，让两者达到平衡才能做出高性能的 web 应用。

在这次分享中看到熟悉面孔 jason miller , 这位 preact 作者也加入 google 团队了。
随着应用越来越复杂，我们的 bundle.js 文件体积也在迅速增肥，这样大大增加浏览器端解析的压力，降低加载页面速度，而从影响了用户的体验。
这样我们可以从新返回到服务端渲染的时代。

同样是加载有图片的列表的界面 ，如果使用服务端渲染，在 html 内容加载到浏览器，就会看到列表图片加载到界面上，而客户端渲染需要先加载列表，才开始加载图片。不过想要更好用户交互体验，唯一的选择还是客户端渲染可以提供这样体验。

SRR with Hydration（同构方式开发 web 应用，既有服务端又有客户端渲染）

• Performance
• SEO
• Data Fetching
  以上是服务端渲染的优点。

Performance

服务端渲染会将页面装配好直接发送给请求的浏览，这样浏览器就减少许多工作，直接将其渲染呈现给用户

How do we render on the server then hydrate on the client?
Typical client-side rendering with Reat

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<App/>, document.getElementById('root'));

const render = (req, res) => {
    fs.readFile('./index.html','utf8',(err, data)=>{
        const html = ReactDOMServer.renderToString(<App/>);
        const document = data.replace(`<div id="root'>${html}</div>`);
        res.end(document)
    });
}

const app = express();
app.get('*',render);

import { createRenderer } from 'vue-server-renderer';

const render = (req, res) => {
    const app = new Vue({...})
    
    createRenderer().renderToString(app,(err,html)=>{
        res.end(html)
    })
}


const app = express();
app.get('*',render);

import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html',ngExpressEngine({
    bootstrap:AppServerModuleNgFactory,
    providers:[
        provideModuleMap(LAZY_MODULE_MAP)
    ]
}))