Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境,主要用于創(chuàng)建可擴展的網絡應用程序。Node.js 在服務器端運行,可以處理非阻塞 I/O、事件驅動的代碼實現、輕量級和高效執(zhí)行等特性,使得它成為構建高性能 Web 應用程序的理想選擇。
Web 應用程中最重要的部分是前端渲染。為了尋找一種更快速的方式來渲染頁面,人們逐漸開始將 Vue.js 用于服務端渲染。Vue.js 是一種輕量級、靈活的前端框架,可以用于搭建現代、高效的應用程序。Vue.js 2.0 可以將組件映射到虛擬 DOM 中,并在服務端渲染時重新生成 HTML,從而實現減輕前端渲染壓力,提高渲染效率的目的。
下面是使用 Node.js、Vue.js 和 Express.js(一種常用的 Web 框架)搭建 Web 應用的代碼:
// server.js const express = require('express') const { createBundleRenderer } = require('vue-server-renderer') const app = express() const bundleRenderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), { runInNewContext: false, template: require('fs').readFileSync('./src/index.template.html', 'utf-8'), clientManifest: require('./dist/vue-ssr-client-manifest.json') }) app.use(express.static('./dist')) app.get('*', (req, res) =>{ const context = { url: req.url } bundleRenderer.renderToString(context, (err, html) =>{ if (err) { console.error(err) res.status(500).end('Internal Server Error') return } res.end(html) }) }) const port = 8080 app.listen(port, () =>{ console.log(`Server started at http://localhost:${port}`) })
上述代碼使用 Express.js 框架創(chuàng)建了一個 Web 服務。在服務端加載 Vue.js 組件并使用 bundleRenderer 進行頁面渲染,最后將渲染出的 HTML 返回給客戶端。在客戶端加載的 JavaScript 文件會自動控制和更新頁面狀態(tài),從而實現優(yōu)雅的前端渲染效果。