Angular Academy · บทเรียน

การตั้งค่า Angular SSR

เพิ่ม SSR ด้วย Angular CLI

การตั้งค่า Angular SSR เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

การเพิ่ม SSR

วิธีที่เร็วที่สุดในการเปิดใช้ SSR คือใช้สคีแมติก ng add @angular/ssr ซึ่งจะตั้งค่าการสร้างเซิร์ฟเวอร์ เซิร์ฟเวอร์ที่ใช้ Express และการเติมความสามารถให้หน้าเว็บให้คุณโดยอัตโนมัติ

// terminal
// ng add @angular/ssr

โครงการใหม่

เมื่อสร้างแอปใหม่ คุณสามารถเลือกเปิดใช้ SSR ได้โดยตรงด้วยแฟล็ก SSR ทำให้โครงการพร้อมใช้ SSR ตั้งแต่เริ่มต้น

// ng new my-app --ssr

สิ่งที่สคีแมติกเพิ่มให้

สคีแมติกจะเพิ่ม server.ts (เซิร์ฟเวอร์ Express), จุดเริ่มต้นการบูตสแตรป main.server.ts, ไฟล์ app.config.server.ts, อัปเดต angular.json ด้วยตัวเลือกเซิร์ฟเวอร์ และเปิดใช้การเติมความสามารถให้หน้าเว็บในการตั้งค่าแอป

provideServerRendering

การตั้งค่าแอปฝั่งเซิร์ฟเวอร์จะจัดเตรียมกลไก SSR ผ่าน provideServerRendering() และผสานเข้ากับการตั้งค่าเบราว์เซอร์ของคุณ

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

การเติมความสามารถให้หน้าเว็บบนไคลเอ็นต์

การตั้งค่าเบราว์เซอร์จะเปิดใช้การเติมความสามารถให้หน้าเว็บ เพื่อให้ไคลเอ็นต์นำ HTML จากเซิร์ฟเวอร์กลับมาใช้แทนการแสดงผลใหม่ สคีแมติกจะเพิ่มการตั้งค่านี้ให้อัตโนมัติ

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

เซิร์ฟเวอร์ Express

server.ts จะสร้างแอป Express ที่ให้บริการทรัพยากรคงที่ และส่งต่อการแสดงผล HTML ไปยังกลไก SSR ของ Angular สำหรับเส้นทางอื่นทั้งหมด

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

เซิร์ฟเวอร์สำหรับการพัฒนา

ระหว่างการพัฒนา ng serve จะเรียกใช้ SSR โดยอัตโนมัติด้วยตัวสร้างแอป คุณจึงเห็นผลลัพธ์ที่แสดงผลจากเซิร์ฟเวอร์และการเติมความสามารถให้หน้าเว็บได้โดยไม่ต้องทำขั้นตอนเพิ่มเติม

// ng serve

การสร้างสำหรับใช้งานจริง

การสร้างสำหรับใช้งานจริงจะสร้างชุดโค้ด browser และชุดโค้ด server คุณต้องเรียกใช้จุดเริ่มต้นของเซิร์ฟเวอร์ Node เพื่อให้บริการ SSR ในสภาพแวดล้อมจริง

// ng build
// node dist/my-app/server/server.mjs

API ที่ใช้ได้เฉพาะเบราว์เซอร์

โค้ดจะทำงานบนเซิร์ฟเวอร์ด้วย ซึ่งไม่มี window, document และ localStorage อยู่ หากเข้าถึงสิ่งเหล่านี้โดยไม่มีการตรวจสอบ โค้ดจะล้มเหลวระหว่าง SSR

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

URL แบบสัมบูรณ์สำหรับ HTTP

บนเซิร์ฟเวอร์ URL ของ API แบบสัมพันธ์จะไม่มีต้นทาง ให้ใช้ URL แบบสัมบูรณ์หรือตั้งค่าฐาน เพื่อให้การเรียก HttpClient ฝั่งเซิร์ฟเวอร์แก้ไข URL ได้อย่างถูกต้อง

ตรวจสอบว่า SSR ทำงาน

หากต้องการยืนยันว่า SSR ทำงาน ให้ส่งคำขอไปยังหน้าเว็บและตรวจสอบคำตอบดิบ (เช่น ใช้ curl) คุณควรเห็นเนื้อหาที่แสดงผลแล้วอยู่ใน HTML ไม่ใช่เพียงรากของแอปที่ว่างเปล่า

// curl http://localhost:4000/ | grep "<h1>"

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความรู้เกี่ยวกับการตั้งค่า SSR ของคุณ

สรุปทบทวน

คุณได้ตั้งค่า SSR ด้วย ng add @angular/ssr ซึ่งจะเพิ่มเซิร์ฟเวอร์ Express, provideServerRendering() และการเติมความสามารถให้หน้าเว็บบนไคลเอ็นต์ โปรดอย่าลืมตรวจสอบ API ที่ใช้ได้เฉพาะเบราว์เซอร์ ใช้ URL แบบสัมบูรณ์ฝั่งเซิร์ฟเวอร์ และตรวจสอบ HTML ที่แสดงผลแล้วในคำตอบดิบ

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า Angular SSR” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า Angular SSR” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Angular SSR”

เพิ่ม SSR ด้วย Angular CLI คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่า Angular SSR” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy