Netlify & Next.js | CSS-Tricks

Cassidy Williams macht seit einiger Zeit einen Blogvent (jeden Tag einen Monat lang bloggen) auf dem Netlify Blog. Viele der Blogbeiträge handeln von Next.js. Next.js hat viel, das gefällt. Ich habe gerade eines von Cassidys Startern zum Spaß heruntergeladen. Es ist sehr schön, dass React Fast-Refresh integriert ist. Ich mag es, wie man auf jeder "Page" eine <Head> importieren und verwenden kann, um Dinge zu steuern, die in einem <head> wären. Das war mein erstes kleines Experiment mit Next, also entschuldigt meine Einfachheit.

Aber das überzeugendste an Next.js ist für mich, wie einfach es das gesamte Rendering-Spektrum unterstützt. Es ermutigt dich standardmäßig zu statischer Dateirenderung (smart), und wenn du serverseitiges Rendering (SSR) machen musst, aktualisierst du einfach eine beliebige Page-Komponente, um dies zu tun.

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

Die Annahme ist, dass du SSR machst, weil du auf einen Server zugreifen musst, um Daten für das Rendering der Seite abzurufen, aber dies serverseitig tun möchtest, damit die Seite schnell und bei Bedarf ohne JavaScript gerendert werden kann (großartig für SEO). Das setzt voraus, dass ein Node-Server bereitsteht, um diese Arbeit zu erledigen. Auf Netlify bedeutet das eine Funktion (Node Lambda), aber du musst dich kaum darum kümmern, denn du fügst einfach dies in deine netlify.toml-Datei ein.

[[plugins]]
  package = "@netlify/plugin-nextjs"

Jetzt hast du statisches Rendering, wo du es brauchst, serverseitiges Rendering, wo du es brauchst, aber du verzichtest auch nicht auf clientseitiges Rendering, das nett und schnell ist, nachdem die Website vollständig geladen ist. Ich glaube, es schickt ein bisschen JSON herum oder so, Framework-Magie.

Ich habe eine schnelle SSR-Route von meiner Homepage eingerichtet, um damit herumzuspielen, und ich sehe deutlich, dass sowohl meine Homepage (statisch) als auch die Route /cool (SSR) beim Laden statisches HTML zurückgeben.

Ich musste sogar diesen Quellcode aufhübschen, da du HTML-Minifizierung out-of-the-box hast.

Ich gebe zu, ich arbeite gerne in React, und Next.js ist ein verdammt schönes Framework dafür wegen der Balance zwischen Einfachheit und Leistung. Es ist großartig, dass es so einfach auf Netlify läuft.

Kommentare