next plugin preval下載 - next plugin preval源代碼下載

下一泛型流動·

構建時間預先評估異步功能（用於數據獲取）並像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在next-plugin-preval時對API路線不起作用。
刪除和代碼拆分數據：由於next-plugin-preval行為就像導入JSON一樣，您可以利用捆綁器對導入標準靜態資產的優化。這包括標準的代碼拆分和撤銷。
零運行時：Preval文件不會發送到瀏覽器，而僅發送其輸出的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將在構建過程中運行您的功能，並在內聯json blob作為模塊。

配x重要說明

這可以通過webpack加載程序進行操作，該webpack加載程序將您的代碼彙編，並將其運行在Node.js中。

由於這是在Bundler級別的優化，因此在Dynamic SSR甚至ISR期間，它不會使用Next.js預覽模式進行更新。一旦在初始構建過程中生成了此數據，就無法更改。就像進口JSON。請參閱此模式以進行工作。
由於此插件直接在node.js中運行代碼，因此代碼未在典型的Next.js服務器上下文中執行。這意味著Next的某些注射。 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 >
  ) ;
}

支持預覽模式

正如註釋中所述，下一浮游生物離開構建後不會改變。但是，如果提取數據獲取功能並根據預覽模式有條件調用（通過context.preview 。預覽模式不活動，則可以使預覽模式起作用，則可以默認為preval文件。

 // 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 } } ;
}