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)
    ]
}))