Vue SSR 与 CDN，构建高效现代化 web 应用-「好主机」

首页 / 欧洲VPS推荐 / 正文

Vue SSR 与 CDN，构建高效现代化 web 应用

Time：2024年11月10日 Read：10 评论：42 作者：y21dr45

在现代 web 开发中，Vue.js 和 Server-Side Rendering (SSR) 已经成为许多开发者工具箱中的重要工具，通过结合 CDN（内容分发网络），我们可以进一步提升应用的性能和用户体验，本文将探讨 Vue SSR 的基本概念、实施方法以及如何利用 CDN 进行优化。

Vue SSR 与 CDN，构建高效现代化 web 应用

什么是 Vue SSR？

Vue SSR 指的是用 Vue.js 在服务器端渲染页面的技术，与传统的客户端渲染（CSR）不同，SSR 允许在服务器端生成完整的 HTML 页面并返回给客户端，这意味着搜索引擎爬虫可以更容易地索引页面内容，同时也减少了客户端的初始加载时间。

优势

1、更好的 SEO：由于服务器返回的是完整的 HTML 页面，搜索引擎可以更好地索引页面内容。

2、到达时间加载速度更快，因为不需要等待 JavaScript 解析和执行。

3、提高用户体验：在网络条件较差的情况下，用户能更快看到完整页面。

工作原理

在 Vue SSR 中，Vue 组件在服务器端被渲染成字符串，然后发送到客户端，客户端再将这些字符串"激活"成完全可交互的客户端应用，为了实现这一点，Vue SSR 使用了一个特殊的渲染函数renderToString 或者renderToStaticMarkup。

一个简单的 Vue SSR 示例如下：

import { createRenderer } from 'vue-server-renderer';
import App from './App.vue';
const renderer = createRenderer();
// 模拟一个简单的数据请求
const fetchData = () => {
    return {
        list: [
            { name: '包子', num: 100 },
            { name: '饺子', num: 2000 },
            { name: '馒头', num: 10 }
        ]
    };
};
// 数据转换为 HTML 内容
const dataToHtml = (data) => {
    return `
        <div>${data.list.map(item =><div>${item.name}有${item.num}个</div>).join('')}</div>
    `;
};
// 创建服务器
const server = http.createServer((req, res) => {
    if (req.url === '/' && req.method === 'GET') {
        const html = dataToHtml(fetchData());
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(`
            <!DOCTYPE html>
            <html lang="en">
            <head><title>Vue SSR Example</title></head>
            <body>${html}</body>
            </html>
        `);
    } else {
        res.writeHead(404);
        res.end('Not Found');
    }
});
server.listen(8080, () => {
    console.log('Server is listening on port 8080');
});

为什么使用 CDN？

CDN 是一组分布在多个地理位置的服务器，用于加速内容的交付，通过将内容缓存到离用户最近的服务器节点，CDN 可以显著减少延迟，提高网页加载速度。

优势

1、降低延迟：CDN 可以将内容缓存到离用户最近的服务器节点，减少传输时间。

2、分担流量压力：减轻源站服务器的压力，避免因流量过大导致的崩溃。

3、提高可用性：即使源站服务器出现问题，CDN 仍然可以从缓存中提供内容，确保网站的高可用性。

如何在 Vue SSR 中使用 CDN？

要在使用 Vue SSR 时充分利用 CDN，我们需要对静态资源进行优化和配置，以下是一个基本的实现步骤：

1. 配置 Webpack

我们需要在 Webpack 配置中区分客户端和服务端的代码，并将静态资源提取出来，这可以通过设置不同的入口文件来实现。

const path = require('path');
const webpack = require('webpack');
const vueSSRServerPlugin = require('vue-server-renderer/server-plugin');
module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src/client-entry.js'), // 客户端入口
        ssr: path.resolve(__dirname, 'src/server-entry.js') // 服务端入口
    },
    output: {
        libraryTarget: 'umd',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new vueSSRServerPlugin()
    ]
};

2. 配置 Express 服务器

我们配置一个 Express 服务器，将所有静态资源请求指向 CDN，同时处理动态路由请求。

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 8080;
// 读取打包后的 manifest 文件，获取静态资源的路径
const clientManifest = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'dist/vue-ssr-client-manifest.json'), 'utf-8'));
const publicPath = clientManifest.publicPath;
// 配置静态资源从 CDN 加载
app.use(express.static(path.resolve(__dirname, 'dist'), { setHeaders: (res, path) => {
    if (path.startsWith(publicPath)) {
        res.setHeader('Cache-Control', 'max-age=31536000'); // CDN 缓存一年
    } else {
        res.removeHeader('Cache-Control');
    }
} }));
// 服务端渲染逻辑
app.get('*', (req, res) => {
    const context = {};
    const app = require('./dist/vue-ssr-server-bundle.json').default;
    app.render(context).then(html => {
        res.send(`
            <!doctype html>
            <html>
                <head><title>Vue SSR with CDN</title></head>
                <body>${html}</body>
            </html>
        `);
    }).catch(err => {
        console.error(err);
        res.status(500).send('An error occurred');
    });
});
app.listen(port, () => {
    console.log(Server is listening on port ${port});
});

3. 配置 CDN

将静态资源上传到 CDN，并配置相应的域名和缓存策略，可以使用腾讯云 CDN、阿里云 CDN 等服务，具体配置过程可以参考所选 CDN 的官方文档。

通过结合 Vue SSR 和 CDN，我们可以大幅提升 web 应用的性能和用户体验，Vue SSR 提供了更好的 SEO 和更快的内容到达时间，而 CDN 确保了静态资源的高效交付，在实际项目中，我们需要根据业务需求和流量情况，合理配置和优化这两者的结合，希望本文能够帮助你理解和实现这一目标，为你的用户提供更优质的 web 体验。

原文链接：https://www.asoulu.com/post/86296.html

上一篇：机房跑CDN，内容分发网络的引擎，机房跑CDN违法吗

下一篇：彼度CDN，边缘计算的革新者，网络加速的新纪元，彼度云G08配置

标签： vue ssr cdn

1. 引言