使用 prerenderRoutes 進行預渲染路由

Amd794發表於2024-08-20
路由

title: 使用 prerenderRoutes 進行預渲染路由
date: 2024/8/20
updated: 2024/8/20
author: cmdragon

excerpt:
prerenderRoutes 函式是 Nuxt 3 中一個強大的工具，它能夠幫助開發者最佳化頁面載入速度和改善使用者體驗。透過使用 prerenderRoutes，你能夠靈活地指定需要預渲染的路由，提升網站效能和 SEO 效果。

categories:

  • 前端開發

tags:

  • 前端
  • Nitro
  • 預渲染
  • SEO
  • 路由
  • 最佳化
  • 教程

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在現代前端開發中，預渲染是提升網站效能和使用者體驗的一項重要技術。Nitro 的 prerenderRoutes 函式允許開發者指定額外需要預渲染的路由，儘管這些路由不一定會在生成的 HTML 中顯示。

什麼是預渲染？

預渲染是指在構建階段生成靜態 HTML 檔案的過程，以便在使用者請求時直接提供這些檔案。這種方法可以顯著提高頁面載入速度，並且對於 SEO（搜尋引擎最佳化）也有很大的幫助。

prerenderRoutes 的基本用法

prerenderRoutes 函式允許你告訴 Nitro 需要預渲染哪些路由，即使這些路由的 HTML 不會直接顯示在最終的網頁中。

基本語法

以下是 prerenderRoutes 的基本用法：


// 單個路由
prerenderRoutes('/');

// 多個路由
prerenderRoutes(['/', '/about']);

在終端視窗中，你可能會看到關於路由預渲染的日誌資訊。此時，/about 頁面應該在你訪問主頁時已經被預渲染。

何時使用 prerenderRoutes

使用 prerenderRoutes 的場景主要包括：

  • 你有某些靜態頁面需要被預渲染。
  • 你想提升特定路由的SEO效能。

請注意，prerenderRoutes 只能在伺服器端執行，若在瀏覽器中或其他非預渲染的環境中呼叫，將不會生效。

示例專案

我們將建立一個簡單的專案，透過 prerenderRoutes 預渲染一些頁面。

步驟 1：安裝所需依賴

確保你的專案中已安裝 Nitro。可以透過以下命令安裝：

npm install nitro

步驟 2：專案結構

建立一個簡單的專案結構：

my-nitro-project/
├── src/
│   ├── pages/
│   │   ├── index.vue
│   │   └── about.vue
│   └── server/
│       └── prerender.js
└── package.json

步驟 3：建立頁面

在 src/pages/index.vue 中新增以下程式碼：

<template>
  <div>
    <h1>首頁</h1>
    <p>歡迎來到我的網站!</p>
  </div>
</template>

在 src/pages/about.vue 中新增以下程式碼：

<template>
  <div>
    <h1>關於我們</h1>
    <p>這是關於我們的頁面。</p>
  </div>
</template>

步驟 4：使用 prerenderRoutes

在 src/server/prerender.js 檔案中，新增以下程式碼：

import { defineEventHandler } from 'nitro'

export default defineEventHandler((event) => {
  // 預渲染首頁和關於頁面
  prerenderRoutes(['/', '/about']);
});

步驟 5：構建專案

在專案根目錄下，使用以下命令構建專案：

nitro build

步驟 6：啟動專案

構建完成後，使用如下命令啟動專案：

nitro start

當專案啟動後，你將能夠訪問 / 和 /about 路由，這些頁面將會被預渲染。

結論

prerenderRoutes 函式是 Nuxt 3 中一個強大的工具，它能夠幫助開發者最佳化頁面載入速度和改善使用者體驗。透過使用 prerenderRoutes，你能夠靈活地指定需要預渲染的路由，提升網站效能和 SEO 效果。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 prerenderRoutes 進行預渲染路由 | cmdragon's Blog

往期文章歸檔：

  • 使用 preloadRouteComponents 提升 Nuxt 應用的效能 | cmdragon's Blog
  • 使用 preloadComponents 進行元件預載入 | cmdragon's Blog
  • 使用 prefetchComponents 進行元件預取 | cmdragon's Blog
  • 使用 onNuxtReady 進行非同步初始化 | cmdragon's Blog
  • 使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 onBeforeRouteLeave 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 navigateTo 實現靈活的路由導航 | cmdragon's Blog
  • 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 | cmdragon's Blog
  • 掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置 | cmdragon's Blog
  • 使用 defineNuxtRouteMiddleware 建立路由中介軟體 | cmdragon's Blog
  • 使用 defineNuxtComponent`定義 Vue 元件 | cmdragon's Blog
  • 使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog
  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog

相關文章