Nuxt.js实战:Vue.js的服务器端渲染框架

简介: Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器

创建Nuxt.js项目

首先,确保你已经安装了Node.js和yarn或npm。然后,通过命令行创建一个新的Nuxt.js项目:

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

在创建过程中,你可以选择是否需要UI框架、预处理器等选项,根据需要配置。

目录结构

Nuxt.js遵循特定的目录结构,其中一些关键目录如下:

├── .nuxt/                # 自动生成的文件,包含编译后的代码和配置
├── assets/               # 用于存放未编译的静态资源,如CSS、图片、字体
├── components/           # 自定义Vue组件
├── layouts/              # 应用的布局文件,定义页面的通用结构
│   └── default.vue       # 默认布局
├── middleware/           # 中间件文件
├── pages/                # 应用的路由和视图,每个文件对应一个路由
│   ├── index.vue         # 默认首页
│   └── [slug].vue        # 动态路由示例
├── plugins/              # 自定义Vue.js插件
├── static/               # 静态资源,会被原样复制到输出目录
├── store/                # Vuex状态管理文件
│   ├── actions.js        # Vuex actions
│   ├── mutations.js      # Vuex mutations
│   ├── getters.js        # Vuex getters
│   └── index.js          # Vuex store入口文件
├── nuxt.config.js        # Nuxt.js配置文件
├── package.json          # 项目依赖和脚本
└── yarn.lock             # 或者npm.lock,记录依赖版本
  • .nuxt/:这个目录是自动生成的,包含了编译后的代码,一般不需要直接修改。
  • assets/:存放未编译的静态资源,比如CSS、JavaScript和图片。在构建时,Nuxt.js会处理这些资源。
  • components/:存储自定义Vue组件,可以复用在应用的不同部分。
  • layouts/:定义页面的布局,可以有一个默认布局,也可以有多个特定布局。
  • pages/:每个文件对应一个路由,文件名就是路由名称。动态路由使用方括号[]表示。
  • middleware/:放置自定义的中间件,可以在页面渲染前后执行逻辑。
  • plugins/:自定义Vue.js插件的入口文件。
  • static/:直接复制到构建输出目录,不做任何处理,常用于存放robots.txt或favicon.ico等。
  • store/:Vuex状态管理的目录,存放actions、mutations、getters和整个store的入口文件。
  • nuxt.config.js:Nuxt.js的配置文件,用于定制项目的设置。
  • package.json:项目依赖和脚本配置。
  • yarn.locknpm.lock:记录项目依赖的精确版本,确保不同环境下的依赖一致性。

页面渲染

pages/目录下创建一个index.vue文件,这是应用的首页:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{
  { message }}</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    
    // 这里可以在服务器端获取数据
    // 返回的数据会作为data的默认值
    return {
     message: 'Data fetched on server' };
  }
};
</script>

Nuxt.js 页面渲染的过程分为两个主要阶段:服务器端渲染 (SSR) 和客户端渲染 (CSR)。以下是Nuxt.js页面渲染的详细步骤:

初始化:

用户在浏览器中输入URL并发送请求到服务器。
服务器接收到请求后,开始处理。

路由解析:

Nuxt.js 使用 nuxt.config.js 中的 routes 配置(如果存在)或自动从 pages/ 目录生成路由。
对应的页面文件被识别,例如 pages/index.vuepages/about.vue

数据预取:

Nuxt.js 查找页面组件中的 asyncDatafetch 方法(如果存在)。
这些方法会在服务器端运行,用于从API或其他数据源获取数据。
数据获取后,会被序列化并注入到页面模板中。

模板渲染:

Nuxt.js 使用 Vue.js 的渲染引擎将组件和预取的数据转换为HTML字符串。
HTML字符串中包含了客户端需要的所有初始数据,以JSON格式内联在<script>标签中。

返回HTML:

服务器将生成的HTML响应发送回客户端(浏览器)。
客户端初始化:

浏览器接收到HTML后,开始解析和执行内联的JavaScript。
Nuxt.js客户端库(nuxt.js)被加载并初始化。

客户端渲染:

客户端库接管渲染,Vue.js实例被创建,数据从内联的JSON注入到Vue实例。
页面完成初始渲染,用户可以看到完整的页面内容。
此时,页面是交互式的,用户可以触发事件和导航。

后续导航:

当用户导航到其他页面时,Nuxt.js 使用客户端路由(Vue Router)进行无刷新跳转。
如果新页面需要数据,asyncDatafetch 方法会在客户端运行,获取新的数据并更新视图。

SSG(静态站点生成):

在开发之外,可以使用 nuxt generate 命令生成静态HTML文件。
每个页面都会被预渲染为独立的HTML文件,其中包含所有必要的数据和资源。

使用asyncData

asyncData方法是Nuxt.js特有的,它允许你在服务器端预取数据并在客户端复用这些数据。在上面的示例中,我们简单地更改了message的值,但在实际应用中,你可能会在这里调用API获取数据。

中间件

中间件(Middleware)是一种功能,允许你在路由变更前后执行特定的逻辑。中间件可以全局、页面级或布局级使用,以处理诸如认证、数据预加载、路由守卫等任务。

1. 全局中间件

全局中间件是在nuxt.config.js文件中配置的,影响应用中的所有页面:

// nuxt.config.js
export default {
   
  // ...
  router: {
   
    middleware: ['globalMiddleware1', 'globalMiddleware2'] // 可以是字符串数组
  }
};
中间件文件通常位于middleware/目录下,例如middleware/globalMiddleware1.js:

javascript
// middleware/globalMiddleware1.js
export default function (context) {
   
  // context 包含 req, res, redirect, app, route, store 等信息
  console.log('Global Middleware 1 executed');
}

2. 页面级中间件

页面级中间件只影响特定的页面。在页面组件中声明中间件:

// pages/about.vue
export default {
   
  middleware: 'pageMiddleware' // 可以是字符串或函数
};
对应的中间件文件位于middleware/目录,例如middleware/pageMiddleware.js:

javascript
// middleware/pageMiddleware.js
export default function (context) {
   
  console.log('Page Middleware executed');
}

3. 布局级中间件

布局级中间件类似于页面级,但作用于使用该布局的所有页面。在布局组件中声明中间件:

// layouts/default.vue
export default {
   
  middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};
对应的中间件文件位于middleware/目录:

javascript
// middleware/layoutMiddleware1.js
export default function (context) {
   
  console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
   
  console.log('Layout Middleware 2 executed');
}

中间件的上下文(Context)

中间件函数接收一个上下文对象作为参数,该对象包含以下属性:

  • req(HTTP请求对象,仅在服务器端有效)
  • res(HTTP响应对象,仅在服务器端有效)
  • redirect(用于重定向的函数)
  • app(Vue实例)
  • route(当前路由信息)
  • store(Vuex Store,如果已启用)
  • payload(如果有asyncData返回的数据)

中间件可以顺序执行,每个中间件可以决定是否继续执行链中的下一个中间件,或者通过redirect函数中断路由。

动态路由

Nuxt.js支持动态路由,这对于处理如博客文章、用户资料等具有动态ID的内容非常有用。在pages/目录下创建一个动态路由文件,如[id].vue:

<!-- pages/post/[id].vue -->
<template>
  <div>
    <h1>{
  { post.title }}</h1>
    <p>{
  { post.content }}</p>
  </div>
</template>

<script>
export default {
    
  async asyncData({
     params, $axios }) {
    
    const response = await $axios.$get(`/api/posts/${
      params.id}`);
    return {
     post: response.post };
  }
};
</script>

这里的[id]表示动态参数,asyncData会自动处理这个参数并获取对应ID的博客文章。

布局
布局允许你定义全局或特定页面的通用结构。在layouts/目录下创建一个default.vue文件:

<!-- layouts/default.vue -->
<template>
  <div>
    <header>
      <nav>
        <!-- 导航链接等 -->
      </nav>
    </header>
    <main>
      <nuxt /> <!-- 这里将插入页面内容 -->
    </main>
    <footer>
      <!-- 底部信息等 -->
    </footer>
  </div>
</template>

默认情况下,所有页面都将使用此布局。如果你想为特定页面设置不同的布局,可以在页面组件中指定:

// pages/about.vue
export default {
   
  layout: 'custom' // 在layouts/下创建custom.vue
};
插件与库集成
Nuxt.js支持Vue.js的插件,你可以在nuxt.config.js中配置:

javascript
// nuxt.config.js
export default {
   
  plugins: [
    {
    src: '~plugins/vuetify.js', ssr: true },
    {
    src: '~plugins/vue-chartjs.js', mode: 'client' } // 仅在客户端运行
  ]
};

然后在plugins/目录下创建相应的文件,如vuetify.js

// plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

配置与优化

Nuxt.js 配置文件(nuxt.config.js)

