ดาวน์โหลด next plugin preval - ดาวน์โหลดซอร์สโค้ด next plugin preval

Next-Plugin-Preval ·

Evaluate Async ฟังก์ชั่น (สำหรับการดึงข้อมูล) ในเวลาที่สร้างและนำเข้าเช่น JSON

 // data.preval.js (or data.preval.ts)

// step 1: create a data.preval.js (or data.preval.ts) file
import preval from 'next-plugin-preval' ;

// step 2: write an async function that fetches your data
async function getData ( ) {
  const { title , body } = await /* your data fetching function */ ;
  return { title , body } ;
}

// step 3: export default and wrap with `preval()`
export default preval ( getData ( ) ) ;

 // Component.js (or Component.ts)

// step 4: import the preval
import data from './data.preval' ;

// step 5: use the data. (it's there synchronously from the build step!)
const { title , body } = data ;

function Component ( ) {
  return (
    < >
      < h1 > { title } </ h1 >
      < p > { body } </ p >
    </ >
  ) ;
}

export default Component ;

ทำไม

กลไกหลัก Next.js ให้ข้อมูลแบบคงที่คือ getStaticProps - ซึ่งเป็นคุณสมบัติที่ยอดเยี่ยมและเป็นเครื่องมือที่เหมาะสมสำหรับหลายกรณีการใช้งาน อย่างไรก็ตามมีกรณีการใช้งานอื่น ๆ สำหรับข้อมูลคงที่ที่ไม่ครอบคลุมโดย getStaticProps

ข้อมูลทั่วทั้งไซต์ : หากคุณมีข้อมูลคงที่ที่จำเป็นในหลาย ๆ หน้า getStaticProps เป็นกลไกที่ค่อนข้างน่าอึดอัดใจเพราะสำหรับแต่ละหน้าใหม่คุณจะต้องดึงข้อมูลแบบคงที่เดียวกันอีกครั้ง ตัวอย่างเช่นหากคุณใช้ getStaticProps เพื่อดึงเนื้อหาสำหรับส่วนหัวของคุณข้อมูลนั้นจะถูกเรียกใช้อีกครั้งในการเปลี่ยนแปลงทุกหน้า
ข้อมูลแบบคงที่สำหรับเส้นทาง API : มันจะเป็นประโยชน์ในการประเมินข้อมูลการดึงข้อมูลล่วงหน้าในเส้นทาง API เพื่อเพิ่มความเร็วเวลาตอบสนองและการขนถ่ายจากฐานข้อมูลของคุณ getStaticProps ไม่ทำงานสำหรับเส้นทาง API ในขณะที่ next-plugin-preval ทำ
ข้อมูลการแยกและรหัสแยก : เนื่องจาก next-plugin-preval ต่อไปทำงานเช่นการนำเข้า JSON คุณสามารถใช้ประโยชน์จากการเพิ่มประสิทธิภาพของ Bundlers สำหรับการนำเข้าสินทรัพย์คงที่มาตรฐาน ซึ่งรวมถึงการแยกรหัสมาตรฐานและการยกเลิกการทำรายการ
Zero Runtime : ไฟล์ที่ผ่านมาจะไม่ถูกส่งไปยังเบราว์เซอร์มีเพียง JSON ที่ส่งออกเท่านั้น

ดูสูตรสำหรับตัวอย่างคอนกรีต

การติดตั้ง

ติดตั้ง

 yarn add next-plugin-preval

หรือ

 npm i next-plugin-preval

เพิ่มไปที่ next.config.js

 // next.config.js
const createNextPluginPreval = require ( 'next-plugin-preval/config' ) ;
const withNextPluginPreval = createNextPluginPreval ( ) ;

module . exports = withNextPluginPreval ( /* optionally add a next.js config */ ) ;

การใช้งาน

สร้างไฟล์ด้วยส่วนขยาย .preval.ts หรือ .preval.js จากนั้นส่งออกสัญญาที่ห่อหุ้มด้วย preval()

 // my-data.preval.js
import preval from 'next-plugin-preval' ;

async function getData ( ) {
  return { hello : 'world' ; }
}

export default preval ( getData ( ) ) ;

จากนั้นนำเข้าไฟล์นั้นทุกที่ ผลลัพธ์ของสัญญาจะถูกส่งคืน

 // component.js (or any file)
import myData from './my-data.preval' ; // ? this is effectively like importing JSON

function Component ( ) {
  return (
    < div >
      < pre > { JSON . stringify ( myData , null , 2 ) } </ pre >
    </ div >
  ) ;
}

export default Component ;

เมื่อคุณนำเข้าไฟล์ .preval มันเหมือนกับว่าคุณกำลังนำเข้า JSON next-plugin-preval จะเรียกใช้ฟังก์ชั่นของคุณในระหว่างการสร้างและอินไลน์ Blob JSON เป็นโมดูล

บันทึกสำคัญ

วิธีนี้ใช้งานได้ผ่าน Webpack Loader ที่ใช้รหัสของคุณรวบรวมและเรียกใช้ภายใน Node.Js

