การใช้งาน Async ในภาษา Next.js แบบง่ายๆ พร้อมตัวอย่าง CODE และอธิบายการทำงาน

บทนำ

ในปัจจุบัน การพัฒนาเว็บแอปพลิเคชันสมัยใหม่มักจะใช้ JavaScript และเฟรมเวิร์กที่เกี่ยวข้อง หนึ่งในเฟรมเวิร์กที่ได้รับความนิยมอย่างมากคือ Next.js ซึ่งเป็นเฟรมเวิร์กที่ช่วยในการพัฒนา React แอปพลิเคชันที่ให้ความสะดวกในการจัดการกับ server-side rendering (SSR) และ static site generation (SSG)

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

Async คืออะไร?

ก่อนอื่น มาทำความเข้าใจกันก่อนว่า `async` คืออะไร โดย `async` เป็นคำที่ใช้เพื่อประกาศฟังก์ชันที่ทำงานแบบอะซิงโครนัส และช่วยให้โค้ดของเราดูเรียบร้อย และเข้าใจง่ายขึ้น โดยเฉพาะเมื่อเราต้องทำงานกับ Promise

นอกจากนี้ `async/await` ยังช่วยให้การจัดการกับข้อผิดพลาดง่ายขึ้น โดยเราสามารถใช้ `try...catch` ได้เหมือนกับการทำงานในฟังก์ชันทั่วไป

การใช้ Async ใน Next.js

1. การใช้ Async ใน server-side rendering (SSR)

ใน Next.js การทำงานกับ API โดยการดึงข้อมูลจากเซิร์ฟเวอร์เป็นเรื่องที่ง่ายมาก โดยเฉพาะอย่างยิ่งเมื่อใช้ async/await ในการจัดการข้อมูล ในการนำเข้า API เราสามารถใช้ `getServerSideProps` เพื่อดึงข้อมูลจาก API และส่งข้อมูลไปยัง component

ต่อไปคือการสร้างตัวอย่างที่เราจะใช้ APIs เพื่อดึงข้อมูลของผู้ใช้:

 // pages/users.js
import React from 'react';

export async function getServerSideProps() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();

    return {
        props: {
            users: data,
        },
    };
}

const Users = ({ users }) => {
    return (
        <div>
            <h1>Users List</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default Users;

2. อธิบายการทำงาน

ในโค้ดข้างต้น เราได้สร้างฟังก์ชัน `getServerSideProps` ซึ่งจะถูกเรียกใช้เมื่อมีการเข้าชมหน้าของผู้ใช้ ฟังก์ชันนี้จะดึงข้อมูลของผู้ใช้จาก API โดยใช้ `fetch` และจะคืนค่าข้อมูลที่ดึงได้ในรูปแบบของ props ก่อนที่จะส่งไปยัง component

เมื่อเราเข้าชมหน้าผู้ใช้ในเบราว์เซอร์ ระบบจะทำการดึงข้อมูลผู้ใช้จาก API ได้ทันที และแสดงผลในรูปแบบของรายชื่อผู้ใช้

Use Case ในโลกจริง

การใช้งานที่ดีของ async/await สามารถพบได้ในหลายสถานการณ์ เช่น แอปพลิเคชันที่แสดงรายการสินค้าจากฐานข้อมูลหรือ API ที่ต้องใช้เวลาในการโหลดข้อมูล เช่น การแสดงข้อมูลผู้ใช้บนแพลตฟอร์มโซเชียลมีเดีย การอ่านบล็อก หรือการใช้ข้อมูลจากอีกเว็บไซต์หนึ่งเพื่อแสดงผลในเว็บไซต์ของเรา

ตัวอย่างอื่นที่เป็น Use Case ที่ดีคือในกรณีของแพลตฟอร์มการจองตั๋ว การใช้ async/await ทำให้สามารถเรียกข้อมูลโปรแกรมการเดินทาง หรือราคาเที่ยวบินในขณะที่ใช้งาน เพื่อลดเวลาในการโหลดข้อมูล

3. การใช้ Async ใน client-side rendering (CSR)

นอกจากการใช้งานใน `getServerSideProps` แล้ว เรายังสามารถใช้ async/await ใน client-side rendering ได้อีกด้วย เมื่อต้องการทำงานกับ API โดยตรงใน component ที่เราใช้งานอยู่

 // pages/posts.js
import React, { useEffect, useState } from 'react';

const Posts = () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts');
            const data = await response.json();
            setPosts(data);
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>Posts List</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default Posts;

4. อธิบายการทำงาน

ในตัวอย่างนี้ เราใช้ `useEffect` เพื่อเรียก API เมื่อ component ถูก mount วิธีนี้จะทำให้เราสามารถดึงข้อมูลเมื่อหน้าโหลดบน client-side ได้ โดยไม่ต้องพึ่ง server-side rendering

ใน function `fetchData` เราใช้ async/await เพื่อรอการตอบสนองจาก API ก่อนที่จะทำการตั้งค่า state สำหรับการแสดงผลหลังจากได้รับข้อมูล

สรุปความคิดเห็น

การใช้งาน async/await ใน Next.js ทำให้การจัดการข้อมูลและการทำงานร่วมกับ API เป็นเรื่องง่ายและมีประสิทธิภาพมากขึ้น โดยทั้งการทำงานใน server-side และ client-side การใช้ async เหมาะสำหรับการพัฒนาแอปพลิเคชันที่ต้องทำงานกับข้อมูลจาก API อย่างมาก

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

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

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง