Vue3 createSSRApp()Function Details

Vue3 全局 APIVue3 Global API

createSSRApp()is a function specifically used for server-side rendering (SSR, Server-Side Rendering).

createSSRApp()By generating HTML content on the server side, it improves the page's initial loading speed and SEO performance.

andcreateApp()Compared with,createSSRApp()it is more suitable for application scenarios that require server-side rendering.

1. What is Server-Side Rendering (SSR)?

Server-side rendering (SSR) is the process of generating HTML on the server and then sending the generated HTML to the client for display. Unlike traditional client-side rendering (CSR, Client-Side Rendering), SSR can help improve the page's initial loading speed and improve search engine optimization (SEO).

In client-side rendering, the browser first downloads an empty HTML file, and then dynamically generates page content through JavaScript. In server-side rendering, the server has already generated the complete HTML content, and the browser only needs to display that content.

2. createSSRApp()The role of

In Vue.js 3,createApp()is the standard function for creating client-side Vue applications. AndcreateSSRApp()is acreateApp()variant, specifically used to create Vue applications that support server-side rendering.

createSSRApp()The main role is to generate the HTML content of the Vue application on the server side and send it to the client. It ensures the consistency of the Vue application on the server side and the client side, thus avoiding the problem of inconsistent rendering results between the client and the server.

3. UsagecreateSSRApp()Create an application

UsingcreateSSRApp()The steps for creating a Vue application are similar to usingcreateApp()but special attention needs to be paid to some SSR-related configurations.

3.1 Basic Usage

Example

// Import createSSRApp
import { createSSRApp } from 'vue';

// Import the root component
import App from './App.vue';

// Create an SSR application
const app = createSSRApp(App);

// Mount the application
app.mount('#app');

In this example, we usecreateSSRApp()created a Vue application that supports server-side rendering and mounted it to the specified DOM element.

3.2 Differences between server-side and client-side

On the server side and the client side,createSSRApp()the behavior is different:

  • Server side: On the server side,createSSRApp()it will generate the HTML content of the Vue application and send it to the client.
  • Client side: On the client side,createSSRApp()it will take over the HTML content generated by the server and activate it into an interactive Vue application.

3.3 Configuring an SSR Application

When configuring an SSR application, you need to note the following points:

  • Avoid using client-specific APIs on the server side: For example,windowordocumentthe object is not available on the server side.
  • UseonServerPrefetchhooks: When rendering on the server side, you can useonServerPrefetchhooks to pre-fetch data.

Example

export default {
  async onServerPrefetch() {
    // Pre-fetch data on the server side
    this.data = await fetchData();
  }
};

4. createSSRApp()andcreateApp()Differences

Feature createApp() createSSRApp()
Rendering Environment Client-Side Rendering (CSR) Server-Side Rendering (SSR)
Initial Loading Speed Slower, relies on client-side JavaScript execution Faster, the server has already generated the HTML
SEO Poor, search engines have difficulty crawling dynamic content Better, search engines can crawl the complete HTML
Applicable Scenarios Single-page application (SPA) Applications that require SEO and fast loading

Vue3 全局 APIVue3 Global API

Other Extensions