博客
首页
文章
娱乐
友链
留言板
关于

从Vue迁移到Nuxt实现服务端渲染：构建SEO友好的博客系统（四）

发表于 阅读量 1
字数统计 0 字 阅读时长 0 分钟 技术杂谈

在前三篇文章中，我们讨论了从Vue迁移到Nuxt的背景动机、基础架构设计、路由系统迁移和状态管理等内容。本文将深入探讨组件迁移过程中的具体实践，特别关注接口调用模式的转换以及一些高级组件的实现技巧。

目录

  1. 接口调用模式重构
  2. 组件生命周期适配
  3. 复杂组件迁移案例：抽屉组件
  4. 组件懒加载与性能优化
  5. TypeScript类型增强
  6. 客户端与服务端数据共享问题
  7. 实用调试与问题排查技巧

1. 接口调用模式重构

在Vue SPA项目中，我们通常使用Axios处理API请求。而在Nuxt中，我们需要考虑服务端渲染环境，重新设计API调用模式。

自定义API组合式函数

我们创建了一个强大的useApi组合式函数，它封装了Nuxt的useFetch，并处理了服务端和客户端环境的差异：

typescript 复制代码 
// composables/useApi.ts
export const useApi = () => {
  const config = useRuntimeConfig();
  
  // 创建基础请求函数
  const baseRequest = async (url: string, options: any = {}) => {
    const baseURL = config.public.apiBase;
    
    // 设置请求头
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers
    };
    
    // 处理客户端特有的认证
    if (process.client) {
      const token = localStorage.getItem('token');
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }
    }
    
    try {
      // 使用Nuxt内置的useFetch
      const response = await useFetch(url, {
        baseURL,
        headers,
        ...options
      });
      
      return response.data.value;
    } catch (error: any) {
      console.error('API请求错误:', error);
      throw error;
    }
  };
  
  // 返回各个模块的API
  return {
    article: {
      getList: (params) => baseRequest('/api/articles', { method: 'GET', params }),
      getDetail: (id) => baseRequest(`/api/articles/${id}`, { method: 'GET' }),
      // ...其他文章相关API
    },
    comment: {
      getList: (articleId) => baseRequest(`/api/comments/${articleId}`, { method: 'GET' }),
      // ...其他评论相关API
    },
    // ...其他API模块
  };
};

处理请求缓存与数据新鲜度

Nuxt的useFetch提供了内置的请求缓存，这既是优势也是挑战。对于频繁变化的数据，我们需要适当控制缓存：

typescript 复制代码 
// 页面组件中使用API
const { data: articles, refresh } = await useAsyncData(
  'home-articles',  // 唯一键名
  () => useApi().article.getList({ page: 1, pageSize: 10 }),
  {
    server: true,     // 服务端获取数据
    lazy: false,      // 不延迟加载
    immediate: true,  // 立即执行
    watch: [],        // 不监听依赖项变化
    transform: (data) => {
      // 可以在这里转换数据
      return data.recordList || [];
    },
    default: () => [], // 默认值
    // 控制缓存有效期
    getCachedData: (key) => {
      // 在这里可以实现自定义缓存逻辑
      return null;  // 返回null则重新获取数据
    }
  }
);

// 手动刷新数据
function updateData() {
  refresh();
}

2. 组件生命周期适配

在服务端渲染应用中，组件生命周期的行为与SPA有很大不同。只有setup和serverPrefetch在服务端执行，其他生命周期钩子仅在客户端执行。

避免生命周期中的DOM操作

vue 复制代码 
<script setup>
// 错误的方式 - 在setup中直接操作DOM
const element = document.querySelector('.my-element'); // 服务端会报错

// 正确的方式 - 使用onMounted并检查客户端环境
onMounted(() => {
  if (process.client) {
    const element = document.querySelector('.my-element');
    // 安全地操作DOM
  }
});

// 使用ref获取元素引用
const elementRef = ref(null);
onMounted(() => {
  if (process.client && elementRef.value) {
    // 安全地操作DOM
  }
});
</script>

<template>
  <div ref="elementRef">内容</div>
</template>

处理服务端特有的数据获取

对于需要在服务端获取的数据，我们可以使用useAsyncData或在setup中直接获取：

vue 复制代码 
<script setup>
// 方式1：使用useAsyncData（推荐）
const { data: blogInfo } = await useAsyncData('blog-info', () => {
  return useApi().blogInfo.getConfig();
});

// 方式2：直接在setup中获取
const blogInfo = ref(null);
if (process.server) {
  try {
    blogInfo.value = await useApi().blogInfo.getConfig();
  } catch (error) {
    console.error('获取博客信息失败', error);
  }
}
</script>

3. 复杂组件迁移案例：抽屉组件

侧边抽屉是一个常见的复杂UI组件，涉及到动画、状态管理和DOM操作。让我们看看如何在Nuxt中实现它。

原始实现与问题

在原Vue项目中，我们使用了Naive UI的抽屉组件，它处理了所有动画和状态管理。迁移到Nuxt后，我们需要自行实现这些功能：

