tiktok นับยอดวิวยังไง

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

วิธีการดึงข้อมูลทั่วไปใน Next.js ได้แก่:

• ใช้ getStaticProps: getStaticProps เป็นฟังก์ชันที่เรียกใช้เมื่อหน้าถูกสร้างขึ้นแบบคงที่ สามารถใช้เพื่อดึงข้อมูลจากแหล่งข้อมูลภายนอกและรวมไว้ในหน้า
• ใช้ getServerSideProps: getServerSideProps เป็นฟังก์ชันที่เรียกใช้เมื่อหน้าถูกสร้างขึ้นแบบไดนามิกบนเซิร์ฟเวอร์ สามารถใช้เพื่อดึงข้อมูลจากแหล่งข้อมูลภายนอกและรวมไว้ในหน้า
• ใช้ useEffect: useEffect เป็น hook ที่สามารถใช้เพื่อดึงข้อมูลจากแหล่งข้อมูลภายนอกและรวมไว้ในหน้าเมื่อส่วนประกอบถูกสร้างขึ้นหรืออัปเดต

ต่อไปนี้คือตัวอย่างวิธีการดึงข้อมูล JSON จาก API โดยใช้ getStaticProps:

// pages/index.js

export default function Index() {
  const data = useStaticQuery(
    graphql`
      query {
        data {
          name
          age
        }
      }
    `,
  );

  return (
    <div>
      <h1>This is the index page</h1>
      <p>The user's name is {data.data.name}</p>
      <p>The user's age is {data.data.age}</p>
    </div>
  );
}

ไฟล์นี้ใช้ getStaticProps เพื่อดึงข้อมูล JSON จาก API

ข้อมูลนี้จะถูกรวมไว้ในหน้าเมื่อหน้าถูกสร้างขึ้นแบบคงที่

ต่อไปนี้คือตัวอย่างวิธีการดึงข้อมูล JSON จาก API โดยใช้ getServerSideProps:

// pages/index.js

export default function Index() {
  const data = useServerSideProps(
    async (req, res) => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const data = await response.json();

      return {
        data,
      };
    },
  );

  return (
    <div>
      <h1>This is the index page</h1>
      <p>The user's name is {data.data.name}</p>
      <p>The user's age is {data.data.age}</p>
    </div>
  );
}

ไฟล์นี้ใช้ getServerSideProps เพื่อดึงข้อมูล JSON จาก API

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

ต่อไปนี้คือตัวอย่างวิธีการดึงข้อมูล JSON จาก API โดยใช้ useEffect:

// pages/index.js

import React, { useEffect } from 'react';
import axios from 'axios';

export default function Index() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users/1').then((response) => {
      setData(response.data);
    });
  }, []);

  return (
    <div>
      <h1>This is the index page</h1>
      <p>The user's name is {data?.name}</p>
      <p>The user's age is {data?.age}</p>
    </div>
  );
}

ไฟล์นี้ใช้ useEffect เพื่อดึงข้อมูล JSON จาก API

ข้อมูลนี้จะถูกรวมไว้ในหน้าเมื่อส่วนประกอบถูกสร้างขึ้นหรืออัปเดต