21. Server Components and the database
In the Next.js App Router, this Server Component queries the database directly. What does the browser receive?
import { db } from '@/lib/db'
export default async function Page() {
const products = await db.product.findMany()
return <ProductList items={products} />
}- A.The full component source, including the db import and connection string
- B.Nothing; Server Components cannot use async/await
- C.An empty page that fetches products later with useEffect
- D.The rendered result (HTML and the RSC payload); the database code and credentials stay on the server
Show answer
Answer: D. The rendered result (HTML and the RSC payload); the database code and credentials stay on the server
Server Components run only on the server, so their code and imports are never shipped to the client bundle. The browser gets HTML plus a serialized RSC payload with the rendered output and any props passed to Client Components. Be careful: whatever you pass as props to a Client Component is sent to the browser.
22. Relative fetch on the server
A Server Component calls await fetch('/api/products') and fails during render with an invalid URL error. What is the best fix?
- A.Add 'use client' to the component
- B.Wrap the fetch in useEffect
- C.Import and call the data function (or query the database) directly instead of calling your own API route
- D.Change the path to './api/products'
Show answer
Answer: C. Import and call the data function (or query the database) directly instead of calling your own API route
On the server there is no page origin, so a relative URL cannot be resolved. Calling your own Route Handler over HTTP would also add an extra network hop and serialization. Server Components can run the same data-access code the route uses, keeping the API route for external clients.
23. Reading params in Next.js 15+
Which page code reads the id correctly in Next.js 15 and later?
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
// read id here
}- A.const { id } = params.value
- B.const id = useParams(params)
- C.const { id } = await params
- D.const id = params.get('id')
Show answer
Answer: C. const { id } = await params
From Next.js 15, params and searchParams passed to pages, layouts and route handlers are Promises. You await them in an async Server Component, or unwrap with React use() in a Client Component. Next.js 16 removed the old sync access.
24. Server content inside a client wrapper
You want a Client Component Modal that wraps content from a Server Component. What is the right pattern?
- A.Import the Server Component inside the Modal file
- B.Add 'use server' to the top of the Modal file
- C.Pass the server content to the Modal as children
- D.Render the Modal only inside a route handler
Show answer
Answer: C. Pass the server content to the Modal as children
A Client Component cannot import a Server Component, but it can receive one as children or other props. The server renders that part first and passes the result into the client tree.
25. Same DB query in layout and page
The layout and the page both call getUser(id), which queries the database. How do you make it run once per request?
- A.Store the user in a global variable
- B.Call getUser only in a useEffect
- C.Use fetch with cache: 'no-store'
- D.Wrap getUser with React cache()
Show answer
Answer: D. Wrap getUser with React cache()
React cache() memoises a function for the length of one server request. Both calls share the result, and the next request starts fresh. A global variable would leak data between users.
26. Same fetch called twice
Two Server Components in the same render call fetch('https://api.x.com/me') with the same options. How many network requests are made?
- A.Two, as each component makes its own request
- B.None, because fetch is blocked on the server
- C.One, because GET fetches are memoised per render
- D.Three, including one prefetch from the client
Show answer
Answer: C. One, because GET fetches are memoised per render
React and Next.js memoise identical GET fetch calls during a single render pass. You can call the same fetch where you need the data instead of passing it through many props.
27. Where to check permissions
A deleteInvoice Server Action is called only from an admin page. Where must the permission check be?
- A.Only in the admin page layout
- B.Inside the Server Action itself
- C.Only in the button's onClick handler
- D.Only in proxy.ts for that path
Show answer
Answer: B. Inside the Server Action itself
A Server Action is a public POST endpoint; anyone who finds its ID can call it. Page or layout checks do not protect it. Verify the session and role inside the action every time.
28. GET route handler caching
In Next.js 15+, is a GET route handler that returns Response.json(data) cached by default?
- A.Yes, it is cached forever after the first call
- B.No, it runs on each request unless opted in
- C.Yes, it is cached for exactly one minute
- D.No, GET handlers are not allowed in route.ts
Show answer
Answer: B. No, it runs on each request unless opted in
Next.js 15 made GET route handlers dynamic by default. You can opt in to static output with export const dynamic = 'force-static', or use caching APIs for the data.
29. First visitor after revalidate time
A page has revalidate = 60. It was generated 5 minutes ago. What does the next visitor get?
- A.A loading screen until the new page is built
- B.A 503 error until the build finishes
- C.The old page, while a new one is built in the background
- D.The new page, built before the response
Show answer
Answer: C. The old page, while a new one is built in the background
ISR uses stale-while-revalidate: the expired page is still served immediately, and regeneration happens in the background. Later visitors get the fresh page once it is ready.
30. Tagging cached data
Inside a 'use cache' function that loads a product, how do you tag it so it can be revalidated later?
- A.Call cacheTag('product-42') inside the function
- B.Return { tag: 'product-42' } from the function
- C.Add next: { tags } to the use cache line
- D.Set a header named x-cache-tag on the page
Show answer
Answer: A. Call cacheTag('product-42') inside the function
cacheTag attaches tags to the cache entry. Later, revalidateTag or updateTag with that tag invalidates it. Use specific tags like product-42 plus broad ones like products.
31. Hidden data waterfall
A page awaits getUser(), then renders <Orders userId>, which awaits getOrders(). getOrders needs only the user ID from the URL. What is the issue?
- A.Both fetches run in parallel already
- B.Orders cannot start until the user fetch ends
- C.getOrders will be cached forever
- D.React cancels the second fetch
Show answer
Answer: B. Orders cannot start until the user fetch ends
Because Orders renders only after the parent finishes awaiting, the two requests run one after the other. Starting getOrders earlier with the ID from params, or using Promise.all, removes the wait.
32. How long React cache() lasts
A getRates() function wrapped with React cache() calls a currency API. How long does its result stay memoised on the server?
- A.For the life of the server process
- B.Until the next deploy of the app
- C.For 60 seconds by default
- D.For one server request only
Show answer
Answer: D. For one server request only
React cache() is request-scoped: it dedupes calls within one render on the server. To share data across requests, use 'use cache', fetch caching or an external cache such as Redis.
33. Title from database data
A product page needs a title like "Red Shoe – ₹1,999". Which approach is correct?
- A.Set document.title inside a useEffect
- B.Put a <title> inside the page JSX
- C.Edit the root layout title on each request
- D.export async function generateMetadata({ params })
Show answer
Answer: D. export async function generateMetadata({ params })
generateMetadata can await params and fetch the product. If the page fetches the same data, React memoises the fetch, or you can use React cache() for DB calls.
34. Hiding a backend URL
You want /api/v1/* calls from the browser to reach https://backend.internal/v1/* without CORS. Which config fits?
- A.redirects() with permanent set to false
- B.headers() adding Access-Control headers
- C.basePath set to /api/v1 in the config
- D.rewrites() mapping the source to the destination
Show answer
Answer: D. rewrites() mapping the source to the destination
A rewrite proxies the request on the server, so the browser sees a same-origin URL and no CORS is needed. A redirect would send the browser to the backend URL directly.
35. Hero image loads late
A hero banner uses next/image and LCP is slow. By default, how does next/image load images?
- A.Lazily, so above-the-fold images need eager or preload
- B.Eagerly, with the highest fetch priority set
- C.Only after the user clicks on the image
- D.Only once the whole page has hydrated
Show answer
Answer: A. Lazily, so above-the-fold images need eager or preload
next/image adds loading="lazy" by default. For the LCP image, mark it to load early (preload or eager with high fetch priority) so it is not delayed until layout.
36. Native module breaks the build
A package with a native .node binary fails to bundle in Server Components. Which config usually helps?
- A.transpilePackages with that package name
- B.images.unoptimized set to true
- C.experimental.reactCompiler set to true
- D.serverExternalPackages with that package name
Show answer
Answer: D. serverExternalPackages with that package name
serverExternalPackages tells Next.js to leave a package out of the server bundle and require it at runtime with Node. Many common native packages are already on the built-in list.
37. Slow dev from icon library
Importing a few icons from a library with thousands of modules makes dev compiles slow. Which option helps?
- A.serverExternalPackages listing the library
- B.experimental.optimizePackageImports for it
- C.output: 'standalone' in the next.config
- D.images.remotePatterns listing the library
Show answer
Answer: B. experimental.optimizePackageImports for it
optimizePackageImports rewrites barrel imports to load only the modules used. Next.js already does this for many popular libraries such as lucide-react and date-fns.
38. Fewer manual memos
A team wants automatic memoisation instead of writing useMemo and useCallback everywhere. What does Next.js 16 support?
- A.Adding 'use memo' to every client file
- B.Using Server Components for all buttons
- C.Turning on the React Compiler in next.config
- D.Switching the bundler back to webpack
Show answer
Answer: C. Turning on the React Compiler in next.config
The React Compiler analyses components at build time and memoises where safe. Next.js 16 supports it as a stable config option. It may raise build times, as it runs through Babel.
39. Can crawlers see streamed content?
A product page streams its description inside Suspense. Does this content still appear in the HTML that crawlers get?
- A.Yes; streamed HTML is part of the same response
- B.No; only the shell is ever sent to crawlers
- C.Only if the page is a Client Component
- D.Only if JavaScript is disabled in the crawler
Show answer
Answer: A. Yes; streamed HTML is part of the same response
Streaming sends the fallback first and later chunks with the real HTML in the same response. Crawlers that read the full response get the content. Metadata generation can affect how head tags stream.
40. Component that touches window
A map library touches window at import time and crashes during server rendering. What is a common fix in a Client Component?
- A.export const runtime = 'edge'
- B.'use server' on the map file
- C.A route handler that returns the map
- D.next/dynamic with ssr: false
Show answer
Answer: D. next/dynamic with ssr: false
next/dynamic with { ssr: false } loads the component only in the browser. It must be used inside a Client Component, and you can show a loading placeholder in the meantime.
