Next.js 超實用進階技巧【持續更新】詳情 - javascript,next.js,ssr,性能優化 superZidan 動態日志

hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 Next.js 進階技巧，如果大家遇到任何問題，歡迎聯繫我或者直接微信添加 superZidan41

🔥🔥🔥 前方高能，乾貨滿滿，建議點贊➕關注➕收藏；後續還會持續更新更多技巧和案例

温馨提示：如果你還是個 Next.js 新手，建議先閲讀這篇 Next.js 最佳實踐，照着這篇文章先把代碼敲一遍

Next.js 是一個強大的框架，用於構建服務端渲染的 React 應用程序。它提供了許多開箱即用的功能，例如：自動代碼分割、靜態站點生成和服務端渲染。但是，主流教程中並未提及一些高級 Next.js 技巧。在本文中，我們將介紹其中一些技巧，這些技巧將使你的應用程序更上一層樓。

對第三方庫使用動態導入

Next.js 會自動對你的應用程序進行代碼分割，這意味着它僅加載當前頁面所需的代碼。然而，這對於沒有考慮到代碼分割的第三方庫來説並不總是有效的

為了可以將第三方庫進行代碼分割，你可以使用動態導入。動態導入允許你按需加載模塊，這有助於減少應用程序的初始包大小。

例如，不要像這樣導入第三方庫

import moment from 'moment';

你可以像這樣使用動態導入

const moment = dynamic(() => import('moment'));

這將按需加載 moment 庫，這有助於減少應用程序的初始包大小

把靜態資源發佈到 CDN

Next.js 會自動優化圖片和其他靜態資源，但把這些靜態資源發佈到快速可靠的內容分發網絡 (CDN) 仍然很重要。

你可以使用阿里雲，騰訊雲，Amazon，Cloudflare 等廠商提供的 CDN 服務。這有助於提高性能並減少服務器的負載。

要為靜態資源配置 CDN，可以在 next.config.js 文件中使用 assetPrefix 選項：

module.exports = { 
    ... 
    assetPrefix: 'https://yourcdn.com/',
    ... 
 };

這樣配置之後，會在你的靜態資源 URL 前面加上 CDN 的 URL

使用服務端緩存處理耗性能的數據操作

如果你的應用程序有十分損耗性能的數據操作，例如複雜的數據庫查詢或 API 請求，那麼在服務器端緩存結果來提高性能就非常重要。

Next.js 提供了內置的緩存 API，可用於在服務器端緩存數據。緩存 API 是一個簡單的鍵值存儲，可用於存儲和檢索數據。

例如，你可以像這樣緩存數據庫查詢的結果：



import { cache } from 'next/cache'; 
async function getPosts() { 
    const cachedPosts = await cache.get('posts'); 
    if (cachedPosts) { return cachedPosts; } 
    const posts = await fetch('/api/posts'); 
    await cache.set('posts', posts); 
    return posts; 
 }

以上檢查數據庫查詢的結果是否已緩存，如果已經緩存了，則從緩存中返回數據。否則，它從數據庫中獲取結果，然後緩存它們，最後返回它們。

通過在服務器端緩存耗性能的數據操作，你可以減少數據庫和 API 服務器的負載，並提高應用程序的性能。

注意：緩存敏感數據時要小心。一個好的經驗法則是僅緩存公共數據（不要緩存需要身份鑑權的數據）

對動態網頁使用 ISR（增量靜態再生成）

Next.js 提供了一項名為增量靜態再生成 (ISR) 的強大功能，允許生成具有動態內容的靜態頁面。這意味着可以創建快速且動態的頁面，而無需犧牲性能。

使用 ISR，你可以生成頁面的靜態版本，稍後使用新的數據更新該頁面。舉個例子，你可以使用 ISR 生成包含初始內容的靜態博客文章頁面，後續如果有新的新評論或其他動態內容進入時動態更新該頁面。

要使用 ISR，需要在 getStaticProps 函數中定義 revalidate 選項。此選項指定 Next.js 使用新數據重新生成頁面的頻率。

export async function getStaticProps() {
    const data = await fetch('https://example.com/api/data'); 
    const posts = await data.json(); 
    return { 
        props: { posts }, 
        revalidate: 60 // 每 60 秒重新生成頁面 
     } 
 }

在此示例中，頁面將每 60 秒使用來自 API 的新數據重新生成一次。這意味着即使頁面是靜態的，你的用户也將始終看到最新的內容。

通過使用 ISR，可以創建性能絕佳的快速動態頁面。此功能對於經常添加新內容的「內容密集型」網站（例如博客或新聞網站）特別有用。

使用自定義服務來支持 WebSockets

Next.js 提供了適合大多數需求場景的內置服務器。但是，如果有 WebSocket 或自定義身份驗證等更加高階的需求，則可能需要使用自定義服務。

可以通過在項目根目錄創建 server.js 文件來將自定義服務與 Next.js 結合使用。該文件導出一個創建 HTTP 服務並處理請求的函數。

例如，以下是創建處理 WebSocket 的自定義服務的方法：

const http = require('http'); 
const WebSocket = require('ws'); 
const next = require('next'); 
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev }); 
const handle = app.getRequestHandler(); 
const server = http.createServer((req, res) => { 
        // // 處理 HTTP 請求
        handle(req, res); 
}); 
 const wss = new WebSocket.Server({ server }); 
 wss.on('connection', (ws) => { 
        // 處理 websocket 建連 
 }); 
 server.listen(3000, () => { console.log('Ready on http://localhost:3000'); 
 });

這將創建一個 HTTP 服務器和一個監聽端口 3000 的 WebSocket 服務器