Nuxt.js静态生成与动态路由策略

Nuxt.js 是一个基于 Vue.js 的通用应用框架，用于构建服务器端渲染（SSR）和静态生成（SPA）的 Web 应用。在 Nuxt.js 中，静态生成（Static Generation）和动态路由（Dynamic Routing）是两个关键概念。

静态生成（Static Generation）

• 原理：静态生成是指在构建时预渲染页面，将服务器端渲染的内容转化为静态 HTML 文件。这样，用户在访问网站时，无需服务器参与，可以直接从 CDN 加载页面，提高首屏加载速度。
• 配置：在 nuxt.config.js 文件中，可以通过 generate 配置对象来设置静态生成的选项，例如：

     module.exports = {
       generate: {
         dir: 'dist', // 输出目录，默认为 dist
         fallback: '404.html', // 未预渲染的路由的 fallback 页面
         routes: function() { // 自定义预渲染路由
           return [
             '/about',
             '/contact'
           ]
         }
       }
     }

• 命令：使用 npx nuxt generate 或 yarn generate 命令执行静态生成。

动态路由（Dynamic Routing）

• 原理：动态路由允许根据参数创建多个路由，如 /posts/:id，其中 :id 是一个动态段，可以匹配任何值。当用户访问这些路由时，Nuxt.js 将在服务器端生成相应的页面。
• 配置：在 pages 目录下，以 (.vue) 结尾的文件代表一个路由。动态路由的文件名通常包含方括号，例如 pages/posts/_id.vue，这表示一个接受 id 参数的动态路由。

     <template>
       <div>
         <h1>Post ID: {{ $route.params.id }}</h1>
         <p>{{ post.content }}</p>
       </div>
     </template>

     <script>
     export default {
       asyncData({ params }) {
         return axios.get(`https://api.example.com/posts/${params.id}`)
           .then(res => ({ post: res.data }))
           .catch(err => { throw new Error('Failed to fetch post') })
       }
     }
     </script>

Nuxt.js 的静态生成优化了首屏加载性能，而动态路由则提供了灵活的路由结构，支持数据驱动的页面生成。两者结合，使得 Nuxt.js 能够构建高性能的、内容丰富的 Web 应用。

结合静态生成与动态路由

预渲染动态路由

对于动态路由，虽然它们不能直接静态生成，但可以通过映射所有可能的动态参数值来预渲染一部分页面。例如，如果你有一个博客系统，你可以预先生成最近发布的100篇文章的静态页面。

在 nuxt.config.js 中的 generate.routes 函数内，你可以查询数据库或API来获取所有文章ID，然后返回这些动态路径数组。

   routes: async () => {
     const { data } = await axios.get('https://api.example.com/posts');
     return data.map(post => `/posts/${post.id}`);
   }

混合部署策略

对于大型项目，可能既有静态页面也有需要实时数据的动态页面。Nuxt.js允许你混合使用静态生成和SSR。对于频繁更新的内容使用SSR，而对于相对静态的内容采用静态生成。

高级技巧

缓存策略

动态路由页面的数据请求应该考虑缓存策略，以减少重复请求和提高性能。可以使用HTTP缓存头或者服务端的缓存机制来实现。

客户端路由过渡

使用Nuxt的 <transition> 和 <page-transition> 组件可以为动态路由之间的切换添加平滑的过渡效果，提升用户体验。

SEO优化

动态路由页面应确保每个页面都有独特的标题、描述等SEO元信息。利用Nuxt的 head() 方法可以在组件内部设置这些信息。

避免无限生成

当动态路由参数可能有无数种组合时，需谨慎设计生成策略，避免无限生成导致构建时间过长或资源耗尽。可以考虑设置生成上限或使用其他策略来处理这种情况。

错误处理

在动态路由的数据获取过程中，合理处理错误非常重要。使用 asyncData 或 fetch 钩子时，确保捕获并适当处理异常，比如重定向到错误页面或显示友好的错误信息。

文章转自：https://juejin.cn/post/7374627092699349001