next plugin preval
v1.2.6
Las funciones de async pre-evaluación (para obtener datos de datos) en el tiempo de compilación e importarlas como 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 ; El mecanismo primario Next.js proporciona datos estáticos es getStaticProps , que es una gran característica y es la herramienta adecuada para muchos casos de uso. Sin embargo, hay otros casos de uso para datos estáticos que no están cubiertos por getStaticProps .
getStaticProps es un mecanismo algo incómodo porque para cada nueva página, tendrá que volver a buscar los mismos datos estáticos. Por ejemplo, si usa getStaticProps para obtener contenido para su encabezado, esos datos se volverán a buscar en cada cambio de página.getStaticProps no funciona para las rutas API, mientras que next-plugin-preval .next-plugin-preval se comporta como la importación de JSON, puede aprovechar los que los Bundlers de optimizaciones tienen para importar activos estáticos estándar. Esto incluye la división de código estándar y el desdúpere.Vea las recetas de ejemplos concretos.
yarn add next-plugin-preval
o
npm i next-plugin-preval
// next.config.js
const createNextPluginPreval = require ( 'next-plugin-preval/config' ) ;
const withNextPluginPreval = createNextPluginPreval ( ) ;
module . exports = withNextPluginPreval ( /* optionally add a next.js config */ ) ; Cree un archivo con la extensión .preval.ts o .preval.js y luego exporte una promesa envuelta en preval() .
// my-data.preval.js
import preval from 'next-plugin-preval' ;
async function getData ( ) {
return { hello : 'world' ; }
}
export default preval ( getData ( ) ) ;Luego importe ese archivo en cualquier lugar. Se devuelve el resultado de la promesa.
// 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 ; Cuando importa un archivo .preval , es como si estuviera importando JSON. next-plugin-preval ejecutará su función durante la compilación y en línea una blob JSON como módulo.
Esto funciona a través de un cargador web que toma su código, lo compila y lo ejecuta dentro de Node.js.
require('next') . Para la mayoría de las consultas de datos, esto debería ser suficiente, sin embargo, abra un problema si algo parece apagado. // 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 ; // 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 >
) ;
} Como se indica en las notas, el resultado de la próxima prevaluación de plugin no cambiará después de que abandone la construcción. Sin embargo, aún puede hacer que el modo de vista previa funcione si extrae su función de recuperación de datos y la llama condicionalmente en función del modo de vista previa (a través de context.preview . Si el modo de vista previa no está activa, puede predeterminar el archivo 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 } } ;
} next-data-hooks : crea un patrón para usar getStaticProps como ganchos react. Ideal para el caso de datos de todo el sitio cuando se necesita el modo de vista previa o ISR.
