高力堡科技有限公司網站

高力堡科技有限公司的報價系統網站。使用 Next.js 與 Prisma 和 MariaDB。通過 SSR 增強 SEO，並包括管理報價的管理頁面。

功能

  • 主題：支持深色/淺色模式。
  • 本地化 (i18n)：支持英文、繁體中文和簡體中文地區。
  • 管理頁面(jwt)：包含一個管理頁面，用於編輯項目數據和其他功能控制。
  • 購物車：包含一個購物車，供用戶添加和修改項目。
  • SEO 處理：支持跨不同語言和平台的 SEO 優化。

技術

  • Next.js 14
  • TailwindCSS
  • Next UI
  • TypeScript
  • MariaDB
  • Prisma
  • Next-Auth with JWT
  • SSR (Server Side Rendering)

開發心得

  • 挑戰：頁面編譯速度緩慢

    • SSR 意味著頁面會在伺服器上渲染，因此如果伺服器無法快速完成渲染，訪問網站的用戶將會看到一個空白頁面。因此，編譯速度是一個關鍵問題。當我在構建一些 Nuxt3 應用時，我不知道 Next.js 可以在伺服器組件中直接訪問資料庫。最終，我直接在伺服器端組件中獲取數據，編譯速度有所下降。現在，頁面可以在不到 100 毫秒內打開。（而其他東西繼續讓他們 CSR 吧 😏）

  • 挑戰：可重用數據與數據抓取緩存

    • 如上所述，我已經發現我可以直接訪問資料庫以獲取項目數據，但仍然存在一個問題。Next.js 提供的 generateMetadata 函數和主 Page 函數是異步運行的，這意味著我需要調用資料庫兩次來獲取項目數據：一次用於元數據，一次用於頁面。因此，我學會了使用緩存來存儲數據，並在兩個函數中重用它，這也加快了頁面編譯時間！
    const getData = cache(async (productName: string) => {
        const product = await prisma.product.findFirst({
            where: { item_code: productName },
            select: {
                id: true,
                item_code: true,
                name: true,
                youtube_link: true,
                features: true,
                spec: true,
                product_types: { select: { id: true, name: true } },
                categories: { select: { id: true, name: true } },
                images: {
                    select: { id: true, url: true, order: true },
                    orderBy: { order: 'asc' },
                },
                attachments: {
                    select: { id: true, file_path: true, type: true },
                    orderBy: { order: 'asc' },
                },
                // attachments: true,  // To select all fields
            },
        })
        // Check if product is not found
        if (!product) {
            redirect(`/products/1`)
        }
    return { product_data: product }
})
GitHub
LinkedIn