Obteniu dades compartides a Next.js amb una sol·licitud única

Bloc

Obteniu dades compartides a Next.js amb una sol·licitud única

Feu un cop d'ull a les estratègies de memòria cau amb la capa NodeJS davant de Next.js

En revisar el procés de compilació del meu projecte actual, em vaig adonar que la generació de pàgines amb getStaticProps genera moltes sol·licituds a un punt final. No és un gran problema en el meu cas, ja que el nostre backend és bastant ràpid, però en cercar amb Google aquest problema va demostrar que hi ha gent que està tenint problemes. Per exemple, el problema pot ser greu en cas d'una base de dades lenta o quan el backend no pugui fer front a 100 sol·licituds per segon. Així que vaig decidir provar de solucionar aquest problema i millorar el temps de construcció del meu projecte.

Per què tantes sol·licituds?

Abans d’endinsar-nos en el procés de construcció de Next.js, vegem com Gatsby, un altre generador de llocs estàtics, fa una cosa similar. Gatsby té un mecanisme molt diferent, ja que fa SSG només quan Next.js s'inicia com a marc SSR.

Gatsby té diversos passos de procés de construcció, però els dos principals són: extreure dades i omplir components amb dades i, a continuació, renderitzar. Els connectors de Gatsby solen utilitzar la capa de dades de GraphQL per emmagatzemar dades de fonts de dades (segur que podeu crear sense capa de dades de GraphQL i utilitzar dades no estructurades). Gatsby executa connectors de dades, després els recuperen i els posen a la capa de dades. Després rep consultes de GraphQL a partir de pàgines i prepara dades per a plantilles. Després d'això, es completen els components amb dades. Aquesta manera de construir pàgines sembla senzilla i directa. Però Next.js funciona d’una altra manera.

Com he dit abans, Next.js originalment era un framework només SSR amb la funció SSG afegida més endavant. Té una API on obteniu dades i les passeu a totes les pàgines, però aquest mètode trenca l'optimització SSG. Parlo de getInitialData quan s'utilitza a l'interior _app.js

Per tenir pàgines SSG, només fem servir getStaticProps o simplement feu pàgines sense obtenir dades. Quan Next.js crea pàgines, executa la funció de recuperació de dades si es troba dins del fitxer de pàgina i, a continuació, genera una pàgina amb aquestes dades. I el procés es repeteix pàgina rere pàgina. Per tant, si es comparteixen dades, se sol·licitaran cada vegada per a cada pàgina. Si el nombre de pàgines de l’aplicació augmenta, també augmentarà el nombre de sol·licituds.

La meva aplicació requereix mostrar la llista de ciutats a cada pàgina i aquestes ciutats s’han de definir al servidor. Sabia com funcionava Gatsby i volia afegir un mecanisme similar, però més senzill i sense GraphQL

#nodejs #javascript #nextjs

itnext.io

Obteniu dades compartides a Next.js amb una sol·licitud única

Obteniu informació sobre com podeu construir el vostre projecte amb les dades compartides a Next.js amb una sol·licitud única. Em vaig adonar que la generació de pàgines amb getStaticProps genera moltes sol·licituds a un punt final.