vue 复制代码 
<!-- 原实现的问题 -->
<template>
  <n-drawer v-model:show="isShow" :width="280">
    <!-- 抽屉内容 -->
  </n-drawer>
</template>

Nuxt优化实现

我们在Nuxt中重新实现了抽屉组件，使用CSS过渡和状态管理：

vue 复制代码 
<template>
  <div>
    <ClientOnly>
      <!-- 遮罩层 -->
      <div class="drawer-overlay" :class="{ 'active': isOpen }" @click="closeDrawer"></div>
      
      <!-- 抽屉面板 -->
      <div class="drawer-panel" :class="{ 'open': isOpen }">
        <div class="drawer-content">
          <!-- 抽屉内容 -->
        </div>
      </div>
    </ClientOnly>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useAppStore } from '../../composables/useStores';

const app = useAppStore();
const isOpen = ref(false);

// 同步store状态
onMounted(() => {
  isOpen.value = app.isCollapse;
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
  
  // 禁止滚动
  watch(isOpen, (newVal) => {
    if (newVal) {
      document.body.style.overflow = 'hidden';
    } else {
      setTimeout(() => {
        document.body.style.overflow = '';
      }, 300);
    }
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  document.body.style.overflow = '';
});

// 窗口大小变化处理
function handleResize() {
  if (window.innerWidth > 991 && isOpen.value) {
    closeDrawer();
  }
}

// 双向同步store状态
watch(() => app.isCollapse, (newVal) => {
  if (isOpen.value !== newVal) {
    isOpen.value = newVal;
  }
});

watch(isOpen, (newVal) => {
  if (app.isCollapse !== newVal) {
    app.isCollapse = newVal;
  }
});

// 关闭抽屉
function closeDrawer() {
  isOpen.value = false;
}
</script>

<style lang="scss" scoped>
// 遮罩层样式
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(2px);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  
  &.active {
    opacity: 1;
    visibility: visible;
  }
}

// 抽屉面板样式
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background-color: var(--grey-1);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform; // 启用硬件加速
  
  &.open {
    transform: translateX(0);
  }
}

// 抽屉内容样式
.drawer-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0.5rem;
}
</style>

这个实现解决了几个关键问题：

  1. 使用ClientOnly确保组件只在客户端渲染
  2. 优化了动画性能，使用will-change和cubic-bezier曲线
  3. 实现滚动锁定，防止抽屉打开时背景内容滚动
  4. 处理响应式布局，在大屏幕下自动关闭抽屉

4. 组件懒加载与性能优化

Nuxt提供了多种方式来优化组件加载性能，特别是对于大型或不常用的组件。

自动懒加载

Nuxt提供了自动组件懒加载功能。只需在组件名前添加"Lazy"前缀：

vue 复制代码 
<template>
  <!-- 自动懒加载评论组件 -->
  <LazyComment v-if="showComments" :article-id="articleId" />
  
  <!-- 或者使用ClientOnly包装 -->
  <ClientOnly>
    <LazyCommentForm @submit="handleSubmit" />
  </ClientOnly>
</template>

手动控制组件加载

对于更精细的控制，我们可以使用defineAsyncComponent：

vue 复制代码 
<script setup>
import { defineAsyncComponent } from 'vue';

// 手动定义异步组件
const HeavyChart = defineAsyncComponent(() => 
  import('~/components/HeavyChart.vue')
);

// 控制组件加载时机
const showChart = ref(false);

function loadChart() {
  showChart.value = true;
}
</script>

<template>
  <button @click="loadChart">加载图表</button>
  <HeavyChart v-if="showChart" :data="chartData" />
</template>

条件渲染优化

使用v-if条件渲染可以减少初始加载时间：

vue 复制代码 
<template>
  <!-- 按需加载区块 -->
  <section v-if="isVisible" class="comments-section">
    <!-- 评论内容 -->
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isVisible = ref(false);

// 使用Intersection Observer API检测元素可见性
onMounted(() => {
  if (process.client && 'IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        isVisible.value = true;
        observer.disconnect();
      }
    });
    
    // 监听一个占位元素
    const target = document.querySelector('.comments-placeholder');
    if (target) observer.observe(target);
  } else {
    // 降级处理：直接显示
    isVisible.value = true;
  }
});
</script>

5. TypeScript类型增强

在Nuxt项目中，TypeScript类型支持对于提高开发效率和减少错误至关重要。但由于Nuxt的自动导入机制，TypeScript集成需要一些特殊处理。

扩展全局类型

创建类型声明文件来支持Nuxt自动导入的API：

typescript 复制代码 
// types/nuxt.d.ts
declare global {
  // Nuxt Composables
  const useAsyncData: any;
  const useFetch: any;
  const useHead: any;
  const useNuxtApp: any;
  
  // Vue Router
  const useRoute: any;
  const useRouter: any;
  
  // Vue Composables
  const ref: typeof import('vue')['ref'];
  const computed: typeof import('vue')['computed'];
  
  // Custom Composables
  const useApi: typeof import('~/composables/useApi')['useApi'];
}

export {}

强类型的API接口

为API响应定义精确的类型：

