การใช้เซสชันแบบไม่มีสถานะสำหรับ Next.js โดยใช้ Server Actions

บทนำ#

หลังจากการเปิดตัวที่ได้รับการเฉลิมฉลองอย่างมากของ App Router ที่ได้ถูกปล่อยออกมา Next.js ได้แนะนำฟีเจอร์ใหม่คือ Server Actions นวัตกรรมใหม่นี้อำนวยความสะดวกในการจัดการข้อมูลฝั่งเซิร์ฟเวอร์ ลดการพึ่งพา JavaScript ฝั่งลูกค้า และค่อยๆ เพิ่มความสามารถให้กับฟอร์ม ทั้งหมดนี้ใช้ JavaScript และ React ในการสร้างเว็บแอปพลิเคชันที่แข็งแกร่งโดยไม่ต้องการ REST APIs แบบดั้งเดิม

ในบทความนี้ เราจะนำข้อดีที่มากมายของนวัตกรรมนี้มาใช้และดูมันในการปฏิบัติงานขณะที่เราสร้างเซสชันแบบไม่มีสถานะโดยใช้คุกกี้สำหรับ Next.js บทความนี้จะทำหน้าที่เป็นคู่มือที่จะแนะนำคุณผ่านทุกขั้นตอนของการสร้างโปรเจคตัวอย่างโดยใช้ App Router

การสาธิตที่ปฏิบัติของเราสามารถถูกปรับใช้ไปยัง Vercel ได้อย่างง่ายดายโดยใช้ Edge Runtime และคุณสามารถดาวน์โหลดซอร์สโค้ดเต็มได้จาก GitHub

หลีกเลี่ยง REST APIs#

โดยดั้งเดิมแล้ว ถ้าเราต้องการสร้าง Next.js เว็บแอปที่เรียกฐานข้อมูลในแบ็กเอนด์ เราอาจสร้าง REST APIs บางอย่างเพื่อยืนยันสถานะการยืนยันสิทธิ์และเรียกฐานข้อมูล จากนั้น React แอปฝั่งหน้าแรกจะเรียก APIs เหล่านี้ แต่ถ้าไม่จำเป็นต้องเปิด API ให้สาธารณะและแอป react นี้เป็นลูกค้าเพียงตัวเดียว ดูเหมือนว่าการใช้ REST APIs จะซ้ำซ้อนเพราะมันจะถูกเรียกโดยตัวเราเองเท่านั้น

ด้วย Server Actions คอมโพเนนต์ React สามารถรันโค้ดฝั่งเซิร์ฟเวอร์ได้แล้ว แทนที่จะต้องสร้างปลายทาง API ด้วยตนเอง Server Actions จะสร้างปลายทางสำหรับ Next.js ให้ใช้งานเบื้องหลังโดยอัตโนมัติ เมื่อเรียก Server Action Next.js จะส่งคำขอ POST ไปยังหน้าที่คุณอยู่พร้อมกับเมทาดาทาสำหรับการดำเนินการ

ความจำเป็นสำหรับเซสชันแบบไม่มีสถานะ#

ในฐานะที่เป็นเฟรมเวิร์คที่โปรดปรานในการสร้างแอปพลิเคชันแบบไม่มีสถานะ Next.js มักจะหมายถึงการที่ไม่มีเซิร์ฟเวอร์ ซึ่งเราไม่สามารถใช้หน่วยความจำในการจัดเก็บข้อมูลเซสชัน เซสชันแบบดั้งเดิมต้องใช้บริการจัดเก็บภายนอก เช่น Redis หรือฐานข้อมูล