nuxt.config.js 是Nuxt应用的主要配置文件,用于定制化应用的行为。以下是一些常用的配置项:

  • 模式(mode):设置应用的运行模式,可选值有 'spa'(单页面应用)、'universal'(服务端渲染)和 'static'(静态生成)。默认为 'universal'。
  • head:配置页面的
部分,如标题、元数据、链接等。
  • css:指定全局CSS文件,可以是文件路径数组。
  • build:配置构建过程,如transpile、extractCSS、extend等。例如,可以在这里添加Babel插件或调整Webpack配置。
  • router:自定义路由配置,如base路径、模式等。
  • axios:配置axios模块,包括基础URL、代理设置等。
  • plugins:注册全局Vue插件,可以指定在客户端或服务器端加载。
  • modules:加载外部模块,如@nuxtjs/axios、@nuxtjs/proxy等。
  • env:定义环境变量,这些变量将在构建时注入到客户端和服务器端。
  • // nuxt.config.js
    export default {
       
      // 项目名称
      name: 'my-nuxt-app',
    
      // 项目模式:spa, universal, static
      mode: 'universal', // 默认值,支持服务器端渲染
    
      // 应用元信息
      head: {
       
        title: 'My Nuxt App',
        meta: [
          {
        charset: 'utf-8' },
          {
        name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {
        hid: 'description', name: 'description', content: 'App description' }
        ],
        link: [{
        rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
      },
    
      // CSS样式
      css: [
        '@/assets/css/main.css'
      ],
    
      // 路由配置
      router: {
       
        base: '/my-nuxt-app/', // 应用的基础路径
        extendRoutes(routes, resolve) {
       
          // 手动扩展或修改路由
        }
      },
    
      // 构建配置
      build: {
       
        transpile: [/^my-vue-component/], // 需要转译的模块
        vendor: ['lodash'], // 公共库,提前打包
        extractCSS: true, // 提取CSS到单独文件
        optimization: {
       
          splitChunks: {
       
            cacheGroups: {
       
              vendors: {
       
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                filename: 'vendors.js'
              }
            }
          }
        }
      },
    
      // Axios配置
      axios: {
       
        baseURL: process.env.BASE_URL || 'http://localhost:3000/api', // API基础URL
        browserBaseURL: 'https://api.example.com' // 客户端的API基础URL
      },
    
      // Plugins
      plugins: [
        {
        src: '@/plugins/vue-my-plugin', ssr: false } // 异步加载的插件,ssr: false 表示仅客户端加载
      ],
    
      // Modules
      modules: [
        '@nuxtjs/axios', // 安装并配置axios模块
        '@nuxtjs/pwa' // 安装并配置PWA模块
      ],
    
      // 环境变量
      env: {
       
        apiKey: 'your-api-key',
        apiUrl: 'https://api.example.com'
      },
    
      // Vuex Store配置
      store: true, // 自动创建Vuex store
      loading: {
        color: '#3B8070' }, // 加载指示器颜色
    
      // 服务端中间件
      serverMiddleware: [
        {
        path: '/api', handler: '~/api/index.js' } // 使用自定义的服务器端中间件
      ],
    
      // 静态生成配置
      generate: {
       
        dir: 'dist', // 输出目录
        fallback: true, // 对未预渲染的动态路由生成404页面
        routes: () => ['/about', '/contact'] // 预渲染的指定路由
      }
    };
    

    优化策略

    • 异步数据预取(asyncData/fetch):利用asyncData或fetch方法在服务器端预取数据,减少客户端渲染的负担。
    • 代码拆分:Nuxt.js自动进行代码拆分,确保只有当路由被访问时才加载相关代码。
    • 静态站点生成(SSG):使用nuxt generate命令生成静态HTML文件,适用于内容不频繁变动的站点,提高加载速度和SEO友好性。
    • 缓存策略:利用HTTP缓存策略,如ETag、Last-Modified,减少重复请求。
    • Vue.js优化:确保Vue组件的优化,如避免无用的watcher、使用v-once减少重新渲染等。
    • 图片优化:使用正确的图片格式(如WebP),并确保图片尺寸适当,使用懒加载技术。
    • Service Worker:集成PWA支持,使用Service Worker进行离线缓存和推送通知。
    • Tree Shaking:确保你的依赖库支持Tree Shaking,以剔除未使用的代码。
    • 分析与监控:使用nuxt build --analyze或集成第三方工具(如Google Lighthouse)进行性能分析,持续监控应用性能。

    静态站点生成(SSG)

    Nuxt.js 的静态站点生成(Static Site Generation, SSG)是通过 nuxt generate 命令实现的。这个命令会遍历应用的路由,为每个路由生成一个预渲染的 HTML 文件,这些文件可以直接部署到任何静态文件托管服务上。以下是关于SSG的一些关键点:

    1. 配置: 在 nuxt.config.js 文件中,可以配置 generate 选项来控制静态生成的行为:

       export default {
       
         generate: {
       
           dir: 'dist', // 输出目录,默认为dist
           fallback: true, // 对未预渲染的动态路由生成404页面
           routes: () => ['/about', '/contact'], // 预定义的静态路由
           exclude: ['/admin/*'], // 排除某些路由
           interval: 5000, // 生成间隔,单位毫秒
           concurrency: 10 // 并发生成的路由数量
         }
       }
    

    2. 生成: 运行 npm run generateyarn generate 来启动静态生成过程。Nuxt.js 会根据 generate.routes 里的配置生成对应的 HTML 文件。如果没有显式定义,它会自动扫描 pages/ 目录下的所有文件来生成路由。

    3. 数据预取: 在页面组件中,可以使用 asyncData 或 fetch 方法来预取数据。这些数据会在生成静态页面时被注入到 HTML 中,使页面在客户端加载时无需额外请求:

       // pages/about.vue
       export default {
       
         async asyncData({
        params, $axios }) {
       
           const aboutInfo = await $axios.$get('/api/about')
           return {
        aboutInfo }
         }
       }
    

    4. 中间件处理:服务器端的中间件不会在SSG过程中执行,因为SSG是在没有服务器环境的情况下生成静态文件。所以,如果需要在生成时执行某些逻辑,最好在 asyncData 或 fetch 中处理。

    5. 部署: 生成的静态文件可以部署到任何静态文件托管服务,如 Netlify、Vercel、GitHub Pages 或 AWS S3。这些服务通常不需要运行任何服务器端代码,只需上传生成的 dist 文件夹即可。

    6. SEO 优化: SSG 提高了SEO,因为搜索引擎爬虫可以读取预渲染的 HTML 内容,而无需等待JavaScript执行。

    7. 动态路由: 对于动态路由,Nuxt.js 会尝试生成所有可能的组合。如果无法预测所有可能的动态路由,可以手动在 generate.routes 中指定,或者使用 generate.includePaths 和 generate.excludePaths 来控制。

    8. 404 页面: 设置 generate.fallback 为 true 会为未预渲染的动态路由生成一个404页面,当用户访问这些路由时,Nuxt.js 会尝试在客户端渲染它们。

    运行nuxt generate命令,Nuxt.js将生成静态HTML文件。

    验证和错误处理

    验证(Validation)

    验证通常涉及表单数据或API请求的输入验证。Nuxt.js本身不直接提供验证库,但你可以集成像Vuelidate、vee-validate这样的第三方库,或者使用TypeScript等进行类型检查。

    使用Vee-Validate

    1. 安装: 首先,你需要安装vee-validate库:

       npm install vee-validate
    

    2. 配置: 在nuxt.config.js中添加Vue插件配置:

       export default {
       
         plugins: [{
        src: '~/plugins/vee-validate', ssr: false }]
       };
    

    3. 创建插件: 在plugins/vee-validate.js中配置Vee-Validate:

       import Vue from 'vue';
       import VeeValidate from 'vee-validate';
    
       Vue.use(VeeValidate);
    

    4. 使用: 在你的组件中使用Vee-Validate进行表单验证:

       <template>
         <form @submit.prevent="submitForm">
           <input v-model="email" name="email" v-validate="'required|email'"/>
           <span>{
      { errors.first('email') }}</span>
           <button type="submit">Submit</button>
         </form>
       </template>
       <script>
       export default {
        
         data() {
        
           return {
        
             email: ''
           };
         },
         methods: {
        
           submitForm() {
        
             this.$validator.validateAll().then(result => {
        
               if (result) {
        
                 // 验证成功逻辑
               } else {
        
                 // 验证失败逻辑
               }
             });
           }
         }
       };
       </script>
    

    错误处理

    Nuxt.js提供了几种处理错误的方法,包括全局错误处理和页面特定的错误处理。

    全局错误处理

    • 自定义错误页面: 在layouts目录下创建error.vue文件,用于自定义错误页面布局。
    • 捕获全局错误: 在nuxt.config.js中配置error属性来捕获全局错误:
       export default {
       
         error: {
       
           // 页面不存在时的处理
           pageNotFound({
        error, store, app, env }) {
       
             // 处理逻辑
           },
           // 任何错误的处理
           handler(error, {
        error: nuxtError, store, app, env }) {
       
             // 处理逻辑
           }
         }
       };
    

    页面特定错误处理

    在页面组件中,可以使用asyncData或fetch方法的try-catch结构来处理错误:

    export default {
       
      async asyncData({
        params, error }) {
       
        try {
       
          const data = await fetchSomeData(params.id);
          return {
        data };
        } catch (err) {
       
          error({
        statusCode: 500, message: '数据获取失败' });
        }
      }
    };
    

    API请求错误处理

    对于API请求,如果你使用了@nuxtjs/axios模块,可以在请求拦截器中统一处理错误:

    // plugins/axios.js
    import axios from 'axios';
    import {
        toast } from '~/utils/toast';
    
    axios.interceptors.response.use(null, (error) => {
       
      const {
        status } = error.response;
      if (status === 401) {
       
        // 处理未授权错误
      } else if (status >= 500) {
       
        // 处理服务器错误
        toast.error('服务器错误');
      }
      return Promise.reject(error);
    });
    
    export default ({
        $axios }, inject) => {
       
      inject('axios', $axios);
    };
    

    确保在nuxt.config.js中注册此插件。

    Vue生态系统集成

    Vue Router:

    Nuxt.js 自动为你的应用生成了一个基于文件结构的路由系统。路由配置通常不需要手动编写,但可以通过 nuxt.config.jsrouter 属性进行扩展。

    Vuex:

    Nuxt.js 自动创建了一个 Vuex store。在 store 目录下,你可以创建模块化的 state、mutations、actions 和 getters。例如,创建一个 store/modules/users.js 文件来管理用户数据。

       // store/modules/users.js
       export const state = () => ({
       
         users: []
       });
    
       export const mutations = {
       
         SET_USERS(state, payload) {
       
           state.users = payload;
         }
       };
    
       export const actions = {
       
         async fetchUsers({
        commit }) {
       
           const response = await this.$axios.get('/api/users');
           commit('SET_USERS', response.data);
         }
       };
    

    Vue CLI:

    Nuxt.js 提供了自己的构建工具,但它也基于 Vue CLI。这意味着你可以使用类似 Vue CLI 的命令行工具,如 npx nuxt generate(静态生成)或 npx nuxt build(构建应用)。

    Babel:

    Nuxt.js 默认配置了 Babel,以便支持最新的 JavaScript 特性。你通常不需要手动配置 Babel,除非有特殊需求。

    TypeScript:

    若要使用 TypeScript,设置 typescript: true 在 nuxt.config.js 中,Nuxt.js 会自动配置 TypeScript 支持。

    ESLint:

    为了代码质量检查,可以在项目中安装 ESLint 并配置 .eslintrc.js。Nuxt.js 提供了 @nuxt/eslint-module 插件来简化集成。

       // nuxt.config.js
       module.exports = {
       
         buildModules: [
           '@nuxt/typescript-build',
           '@nuxtjs/eslint-module' // 添加 ESLint 集成
         ],
         eslint: {
       
           fix: true, // 自动修复错误
           ignoreDuringBuilds: true // 忽略构建期间的错误
         }
       };
    

    VueUse:

    VueUse 是一个包含各种实用功能的 Vue 用例库。要集成,首先安装 @vueuse/core,然后在组件中导入并使用功能。

       npm install @vueuse/core
    
       // 在组件中
       import {
        useCounter } from '@vueuse/core';
    
       export default {
       
         setup() {
       
           const count = useCounter(0); // 使用计数器功能
           // ...
         }
       };
    

    Vue插件:

    可以通过 nuxt.config.js 的 plugins 配置项来全局注册 Vue 插件。例如,集成 Vue Toastify 用于显示通知:

       // nuxt.config.js
       export default {
       
         plugins: [{
        src: '~plugins/toastify.js', ssr: false }]
       };
    
       // plugins/toastify.js
       import Vue from 'vue';
       import Toastify from 'toastify-js';
    
       Vue.use(Toastify);
    

    使用Nuxt.js工作流

    Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器,nuxt generate生成静态文件。

    性能优化

    1. 静态生成(SSG): 使用 nuxt generate 命令生成预渲染的HTML文件,这可以大大提高首屏加载速度,对SEO友好。

    2. 代码分割: Nuxt.js 默认会进行代码分割,将应用分为多个小块,只加载当前页面需要的代码,减少了初始加载的体积。

    3. 延迟加载(Lazy Loading): 对于大型应用,可以考虑延迟加载组件或模块,只在需要时加载。可以使用或结合async组件来实现。

    4. 优化资源:

    • 图片:使用正确的格式(如WebP),压缩图片,使用懒加载(),或者使用nuxt-image或nuxt-picture组件。
    • CSS:提取CSS到单独文件,减少内联样式。
    • JS:利用Tree Shaking剔除未使用的代码。
    1. 异步数据预取: 使用 asyncData 或 fetch 方法预加载数据,确保数据在渲染之前已经准备好。

    2. 服务端缓存: 使用 nuxt-ssr-cache 模块来缓存服务器端渲染的结果,减少不必要的API调用。

    3. HTTP缓存: 设置正确的缓存头(如Cache-Control),利用浏览器缓存静态资源。

    4. 路由守卫: 使用 beforeRouteEnter 等路由守卫,避免在不需要时加载数据。

    5. 减少HTTP请求: 合并多个CSS和JS文件,减少HTTP请求数量。

    6. 优化API性能: 优化后端接口,减少响应时间,使用分页、过滤和缓存策略。

    7. 利用CDN: 将静态资源托管在CDN上,加快全球用户的加载速度。

    8. 优化Vuex状态管理: 避免不必要的计算属性和监听器,减少状态改变的开销。

    9. 性能审计: 使用Lighthouse、Chrome DevTools或其他性能审计工具定期检查应用性能,并根据报告进行改进。

    10. Service Worker: 如果适用,集成PWA特性,利用Service Worker进行离线缓存和资源预加载。

    11. 模块优化: 选择性能高效的第三方模块,并确保它们已经针对SSR进行了优化。

    2500G计算机入门到高级架构师开发资料超级大礼包免费送!

    相关文章
    |
    19天前
    |
    搜索推荐 Java 索引
    Java中的服务器端渲染(SSR)
    Java中的服务器端渲染(SSR)
    |
    4天前
    |
    JavaScript 前端开发 搜索推荐
    服务器端渲染技术SSR与ISR:深入解析与应用
    【7月更文挑战第20天】服务器端渲染(SSR)和增量静态再生(ISR)作为现代Web开发中的两种重要渲染技术,各有其独特的优势和适用场景。在实际应用中,开发者应根据具体需求和条件选择合适的渲染模式。无论是追求极致的页面加载速度和SEO优化,还是实现内容的实时更新,SSR和ISR都能提供有效的解决方案。通过深入理解这些技术的工作原理和应用场景,开发者可以构建出更加高效、可靠和用户体验优异的Web应用。
    若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
    若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
    |
    19天前
    |
    JavaScript
    vue 渲染树型数据(含树型数据转化为一维数组的方法,包括每个节点的深度和深度列表)
    vue 渲染树型数据(含树型数据转化为一维数组的方法,包括每个节点的深度和深度列表)
    17 0
    |
    19天前
    |
    监控 JavaScript 前端开发
    JavaScript与Nest.js:打造高性能的服务器端应用
    Nest.js是Node.js的渐进式框架,融合OOP、FP和FRP,提供模块化、装饰器和依赖注入,助建高性能服务器应用。选择Nest.js的原因包括模块化设计、简洁的装饰器API和高性能基础(如Express或Fastify)。开始使用需安装Node.js和`@nestjs/cli`,创建项目、编写控制器。深入学习涉及模块化、服务的依赖注入及中间件。安全性优化涵盖HTTPS、CORS策略、限流和性能监控。
    17 0
    |
    20天前
    |
    JavaScript API
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    |
    20天前
    |
    JavaScript
    vue v-for循环渲染动态ref表单校验的实现技巧
    vue v-for循环渲染动态ref表单校验的实现技巧
    60 0
    |
    20天前
    |
    JavaScript 前端开发 测试技术
    |
    20小时前
    |
    弹性计算 运维 安全
    阿里云ecs使用体验
    整了台服务器部署项目上线
    |
    2天前
    |
    弹性计算 开发者
    阿里云2核4G云服务器租用费用,轻量和ECS实例规格整理
    阿里云2核4G服务器概览: - ECS u1企业专享:2核4G,5M带宽,80G ESSD盘,199元/年,续费同价。 - 轻量应用:2核4G,4M带宽,60GB ESSD,298元/年,新人特惠。 - ECS u1实例基于Intel Xeon Platinum处理器,提供稳定算力。 - **注意:** 企业用户优先选择199元方案,个人开发者适合轻量应用服务器。
    20 5

    热门文章

    最新文章