เนื่องจากนี่คือการเพิ่มประสิทธิภาพในระดับ Bundler จึงไม่อัปเดตด้วยโหมดแสดงตัวอย่าง next.js ในช่วง SSR แบบไดนามิกหรือแม้กระทั่ง ISR เมื่อข้อมูลนี้ถูกสร้างขึ้นในระหว่างการสร้างเริ่มต้นมันจะไม่สามารถเปลี่ยนแปลงได้ มันเหมือนกับการนำเข้า JSON ดูรูปแบบนี้สำหรับการทำงานรอบ ๆ
เนื่องจากปลั๊กอินนี้เรียกใช้รหัสโดยตรงใน node.js รหัสจึงไม่ถูกเรียกใช้ในบริบทเซิร์ฟเวอร์ Next.js ทั่วไป ซึ่งหมายความว่าการฉีดบางอย่างถัดไป js ทำในระดับ Bundler จะไม่สามารถใช้ได้ เราพยายามอย่างดีที่สุดเพื่อเยาะเย้ยบริบทนี้ผ่าน require('next') สำหรับการสืบค้นข้อมูลส่วนใหญ่สิ่งนี้ควรเพียงพอ แต่โปรดเปิดปัญหาหากมีบางสิ่งที่ดูเหมือนจะปิด

สูตรอาหาร

ข้อมูลทั่วทั้งไซต์: ส่วนหัวที่ใช้ร่วมกัน

 // header-data.preval.js
import preval from 'next-plugin-preval' ;

async function getHeaderData ( ) {
  const headerData = await /* your data fetching function */ ;

  return headerData ;
}

export default preval ( getHeaderData ( ) ) ;

 // header.js
import headerData from './header-data.preval' ;
const { title } = headerData ;

function Header ( ) {
  return < header > { title } </ header > ;
}

export default Header ;

ข้อมูลคงที่สำหรับเส้นทาง API: รายชื่อที่ประเมินล่วงหน้า

 // products.preval.js
import preval from 'next-plugin-preval' ;

async function getProducts ( ) {
  const products = await /* your data fetching function */ ;

  // create a hash-map for O(1) lookups
  return products . reduce ( ( productsById , product ) => {
    productsById [ product . id ] = product ;
    return productsById ;
  } , { } ) ;
}

export default preval ( getProducts ( ) ) ;

 // /pages/api/products/[id].js
import productsById from '../products.preval.js' ;

const handler = ( req , res ) => {
  const { id } = req . params ;

  const product = productsById [ id ] ;

  if ( ! product ) {
    res . status ( 404 ) . end ( ) ;
    return ;
  }

  res . json ( product ) ;
} ;

export default handler ;

ข้อมูลคงที่รหัส: การโหลดข้อมูลที่ไม่สำคัญ

 // states.preval.js
import preval from 'next-plugin-preval' ;

async function getAvailableStates ( ) {
  const states = await /* your data fetching function */ ;
  return states ;
}

export default preval ( getAvailableStates ( ) ) ;

 // state-picker.js
import { useState , useEffect } from 'react' ;

function StatePicker ( { value , onChange } ) {
  const [ states , setStates ] = useState ( [ ] ) ;

  useEffect ( ( ) => {
    // ES6 dynamic import
    import ( './states.preval' ) . then ( ( response ) => setStates ( response . default ) ) ;
  } , [ ] ) ;

  if ( ! states . length ) {
    return < div > Loading… </ div > ;
  }

  return (
    < select value = { value } onChange = { onChange } >
      { states . map ( ( { label , value } ) => (
        < option key = { value } value = { value } >
          { label }
        </ option >
      ) ) }
    </ select >
  ) ;
}

โหมดการสนับสนุนตัวอย่าง

ตามที่ระบุไว้ในบันทึกย่อผลลัพธ์ของ Plugin-Preval ถัดไปจะไม่เปลี่ยนแปลงหลังจากออกจากการสร้าง อย่างไรก็ตามคุณยังสามารถทำให้โหมดตัวอย่างทำงานได้หากคุณดึงฟังก์ชั่นการดึงข้อมูลของคุณและเรียกว่าตามเงื่อนไขตามโหมดตัวอย่าง (ผ่าน context.preview หากโหมดตัวอย่างไม่ทำงานคุณสามารถเริ่มต้นกับไฟล์ที่ผ่านมาได้

 // get-data.js

// 1. extract a data fetching function
async function getData ( ) {
  const data = await /* your data fetching function */ ;
  return data
}

 // data.preval.js
import preval from 'next-plugin-preval' ;
import getData from './getData' ;

// 2. use that data fetching function in the preval
export default preval ( getData ( ) ) ;

 // /pages/some-page.js
import data from './data.preval' ;
import getData from './get-data' ;

export async function getStaticProps ( context ) {
  // 3. conditionally call the data fetching function defaulting to the prevalled version
  const data = context . preview ? await getData ( ) : data ;
  
  return { props : { data } } ;
}