With the popularization of mobile Internet and the rapid development of cloud computing technology, front-end framework has gradually become the main force of WEB development. In addition to providing convenient page structure, interactive effects and dynamic content display, the front-end framework also has the advantages of rapid development, maintainability, performance optimization, etc., which greatly improves development efficiency and user experience. As a popular front-end framework, Vue.js version 3.0 has been officially released, bringing more innovation and optimization. Among them, the implementation of Server Side Rendering (SSR) is an important update in Vue3.
1. The definition and advantages of SSR
SSR refers to completing the page rendering work on the server side, instead of using JavaScript to dynamically generate a DOM tree on the client side, so as to quickly improve page rendering. Speed and SEO purposes. The traditional SPA (Single Page Application) architecture usually uses client-side rendering mode to display pages through Vue.js rendering on the client side. The advantages are good dynamic interactivity and good user experience. However, since the SPA can only display the page after the JavaScript is downloaded and parsed, there will be problems such as slow page loading and unfriendly SEO. SSR sends the server-side rendered HTML document to the client, which not only optimizes loading speed and SEO, but also has the advantages of better initial rendering performance, accessibility, and social sharing.
2. SSR implementation in Vue3
Vue.js provides a solution to support server-side rendering in version 2.0 to meet some special demand scenarios. In Vue3, SSR has received more complete support, the core of which is the createRenderer function. Next, let’s take a look at the SSR implementation in Vue3.
- Installation related dependencies
Vue3 officially provides two core dependencies: @vue/server-renderer and @vue/compiler-sfc. The former is used to generate HTML and CSS. , Script and other resources, and convert them into strings and return them. The latter provides compilation and parsing capabilities for .vue files, and can convert .vue files into rendering functions.
- Define the rendering function
Vue3 recommends using the render function instead of the template template. You can define the rendering function through the createRenderer function. The createRenderer function returns an object that contains the rendering function and other related information.
const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer();
const app = require('./app');
renderer.renderToString(app).then((html) => {
console.log(html);
}).catch((err) => {
console.error(err);
});Among them, app is a Vue instance, which needs to be initialized through the createApp function first, and then mounted on the DOM element. Next, you can use the rendering function to render the app.
- Create router and container components
Tools such as vue-router and vuex need to be used under SSR to support component and state management corresponding to different routes. Before doing this, you need to create the router and container components.
const { createRouter } = require('vue-router');
const App = require('./App.vue');
const router = createRouter({
routes: [
{ path: '/', component: App }
]
});- Write code to implement SSR
const express = require('express');
const { createSSRApp } = require('vue');
const server = express();
const template = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 SSR</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
`;
const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer({
template: template
});
server.use(express.static('dist'));
server.get('*', async (req, res) => {
const app = createSSRApp(require('./src/App.vue'));
const router = require('./src/router').default;
app.use(router);
const html = await renderer.renderToString(app);
res.send(html);
});
server.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});When writing code to implement SSR, you need to create an express project and use the createSSRApp function to create a Vue instance, and then Routers, state management, createRenderer functions, etc. are all integrated.
3. Notes on SSR
When using SSR to implement page rendering, you need to pay attention to the following points:
- Need to rely on various external resources, including static Resources, data interfaces, databases, caches and file storage, etc. At the same time, it also brings more challenges to operation and maintenance students.
- Since server-side rendering requires at least as much time as rendering, the performance of SSR is mainly affected by server and network bandwidth, while the overall performance of the client will not have much impact.
- SSR needs to convert Vue components into string format for rendering, so it requires conversion and compilation of Vue components, which will bring a certain amount of consumption and compilation time.
In short, SSR is a relatively new technology, and you need to pay attention to the handling of various problems in terms of performance and use. You can make technology selection and actual use according to your own needs. Especially in large-scale real-time systems, special attention needs to be paid to the security, maintainability, and performance of SSR.
The above is the detailed content of SSR function in Vue3: implementing server-side rendering. For more information, please follow other related articles on the PHP Chinese website!
vue中props可以传递函数吗Jun 16, 2022 am 10:39 AMvue中props可以传递函数；vue中可以将字符串、数组、数字和对象作为props传递，props主要用于组件的传值，目的为了接收外面传过来的数据，语法为“export default {methods: {myFunction() {// ...}}};”。
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AMreact与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
