next plugin preval Download - next plugin preval Source Code Download

nächstes Plugin-Präval ·

Vorbereitete asynchronisierte Funktionen (für Datenabrufe) zum Bauzeit und importieren sie wie 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 ;

Warum?

Der primäre Mechanismus als nächstes.JS bietet statische Daten getStaticProps - was ein großartiges Merkmal ist und das richtige Werkzeug für viele Anwendungsfälle ist. Es gibt jedoch andere Anwendungsfälle für statische Daten, die nicht von getStaticProps abgedeckt werden.

Standortweite Daten : Wenn Sie statische Daten auf vielen verschiedenen Seiten benötigen, ist getStaticProps ein etwas unangenehmer Mechanismus, da Sie für jede neue Seite dieselben statischen Daten erneut abrufen müssen. Wenn Sie beispielsweise getStaticProps verwenden, um Inhalte für Ihren Header abzurufen, werden diese Daten auf jeder Seitenänderung neu abgerufen.
Statische Daten für API-Routen : Es kann nützlich sein, Datenabrufe in API-Routen vorab zu bewerten, um die Antwortzeiten zu beschleunigen und die Arbeit aus Ihrer Datenbank auszuladen. getStaticProps funktioniert nicht für API-Routen, während next-plugin-preval dies tut.
DE-DUPED- UND CODE-TSPLACHT-Daten : Da sich next-plugin-preval wie das Import von JSON verhält, können Sie die Optimierungen nutzen, die Bund für den Importieren von Standard-statischen Assets haben. Dies beinhaltet Standard-Code-Splitting und De-Enttäuschung.
Zero Runtime : Prävaldateien werden nicht an den Browser gesendet, nur der ausgegebene JSON.

In den Rezepten für konkrete Beispiele finden Sie.

Installation

Installieren

 yarn add next-plugin-preval

oder

 npm i next-plugin-preval

Hinzufügen zu 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 */ ) ;

Verwendung

Erstellen Sie .preval.js Datei mit der preval() .preval.ts

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

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

export default preval ( getData ( ) ) ;

Importieren Sie dann diese Datei überall. Das Ergebnis des Versprechens wird zurückgegeben.

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

Wenn Sie eine .preval -Datei importieren, importieren Sie JSON. next-plugin-preval wird Ihre Funktion während des Builds ausgeführt und einen JSON-Blob als Modul inline.

Euen Wichtige Anmerkungen

Dies funktioniert über einen Webpackloader, der Ihren Code nimmt, kompiliert und in Node.js.

Da dies eine Optimierung auf Bundlerebene ist, wird es nicht mit dem Vorschau -Modus von Next.js während der dynamischen SSR oder sogar ISR aktualisiert. Sobald diese Daten während des ersten Builds generiert wurden, kann sie sich nicht ändern. Es ist wie JSON importieren. Sehen Sie dieses Muster für eine Arbeit.
Da dieses Plugin Code direkt in node.js ausführt, wird der Code im typischen Next.js -Serverkontext nicht ausgeführt. Dies bedeutet, dass bestimmte Injektionen als Next.js auf Bundlerebene nicht verfügbar sein werden. Wir versuchen unser Bestes, um diesen Kontext über require('next') zu verspotten. Für die meisten Datenabfragen sollte dies ausreichen, bitte öffnen Sie ein Problem, wenn etwas scheinbar erscheint.

Rezepte

Standortweite Daten: Shared Header

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

Statische Daten für API-Routen: Vorbewertete Auflistungen

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

Statische Code-Split-Daten: Laden nicht kritischer Daten laden

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

Unterstützung des Vorschaufels

Wie in den Notizen angegeben, ändert sich das Ergebnis des nächsten Plugin-Prävals nicht, nachdem er den Build verlässt. Sie können jedoch weiterhin den Vorschau -Modus funktionieren, wenn Sie Ihre Datenabruffunktion extrahieren und sie basierend auf dem Vorschau -Modus aufrufen (über context.preview . Wenn der Vorschau -Modus nicht aktiv ist, können Sie standardmäßig in die vorherige Datei vorgesehen.

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