Vite Server-Side Rendering (SSR) API

Vite's SSR API ช่วยให้คุณกำหนดค่าการทำงานของ Server-Side Rendering (SSR) ในแอปพลิเคชันของคุณ ซึ่งช่วยให้สามารถเรนเดอร์แอปพลิเคชันฝั่งเซิร์ฟเวอร์และส่งเป็น HTML ไปยังไคลเอนต์ได้

ssr.external

ระบุ dependencies ที่จะไม่รวมไว้ใน bundle ของเซิร์ฟเวอร์ แต่จะใช้เวอร์ชันที่ติดตั้งใน node_modules แทน ช่วยลดขนาด bundle และเพิ่มประสิทธิภาพการ build สำหรับ dependencies ขนาดใหญ่

import { defineConfig } from "vite";

export default defineConfig({
  ssr: {
    // ระบุ dependencies ที่จะไม่รวมใน bundle
    external: [
      "react",
      "react-dom",
      "@some-company/some-package",
      // ระบุเป็น pattern ได้
      /^@company\//,
    ],
  },
});

คำอธิบายเพิ่มเติม:

• ช่วยลดขนาด bundle ของเซิร์ฟเวอร์
• ควรระบุ dependencies ขนาดใหญ่ที่ใช้ร่วมกันระหว่างเซิร์ฟเวอร์และไคลเอนต์
• ระวังการ externalize dependencies ที่มีการแก้ไขในระหว่างการ build

ssr.noExternal

ระบุ dependencies ที่จะถูกรวมไว้ใน bundle ของเซิร์ฟเวอร์ ใช้เมื่อต้องการให้ dependencies บางตัวถูกแปลงโค้ดสำหรับการทำงานในสภาพแวดล้อม SSR

import { defineConfig } from "vite";

export default defineConfig({
  ssr: {
    // ระบุ dependencies ที่จะรวมใน bundle
    noExternal: [
      "package-to-bundle",
      /^@scope\/.*/, // ใช้ regexp pattern
      "another-package",
      // ระบุเป็นฟังก์ชันได้
      (id) => id.includes("@my-scope/"),
    ],
  },
});

เมื่อไหร่ควรใช้:

• เมื่อต้องการรวม dependencies ที่มีปัญหาเมื่อถูก externalize
• เมื่อต้องการให้ dependencies บางตัวถูกแปลงโค้ดสำหรับการทำงานในสภาพแวดล้อม SSR
• เมื่อมี dependencies ที่ต้องการเวอร์ชันที่แตกต่างกันระหว่างเซิร์ฟเวอร์และไคลเอนต์

ssr.target

กำหนดสภาพแวดล้อมเป้าหมายสำหรับการ build SSR สามารถเลือกระหว่าง 'node' (ค่าเริ่มต้น) หรือ 'webworker' สำหรับสภาพแวดล้อมที่แตกต่างกัน

import { defineConfig } from "vite";

export default defineConfig({
  ssr: {
    // 'node' (ค่าเริ่มต้น) หรือ 'webworker'
    target: "node",

    // ระบุเวอร์ชันของ Node.js ที่ต้องการรองรับ
    target: {
      node: "node16",
      webworker: "es2022",
    },
  },
});

ค่าที่รองรับ:

• 'node': สำหรับการทำงานบน Node.js (ค่าเริ่มต้น)
• 'webworker': สำหรับการทำงานใน Web Workers
• Object: ระบุเป้าหมายแบบละเอียด

ssr.resolve

กำหนดการ resolve dependencies สำหรับ SSR ช่วยให้สามารถปรับแต่งการ resolve โมดูลสำหรับสภาพแวดล้อมเซิร์ฟเวอร์ได้อย่างละเอียด

import { defineConfig } from "vite";

export default defineConfig({
  ssr: {
    resolve: {
      // เงื่อนไขการ resolve เพิ่มเติม
      conditions: ["my-custom-condition", "production"],

      // เงื่อนไขสำหรับ dependencies ภายนอก
      externalConditions: ["node"],

      // ฟิลด์ที่ใช้ในการ resolve entry point
      mainFields: ["module", "jsnext:main", "jsnext", "browser", "main"],

      // ระบุส่วนขยายไฟล์ที่ต้องการ resolve
      extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
    },
  },
});