typescript 复制代码 
// types/api.ts
export interface Article {
  id: string;
  articleTitle: string;
  articleContent: string;
  articleCover: string;
  createTime: string;
  updateTime: string;
  isTop: number;
  categoryId: string;
  viewCount: number;
  likeCount: number;
  category: {
    id: string;
    categoryName: string;
  };
  tagVOList: Array<{
    id: string;
    tagName: string;
  }>;
}

export interface ArticleListResponse {
  recordList: Article[];
  count: number;
}

// 在API调用中使用类型
export const useArticleApi = () => {
  return {
    getList: (params: any): Promise<ArticleListResponse> => 
      useApi().article.getList(params),
    
    getDetail: (id: string): Promise<Article> => 
      useApi().article.getDetail(id)
  };
};

6. 客户端与服务端数据共享问题

在Nuxt应用中，确保服务端渲染的数据与客户端保持一致是一个常见挑战。

Pinia状态重用

我们通过Pinia实现了服务端和客户端之间的状态共享：

typescript 复制代码 
// stores/blog.ts
export const blogStore = defineStore('blog', () => {
  const blogInfo = ref({
    siteConfig: {}
  });

  // 这个action会在服务端和客户端都执行
  function setBlogInfo(data) {
    blogInfo.value = data;
  }

  return {
    blogInfo,
    setBlogInfo
  };
}, {
  // 在客户端使用持久化
  persist: process.client ? {
    storage: localStorage
  } : false
});

处理服务端获取的数据

在页面组件中，我们通常在setup中获取数据，并确保它可以被客户端重用：

vue 复制代码 
<script setup>
// 使用useAsyncData获取数据，自动处理SSR和客户端水合
const { data: blogConfig } = await useAsyncData(
  'blog-config',
  () => useApi().blogInfo.getConfig(),
  { server: true }
);

// 将数据同步到store
// 这会在服务端和客户端都执行
const blog = useBlogStore();
if (blogConfig.value) {
  blog.setBlogInfo(blogConfig.value);
}

// 客户端特有的额外数据获取
onMounted(async () => {
  if (process.client) {
    // 获取只在客户端需要的数据
    const response = await useApi().blogInfo.getStats();
    // 处理响应...
  }
});
</script>

7. 实用调试与问题排查技巧

服务端渲染应用的调试比SPA更复杂，需要同时考虑服务端和客户端环境。

环境检测与条件日志

typescript 复制代码 
// 根据环境添加日志
if (process.dev) {
  // 开发环境日志
  console.log('[DEV]', '这是开发环境日志');
}

if (process.client) {
  // 客户端日志
  console.log('[CLIENT]', '这是客户端日志');
}

if (process.server) {
  // 服务端日志
  console.log('[SERVER]', '这是服务端日志');
}

使用Nuxt DevTools

Nuxt提供了强大的开发工具，帮助调试渲染过程和组件状态：

typescript 复制代码 
// nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    enabled: true,
    timeline: true
  }
});

解决常见的服务端渲染问题

  1. 水合不匹配：服务端与客户端渲染结果不同
vue 复制代码 
<!-- 问题代码 -->
<div>{{ new Date().toLocaleString() }}</div>

<!-- 解决方案 -->
<script setup>
const formattedDate = ref('');

onMounted(() => {
  if (process.client) {
    formattedDate.value = new Date().toLocaleString();
  }
});
</script>
<template>
  <ClientOnly>
    <div>{{ formattedDate }}</div>
    <template #fallback>
      <div>Loading date...</div>
    </template>
  </ClientOnly>
</template>
  1. 浏览器API在服务端不可用
vue 复制代码 
<!-- 问题代码 -->
<script setup>
const windowWidth = ref(window.innerWidth); // 服务端会报错

// 解决方案
const windowWidth = ref(0);
onMounted(() => {
  if (process.client) {
    windowWidth.value = window.innerWidth;
    window.addEventListener('resize', () => {
      windowWidth.value = window.innerWidth;
    });
  }
});
</script>

总结

从Vue迁移到Nuxt的过程中，对组件和接口的重构是最关键的环节之一。我们通过本文详细探讨了：

  1. 如何重构API调用模式，适应服务端渲染环境
  2. 如何处理组件生命周期的差异
  3. 如何实现复杂的UI组件，如抽屉菜单
  4. 如何优化组件加载性能
  5. 如何增强TypeScript类型支持
  6. 如何解决客户端与服务端数据共享问题
  7. 如何有效调试服务端渲染应用

通过这些实践，我们成功将Vue项目迁移到了Nuxt，充分利用了服务端渲染的优势，提高了SEO表现和首屏加载速度，同时保持了良好的用户体验。

前端 NuxtJs
  • 本文作者： @ConderL
  • 本文链接：undefined/article/12
  • 版权声明： 本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处！
上一篇

从Vue迁移到Nuxt实现服务端渲染：构建SEO友好的博客系统（三）

下一篇

从Vue迁移到Nuxt实现服务端渲染：构建SEO友好的博客系统（五）

评论
默认头像
评论
来发评论吧~