Nextjs

Image of Author
October 14, 2022 (last updated September 16, 2024)

Nextjs is a JavaScript and TypeScript "meta-framework" that uses React. It is maintained by Vercel

Reading repository files

Files in your project repository can be read successfully. The tricky part is that relative paths work in dev, but will not work on prod. The fix is to use Nodejs APIs to convert your relative path to an absolute path. I am doing this via path.resolve, e.g., path.resolve(./local.json).

Nodejs vs Edge runtime

Nextjs API Routes are hosted on AWS Lambas and are referred to as the "Nodejs runtime", which is distinct from the Edge runtime which leverages Web APIs. I do not know where/how the edge runtime is hosted, nor if it's "on top" of Node or via a different runtime entirely.

FAQ

What is SSR?

SSR stands for server-side rendering (of javascript). See my note on React SSR (Server-Side Rendering) for more.

This is effectively a React feature. Nextjs gets a lot of this feature for free from React APIs.

What is ISR?

ISR stands for Incremental Static Regeneration

Static pages can be stored/cached in CDNs and therefore have fast response times. Nextjs can usually detect when a page is static and cache it automatically.

Sometime, you have pages that are just barely dynamic. For example, a page that displays data from a data source that only updates hourly. Ideally, you could generate the page statically and cache it in a CDN. Then, you'd have a job that runs, for example, hourly, and refreshes the cached page. This is essentially what ISG does.

So long as you can collect your data into a single initial props fetch, you can leverage ISG to cache the page. Refetching props and regenerating the cached page is managed by an additional return value in getStaticProps.

On-Demand ISG is normal ISG plus a webhook. You set up an endpoint that you can hit with an auth payload to trigger a refresh on demand.