Netlify y Next.js

Cassidy Williams ha estado haciendo un Blogvent (blogs todos los días durante un mes) en Netlify Blog. Muchas de las publicaciones del blog tratan sobre Next.js. Hay muchas cosas que me gustan de Next.js. Acabo de tomar uno de los entrantes de Cassidy por diversión. Es muy bueno que tenga React Fast-Refresh incorporado. Me gusta cómo en cualquier “Página” puedes importar y usar un archivo Headpara controlar cosas que estarían en un archivo head. Esta fue mi primera pequeña obra con Next, así que disculpen mi carácter básico.

Pero, para mí, lo más convincente de Next.js es la facilidad con la que admite todo el espectro de renderizado. Le recomendamos realizar renderizado de archivos estáticos de forma predeterminada (inteligente), luego, si necesita realizar renderizado del lado del servidor (SSR), simplemente actualice cualquier componente de la página para que tenga esto:

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

La suposición es que estás haciendo SSR porque necesitas acceder a un servidor para obtener datos para poder renderizar la página, pero preferirías hacerlo en el lado del servidor para que la página pueda renderizarse rápidamente y sin JavaScript si es necesario (excelente para SEO). Eso supone que hay un servidor de nodo listo para hacer ese trabajo. En Netlify, eso significa una función (Node Lambda), pero apenas tienes que pensar en ello, porque simplemente colocas esto en tu netlify.tomlarchivo:

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

Ahora tienes estática donde la necesitas, renderizada en el servidor donde la necesitas, pero tampoco renuncias a la renderización del lado del cliente, lo cual es agradable y rápido una vez que el sitio está iniciado. Creo que dispara algo de JSON o algo así, magia de marco.

Configura una ruta SSR rápida desde mi página de inicio para jugar, y puedo ver claramente que tanto mi página de inicio (estática) como mi /coolruta (SSR) devuelven HTML estático al cargar.

Admito que me gusta trabajar en React, y Next.js es un marco muy agradable para hacerlo debido al equilibrio entre simplicidad y potencia. Es fantástico que se ejecute en Netlify con tanta facilidad.