Vue excellent practice - implementing SSR rendering from 0 to 1

In Web development, SSR rendering (Server Side Rendering) is a very critical technology. It can complete the initial rendering of the page on the server, and then pass the rendered HTML file to the client for display. Compared with traditional client-side rendering (CSR), SSR rendering can improve the first-screen loading speed of web pages, search engine optimization capabilities, etc. This article will introduce how to implement SSR rendering through the Vue framework.

1. Create Vue project
   First, we need to create a basic Vue project. Run the following command in the terminal:

vue create my-ssr-app

With this command, we can quickly create a Vue base project, and then enter the project directory through the command:

cd my-ssr-app

2. Add SSR dependencies
   Next, we need to add SSR-related dependencies. Enter the following commands in the terminal:

npm install --save vue vue-server-renderer express

• vue: Dependencies of the Vue framework itself.
• vue-server-renderer: Vue’s SSR renderer.
• express: A web application framework based on Node.js.

The above command will automatically install dependencies into the package.json file of the project.

3. Modify the Vue entry file
   In the src directory, we can find the main.js file, which is the entry file of the Vue framework. We need to make modifications to support SSR rendering. First, we need to convert the Vue instance into a factory function so that a new instance can be created for each request during SSR. Change the original:

new Vue({
  render: h => h(App),
}).$mount('#app')

to:

export function createApp() {
  return new Vue({
    render: h => h(App)
  })
}

Then, we need to export the createApp function, which will be used when creating the server script later.

4. Create server script
   In the project root directory, we need to create a server script. Create a file named server.js in the project root directory. In this file, we need to import the relevant dependencies, and then create a simple server:

const express = require('express')
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'))
const template = require('fs').readFileSync('./index.html', 'utf-8')

server.use('/dist', express.static('./dist'))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`))
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

This code implements a simple Express server, which will ./dist Static files in the directory are exposed under the /dist route, and for all route requests (*), use the createBundleRenderer method from vue- Read the server bundle from the ssr-server-bundle.json file, map the rendered HTML text to a basic HTML template, and return the final result to the client.

5. Build and start the server
   Run the following command in the terminal:

npm run build
npm run serve

Among them, the npm run build command will The code in the src directory is built into server bundle and client bundle, and the built results are stored in the dist directory. npm run serveThe command will start the server and listen to port 3000. Enter http://localhost:3000 in the browser to access the SSR-rendered page.

Here, we have completed a simple Vue SSR rendering practice. Of course, there are many specific operations and details of SSR rendering that require in-depth understanding and practice. This article only provides a basic introductory example. I hope this article can help everyone master Vue SSR rendering.

The above is the detailed content of Vue excellent practice - implementing SSR rendering from 0 to 1. For more information, please follow other related articles on the PHP Chinese website!