Next.js
A "web app" is typically a piece of software that...
- Runs in a browser (Chrome, Firefox, Safari, Edge, Chromium, etc.)
- Contains interactive content
What differentiates web apps from websites is the kinds of interactions someone can perform. There's no simple binary between "website" and "web app", it's more of a spectrum that software can fall along.
Web System Spectrum
generateStaticParams
generateStaticParams
is a function that allows you to determine dynamic-routes at build-time instead of runtime. This will let you query a database or other external system for data once, when the software is built.
This can greatly reduce your cloud infrastructure overhead if you have dynamic content that can be determined ahead of time.
1234567891011121314151617181920// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
const posts = await database.query(...);
return posts.map((post) => ({
slug: post.slug,
}))
}
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page(props: { params: Promise<{ slug: string }> }) {
const { slug } = await props.params;
// Query for the full set of data by the `slug` param
const post = await database.query(...);
// Render static content
// ...
}
export const dynamic = "force-static";
export const dynamic = "force-static";
will force your page/route to be static. Any dynamic functions (cookies
, headers
, etc.) will return empty values.
Any data fetched by the page will be fetched one at build time.
By using generateStaticParams
and export const dynamic = "force-static";
, you can render all pages in your Nest.js web app at build time.
You can still use Client Components if you want highly-interactive content.