Next.js - การแสดงผลล่วงหน้า

ใน Next.js เรารู้ว่ามันสร้าง HTML สำหรับหน้าที่เรียกว่าการแสดงผลล่วงหน้า Next.JS รองรับการแสดงผลล่วงหน้าสองประเภท

Static Generation- วิธีนี้จะสร้างหน้า HTML ในเวลาสร้าง HTML ที่แสดงผลล่วงหน้านี้ถูกส่งไปตามคำขอแต่ละรายการ วิธีนี้มีประโยชน์สำหรับเว็บไซต์ทางการตลาดบล็อกผลิตภัณฑ์อีคอมเมิร์ซที่แสดงรายการ wesites ความช่วยเหลือเว็บไซต์เอกสาร
Server Side Generation- วิธีนี้สร้างหน้า HTML ในแต่ละคำขอ วิธีนี้เหมาะเมื่อเนื้อหาของหน้า html อาจแตกต่างกันไปตามแต่ละคำขอ

ต่อหน้าการแสดงผลล่วงหน้า

Next.JS อนุญาตให้ตั้งค่าวิธีการแสดงผลล่วงหน้าสำหรับแต่ละเพจโดยที่เพจส่วนใหญ่ติดตามการสร้างแบบคงที่และเพจอื่น ๆ จะใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์

การสร้างแบบคงที่โดยไม่มีข้อมูล

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

การสร้างแบบคงที่ด้วยข้อมูล

การสร้างแบบคงที่สามารถทำได้ด้วยข้อมูลในกรณีนี้หน้า HTML จะไม่พร้อมจนกว่าจะดึงข้อมูลเนื่องจาก HTML อาจขึ้นอยู่กับข้อมูล แต่ละส่วนประกอบมีวิธีพิเศษgetStaticProps ซึ่งสามารถใช้เพื่อดึงข้อมูลและส่งผ่านข้อมูลเป็นอุปกรณ์ประกอบฉากของเพจเพื่อให้เพจสามารถแสดงผลตามอุปกรณ์ประกอบฉากที่ส่งผ่าน

getStaticProps () ฟังก์ชั่นทำงานที่เวลาสร้างในการผลิตและรันสำหรับทุกคำขอในโหมด dev

มาสร้างตัวอย่างเพื่อสาธิตสิ่งเดียวกัน

ในตัวอย่างนี้เราจะสร้างการอัปเดต index.js และหน้าแรก js เพื่อให้เซิร์ฟเวอร์เข้าชมเพื่อรับข้อมูล

มาอัปเดตโปรเจ็กต์ nextjs ที่ใช้ในบทGlobal CSS Support

อัพเดตไฟล์ index.js ในไดเร็กทอรีเพจเพื่อใช้เมธอด getServerSideProps () วิธีนี้จะถูกเรียกต่อคำขอ

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

อัพเดตไฟล์ first.js ในไดเร็กทอรีเพจเพื่อใช้เมธอด getStaticProps () วิธีนี้จะถูกเรียกใช้ครั้งเดียว

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

เริ่มเซิร์ฟเวอร์ Next.js

รันคำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์ -

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

ตรวจสอบผลลัพธ์

เปิด localhost: 3000 ในเบราว์เซอร์และคุณจะเห็นผลลัพธ์ต่อไปนี้

คลิกที่ลิงค์โพสต์แรก