ਡਾਇਨਾਮਿਕ ਰੂਟਸ ਅਤੇ generateStaticParams ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

IT Interview Practice · Accepted Answer

**ਡਾਇਨਾਮਿਕ ਰੂਟਸ** ਵੇਰੀਏਬਲ URL ਸੈਗਮੈਂਟਸ ਨੂੰ ਮੇਲ ਕਰਨ ਲਈ ਬਰੈਕਟ ਕੀਏ ਫੋਲਡਰ ਨਾਮ ਵਰਤਦੇ ਹਨ, ਅਤੇ **`generateStaticParams`** Next.js ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ build ਸਮੇਂ ਕਿਹੜੇ ਪੰਨੇ pre-render ਕਰਨੇ ਹਨ (SSG/ISR ਲਈ)। ## ਡਾਇਨਾਮਿਕ ਸੈਗਮੈਂਟ ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default async function Post({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // params.slug is the URL value return

{post.title}

; } ``` ## generateStaticParams — ਖਾਸ ਪੰਨਿਆਂ ਨੂੰ ਪੂਰਵ-ਰੈਂਡਰ ਕਰਨਾ ```tsx // Tell Next.js the list of slugs to build statically export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map(post => ({ slug: post.slug })); // → builds /blog/post-1, /blog/post-2, ... as static HTML at build time } ``` ਇਸ ਤੋਂ ਬਿਨਾਂ, ਇੱਕ ਡਾਇਨਾਮਿਕ ਰੂਟ on-demand (SSR) ਵਿੱਚ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। **ਇਸ ਨਾਲ**, Next.js build ਵਿੱਚ ਹਰ ਵਾਪਸ ਆਏ ਪਰਾਮ ਲਈ ਇੱਕ static ਪੰਨਾ pre-generate ਕਰਦਾ ਹੈ — ਤੁਹਾਨੂੰ dynamic ਪੰਨਿਆਂ ਦੇ ਜਾਣੇ ਸੈਟ ਲਈ SSG ਦੀ ਗਤੀ ਦਿੰਦਾ ਹੈ (ਹਰ ਬਲੌਗ ਪੋਸਟ, ਹਰ ਉਤਪਾਦ)। ## ਲਿਸਟ ਵਿੱਚ ਨਾ ਹੋਏ ਪਰਾਮਾਂ ਨੂੰ ਸੰਭਾਲਣਾ ```tsx // what happens for a slug NOT returned by generateStaticParams? export const dynamicParams = true; // (default) render unknown slugs on-demand (ISR-like) // export const dynamicParams = false; // return 404 for any slug not pre-built ``` ਇਹ ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰਮੁੱਖ/ਸਭ ਤੋਂ ਆਮ ਪੰਨਿਆਂ ਨੂੰ pre-build ਕਰਨ ਅਤੇ ਫਿਰ ਵੀ long tail ਨੂੰ serve (ਜਾਂ 404) ਕਰਨ ਦਿੰਦਾ ਹੈ। ## Catch-all ਅਤੇ ਨੇਸਟਿਡ ਪਰਾਮ ```text app/shop/[...categories]/page.tsx → /shop/a/b/c (params.categories = ['a','b','c']) app/[lang]/[slug]/page.tsx → multiple params: { lang, slug } ``` ```tsx export async function generateStaticParams() { return [{ lang: "en", slug: "about" }, { lang: "vi", slug: "about" }]; } ``` ## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ ਇਹ ਜੋੜਾ ਇਸ ਬਾਰੇ ਹੈ ਕਿ ਤੁਸੀਂ dynamic ਪੰਨਿਆਂ ਦੇ ਵੱਡੇ ਸੈਟਸ (ਬਲੌਗਜ਼, ਈ-ਕਾਮਰਸ ਕੈਟਲਾਗਜ਼, ਡੋਕੂਮੈਂਟਸ) ਨੂੰ static ਤੌਰ ਤੇ generate ਕਿਵੇਂ ਕਰਦੇ ਹੋ top ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ SEO ਲਈ, ਜਦਕਿ `dynamicParams` pre-built ਨਾ ਕੀਤੇ ਪੰਨਿਆਂ ਲਈ fallback ਨਿਯੰਤਰਣ ਕਰਦਾ ਹੈ। `generateStaticParams` (ਕਿਹੜੇ ਪੰਨੇ pre-build ਕਰਨੇ ਹਨ) ਅਤੇ caching/`revalidate` ਵਿਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ App Router ਵਿੱਚ dynamic ਸਮੱਗਰੀ ਲਈ SSG/ISR ਕਰਨ ਦਾ ਮੂਲ ਹੈ।

ਡਾਇਨਾਮਿਕ ਸੈਗਮੈਂਟ

generateStaticParams — ਖਾਸ ਪੰਨਿਆਂ ਨੂੰ ਪੂਰਵ-ਰੈਂਡਰ ਕਰਨਾ

ਲਿਸਟ ਵਿੱਚ ਨਾ ਹੋਏ ਪਰਾਮਾਂ ਨੂੰ ਸੰਭਾਲਣਾ

Catch-all ਅਤੇ ਨੇਸਟਿਡ ਪਰਾਮ

ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