แต่อย่างไรก็ตาม เมื่อข้อมูลเซสชันยังคงมีขนาดเล็กพอเพียง เรามีทางเลือกอีกทางหนึ่ง: วิศวกรเซสชันแบบไม่มีสถานะโดยใช้วิธีการเข้ารหัสที่ปลอดภัยและคุกกี้ที่เก็บไว้ฝั่งไคลเอนต์ วิธีการนี้ไม่จำเป็นต้องมีการจัดเก็บภายนอกและเก็บข้อมูลเซสชันแบบกระจายตัว เสนอประโยชน์ที่มีความสำคัญเกี่ยวกับโหลดเซิร์ฟเวอร์และประสิทธิภาพทั่วไปของแอปพลิเคชัน

เป้าหมายของเราคือการสร้างเซสชันน้ำหนักเบาที่มีประสิทธิภาพซึ่งใช้ประโยชน์จากความสามารถในการเก็บข้อมูลฝั่งไคลเอนต์ขณะที่มั่นใจในความปลอดภัยด้วยการเข้ารหัสที่ดำเนินการอย่างดี

การดำเนินงานเซสชันพื้นฐาน#

ก่อนอื่น เราต้องเริ่มโปรเจ็กต์ใหม่:

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้ง ดูที่ คู่มืออย่างเป็นทางการ

การสร้างไลบรารีเซสชัน#

เพื่อให้เข้าใจใน Server Actions ได้ง่ายขึ้น เราจะสร้างเวอร์ชันเซสชันที่เรียบง่ายก่อน ในเวอร์ชันนี้ เราจะใช้ JSON ในการจัดเก็บข้อมูลเซสชันในคุกกี้

สร้างไฟล์ที่เรียกว่า session/index.ts และรวมโค้ดต่อไปนี้เข้าไป:

บรรทัดแรก "use server" หมายเหตุฟังก์ชันของไฟล์นี้เป็น Server Actions

เนื่องจากเราไม่สามารถเข้าถึง request และ response ได้โดยตรง เราจึงใช้ next/headers ในการอ่านและเขียนคุกกี้ ซึ่งใช้ได้เฉพาะใน Server Actions

กำลังมา: Server Actions สองงานเพิ่ม#

เมื่อมีไลบรารีเซสชันอยู่แล้ว ก็ถึงเวลาสร้างฟีเจอร์เข้าระบบและออกระบบเพื่อแสดงให้เห็นความสามารถของเซสชัน

ผสานโค้ดต่อไปนี้ลงใน user/index.ts:

ที่นี่ เรากำลังใช้กระบวนการเข้าระบบแบบ 'เสมือน' ที่ต้องการเพียงชื่อผู้ใช้

สร้างหน้าเพจ#

ใน App Router หน้ามักจะเป็นคอมโพเนนต์แบบอะซิงโครนัส และ Server Actions ไม่สามารถถูกเรียกใช้โดยตรงจากคอมโพเนนต์ดังกล่าวได้ เราจำเป็นต้องสร้างคอมโพเนนต์โดยใช้ "use client"

components/sign-in.tsx

components/sign-out.tsx

สุดท้าย มาสร้าง app/page.tsx

การดำเนินการเข้ารหัส#

งานของ Server Actions เสร็จสมบูรณ์แล้ว ตอนนี้ ขั้นตอนสุดท้ายคือต้องมีการประยุกต์ใช้การเข้ารหัสที่สามารถทำได้ผ่าน crypto

ต่อไป แก้ไขไลบรารีเซสชันเพื่อดำเนินการตามนี้:

สรุป#

ขอแสดงความยินดี! คุณได้ดำเนินการเซสชันแบบไม่มีสถานะสำหรับ Next.js อย่างสำเร็จ นี่คือ ตัวอย่างออนไลน์ บน Vercel และคุณสามารถดาวน์โหลดซอร์สโค้ดทั้งหมด ที่นี่ เราหวังว่าคู่มือนี้จะช่วยเสริมความเข้าใจใน Server Actions ใหม่ล่าสุด

ถัดไป เราจะสำรวจวิธีการใช้ Server Actions เพื่อบูรณาการ Logto สำหรับ Next.js คอยติดตาม!