NextJS/React Flashcards
studying nextjs react docs
What is the React Server Component Payload (RSC)?
The RSC Payload is a compact binary representation of the rendered React Server Components tree. It’s used by React on the client to update the browser’s DOM. The RSC Payload contains:
- The rendered result of Server Components
- Placeholders for where Client Components should be rendered and references to their JavaScript files
- Any props passed from a Server Component to a Client Component
What are three different server rendering strategies for Server Components?
- Static Rendering
- Dynamic Rendering
- Streaming
What are the benefits of Server side Rendering?
- Security
- Caching
- Performance
- Initial Page Load
- SEO
- Streaming
How are Server Components rendered?
What is Static Rendering (Default)
With Static Rendering, routes are rendered at build time, or in the background after data revalidation. The result is cached and can be pushed to a Content Delivery Network (CDN). This optimization allows you to share the result of the rendering work between users and server requests.
Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.
How does Server Dynamic Rendering work?
With Dynamic Rendering, routes are rendered for each user at request time.
Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL’s search params.
Dynamic Routes with Cached Data
In most websites, routes are not fully static or fully dynamic - it’s a spectrum. For example, you can have an e-commerce page that uses cached product data that’s revalidated at an interval, but also has uncached, personalized customer data.
In Next.js, you can have dynamically rendered routes that have both cached and uncached data. This is because the RSC Payload and data are cached separately. This allows you to opt into dynamic rendering without worrying about the performance impact of fetching all the data at request time.
What happens if, during rendering, NextJS discovers a dynamic function or an uncached data request?
During rendering, NextJS will switch to dynamically rendering the whole route. This table summarizes how dynamic functions and data caching affect whether a route is statically or dynamically rendered
In the table above, for a route to be fully static, all data must be cached. However, you can have a dynamically rendered route that uses both cached and uncached data fetches.
As a developer, do you need to choose between static and dynamic rendering in NextJS?
No, NextJS will decide this for you. NextJS will automatically choose the best rendering strategy for each route based on the features and APIs used.
However, you do need to choose when to cache or revalidate specific data, and you may choose to stream parts of your UI.
What are dynamic functions?
Dynamic functions rely on information that can only be known at request time such as a user’s cookies, current requests headers, or the URL’s search params. In Next.js, these dynamic functions are:
-
cookies()andheaders():Using these in a Server Component will opt the whole route into dynamic rendering at request time. - searchParams: Using the Pages prop will opt the page into dynamic rendering at request time.
Using any of these functions will opt the whole route into dynamic rendering at request time.
How does Streaming server rendering work?
Streaming enables you to progressively render UI from the server. Work is split into chunks and streamed to the client as it becomes ready. This allows the user to see parts of the page immediately, before the entire content has finished rendering.
- built into App Router by default
What are Client Components in NextJS?
Client Components allow you to write interactive UI that is prerendered on the server and can use client JavaScript to run in the browser.
What are the benefits of Client Rendering?
How do you use Client Components in Next.js?
To use Client Components, you can add the React “use client” directive at the top of a file, above your imports.
“use client” is used to declare a boundary between a Server and Client Component modules. This means that by defining a “use client” in a file, all other modules imported into it, including child components, are considered part of the client bundle.
Can you define multiple “use client” entry points?
Yes, you can define multiple “use client” entry points in your React Component tree. This allows you to split your application into multiple client bundles.
However, “use client” doesn’t need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.
The diagram below shows that using onClick and useState in a nested component (toggle.js) will cause an error if the “use client” directive is not defined. This is because, by default, all components in the App Router are Server Components where these APIs are not available. By defining the “use client” directive in toggle.js, you can tell React to enter the client boundary where these APIs are available.
How are Client Components Rendered?
In Next.js, Client Components are rendered differently depending on whether the request is part of a full page load (an initial visit to your application or a page reload triggered by a browser refresh) or a subsequent navigation.
How are Client Components Rendered on Full page load?
To optimize the initial page load, Next.js will use React’s APIs to render a static HTML preview on the server for both Client and Server Components. This means, when the user first visits your application, they will see the content of the page immediately, without having to wait for the client to download, parse, and execute the Client Component JavaScript bundle.
On the server:
- React renders Server Components into a special data format called the React Server Component Payload (RSC Payload), which includes references to Client Components.
- Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML for the route on the server.
Then, on the client:
- The HTML is used to immediately show a fast non-interactive initial preview of the route.
- The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.
- The JavaScript instructions are used to hydrate Client Components and make their UI interactive.
What is hydration?
Hydration is the process of attaching event listeners to the DOM, to make the static HTML interactive. Behind the scenes, hydration is done with the hydrateRoot React API.
How are Client Components Rendered on Subsequent Navigations?
On subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML.
This means the Client Component JavaScript bundle is downloaded and parsed. Once the bundle is ready, React will use the RSC Payload to reconcile the Client and Server Component trees, and update the DOM.
When to use Server and Client Components?
What are some common patterns for working with Server Components?
- Sharing data between components
- Keeping Server-only code out of the Client Environment
- Using Third-party Packages and Providers
- Using Context Providers
What are some common patterns for working with Client Components?
- Moving Client Components Down the Tree
- Serialization - passing props from Server to Client Components
- Interleaving Server and Client Components
- anti pattern: importing server comps into client comps
- supported pattern: passing Server Comps to Client Components as props
Explain the Server Component pattern where you Share data between components.
When fetching data on the server, there may be cases where you need to share data across different components. For example, you may have a layout and a page that depend on the same data.
Instead of using React Context (which is not available on the server) or passing data as props, you can use fetch or React’s cache function to fetch the same data in the components that need it, without worrying about making duplicate requests for the same data. This is because React extends fetch to automatically memoize data requests, and the cache function can be used when fetch is not available.
Explain the Server Component pattern: Keeping Server-only Code out of the Client Environment
To prevent this sort of unintended client usage of server code, we can use the server-only package to give other developers a build-time error if they ever accidentally import one of these modules into a Client Component.
To use server-only, first install the package:
Then import the package into any module that contains server-only code:
Now, any Client Component that imports getData() will receive a build-time error explaining that this module can only be used on the server.
The corresponding package client-only can be used to mark modules that contain client-only code – for example, code that accesses the window object.
Explain the Server Component pattern for using third-party packages and providers.
Since Server Components are a new React feature, third-party packages and providers don’t yet have the “use client” directive, and so won’t work in Server Components.
The Solution is wrap third-party components that rely on client-only features in your own Client Components.
You won’t need to do this for every component, but you do need to for providers b/c they reply on React state and context and are typically needed at the root of the application.
How can you use Context Providers with Server Components? (React context is not supported in SCs)
create context in a Client Component using “use client” and then import it into a Server Component.
Good to know: You should render providers as deep as possible in the tree – notice how ThemeProvider only wraps {children} instead of the entire <html> document. This makes it easier for Next.js to optimize the static parts of your Server Components.
Explain the Client Component pattern:
Moving Client Components Down the Tree.
To reduce the Client JavaScript bundle size, we recommend moving Client Components down your component tree.
For example, you may have a Layout that has static elements (e.g. logo, links, etc) and an interactive search bar that uses state.
Instead of making the whole layout a Client Component, move the interactive logic to a Client Component (e.g. <SearchBar></SearchBar>) and keep your layout as a Server Component. This means you don’t have to send all the component Javascript of the layout to the client.
Explain the Client Component pattern:
Passing props from Server to Client Components (Serialization)
If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be serializable by React.
If your Client Components depend on data that is not serializable, you can fetch data on the client with a third party library or on the server via a Route Handler.
Explain the Client Component pattern:
Interleaving Server and Client Components.
When interleaving Client and Server Components, it may be helpful to visualize your UI as a tree of components. Starting with the root layout, which is a Server Component, you can then render certain subtrees of components on the client by adding the “use client” directive.
Within those client subtrees, you can still nest Server Components or call Server Actions, however there are some things to keep in mind:
- During a request-response lifecycle, your code moves from the server to the client. If you need to access data or resources on the server while on the client, you’ll be making a new request to the server - not switching back and forth.
- When a new request is made to the server, all Server Components are rendered first, including those nested inside Client Components. The rendered result (RSC Payload) will contain references to the locations of Client Components. Then, on the client, React uses the RSC Payload to reconcile Server and Client Components into a single tree.
- Since Client Components are rendered after Server Components, you cannot import a Server Component into a Client Component module (since it would require a new request back to the server). Instead, you can pass a Server Component as props to a Client Component. See the unsupported pattern and supported pattern sections below.
Unsupported Pattern: Importing Server Components into Client Components - what does it look like?
Supported Pattern: Passing Server Components to Client Components as Props - what does it look like?
The following pattern is supported. You can pass Server Components as a prop to a Client Component.
A common pattern is to use the React children prop to create a “slot” in your Client Component.
With this approach, <ClientComponent> and <ServerComponent> are decoupled and can be rendered independently. In this case, the child <ServerComponent> can be rendered on the server, well before <ClientComponent> is rendered on the client.</ClientComponent></ServerComponent></ServerComponent></ClientComponent>
Good to know:
- The pattern of “lifting content up” has been used to avoid re-rendering a nested child component when a parent component re-renders.
- You’re not limited to the children prop. You can use any prop to pass JSX.
What are runtimes in the context of Next.js
In the context of Next.js, runtime refers to the set of libraries, APIs, and general functionality available to your code during execution.
On the server, there are two runtimes where parts of your application code can be rendered:
- The Node.js Runtime (default) has access to all Node.js APIs and compatible packages from the ecosystem.
- The Edge Runtime is based on Web APIs.
What are the differences to consider when choosing a runtime in NextJS?
What is the Edge Runtime in NextJS and when should you use it?
In Next.js, the lightweight Edge Runtime is a subset of available Node.js APIs.
The Edge Runtime is ideal if you need to deliver dynamic, personalized content at low latency with small, simple functions. The Edge Runtime’s speed comes from its minimal use of resources, but that can be limiting in many scenarios.
For example, code executed in the Edge Runtime on Vercel cannot exceed between 1 MB and 4 MB, this limit includes imported packages, fonts and files, and will vary depending on your deployment infrastructure. In addition, the Edge Runtime does not support all Node.js APIs meaning some npm packages may not work. For example, “Module not found: Can’t resolve ‘fs’” or similar errors. We recommend using the Node.js runtime if you need to use these APIs or packages.
What is the Node.js Runtime in NextJS and when should you use it?
Using the Node.js runtime gives you access to all Node.js APIs, and all npm packages that rely on them. However, it’s not as fast to start up as routes using the Edge runtime.
Deploying your Next.js application to a Node.js server will require managing, scaling, and configuring your infrastructure. Alternatively, you can consider deploying your Next.js application to a serverless platform like Vercel, which will handle this for you.
When should you use Serverless Node.js? What are the downsides to using it?
Serverless is ideal if you need a scalable solution that can handle more complex computational loads than the Edge Runtime. With Serverless Functions on Vercel, for example, your overall code size is 50MB including imported packages, fonts, and files.
The downside compared to routes using the Edge is that it can take hundreds of milliseconds for Serverless Functions to boot up before they begin processing requests. Depending on the amount of traffic your site receives, this could be a frequent occurrence as the functions are not frequently “warm”.
With SSR (Server Side Rendering), what are the series of steps that need to be completed before a user can see and interact with a page?
- First, all data for a given page is fetched on the server.
- The server then renders the HTML for the page.
- The HTML, CSS, and JavaScript for the page are sent to the client.
- A non-interactive user interface is shown using the generated HTML, and CSS.
- Finally, React hydrates the user interface to make it interactive.
These steps are sequential and blocking, meaning the server can only render the HTML for a page once all the data has been fetched. And, on the client, React can only hydrate the UI once the code for all components in the page has been downloaded.
How does SSR help improve the perceived loading performance? What are the limitations?
By showing a non-interactive page to the user as soon as possible.
However, it can still be slow as all data fetching on server needs to be completed before the page can be shown to the user.
What are the benefits of Streaming rendering?
Streaming allows you to break down the page’s HTML into smaller chunks and progressively send those chunks from the server to the client.
This enables parts of the page to be displayed sooner, without waiting for all the data to load before any UI can be rendered.
Streaming works well with React’s component model because each component can be considered a chunk.
Components that have higher priority (e.g. product information) or that don’t rely on data can be sent first (e.g. layout), and React can start hydration earlier.
Components that have lower priority (e.g. reviews, related products) can be sent in the same server request after their data has been fetched.
Streaming is particularly beneficial when you want to prevent long data requests from blocking the page from rendering as it can reduce the Time To First Byte (TTFB) and First Contentful Paint (FCP). It also helps improve Time to Interactive (TTI), especially on slower devices.
What is Time to First Byte (TTFB)?
Time to First Byte (TTFB) is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It measures the time between the request for a resource and when the first byte of a response begins to arrive. This makes it helpful in identifying when a web server is too slow to respond to requests. In the case of navigation requests—that is, requests for an HTML document—it precedes every other meaningful loading performance metric.
TTFB is the sum of the following request phases:
- Redirect time
- Service worker startup time (if applicable)
- DNS lookup
- Connection and TLS negotiation
Request, until the first byte of the response arrives - Reducing latency in connection setup time and on the backend helps lower your TTFB.
What is a good TTFB score?
As a rough guide, most sites should strive to have a TTFB of 0.8 seconds or less.
Because TTFB happens before user-centric metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), we recommend that your server respond to navigation requests quickly enough so that the 75th percentile of users experience an FCP within the “good” threshold.
Key point: Because TTFB isn’t a Core Web Vitals metric, it’s not absolutely necessary for sites to have an excellent TTFB, as long as the longer TTFB doesn’t make it harder for your site to score well on the metrics that matter. When optimizing load times, consider how your site delivers content. A low TTFB is especially important if a site delivers its initial markup quickly and then has to wait for scripts to populate it with meaningful content, as is often the case with Single Page Applications (SPAs). On the other hand, a server-rendered site that doesn’t require much client-side work can have better FCP and LCP values than a client-rendered site, even if its TTFB is higher.
What is First Contentful Paint? (FCP)
First Contentful Paint (FCP) is one of six metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed.
FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.</canvas>
What is Time to Interactive (TTI)? Why is it important to measure?
TTI measures how long it takes a page to become fully interactive. A page is considered fully interactive when:
- The page displays useful content, which is measured by the First Contentful Paint,
- Event handlers are registered for most visible page elements, and
- The page responds to user interactions within 50 milliseconds.
Measuring TTI is important because some sites optimize content visibility at the expense of interactivity. This can create a frustrating user experience: the site appears to be ready, but when the user tries to interact with it, nothing happens.
sites performing in the ninety-ninth percentile render TTI in about 2.2 seconds. If your website’s TTI is 2.2 seconds, your TTI score is 99.
How do you improve your TTI score?
One improvement that can have a particularly big effect on TTI is deferring or removing unnecessary JavaScript work. Look for opportunities to optimize your JavaScript. In particular, consider reducing JavaScript payloads with code splitting and applying the PRPL pattern. Optimizing third-party JavaScript also yields significant improvements for some sites.
These two Diagnostic audits provide additional opportunities to reduce JavaScript work:
- Minimize main thread work
- Reduce JavaScript execution time
How does the Suspense component work? what are the benefits?
<Suspense> works by wrapping a component that performs an asynchronous action (e.g. fetch data), showing fallback UI (e.g. skeleton, spinner) while it's happening, and then swapping in your component once the action completes.
By using Suspense, you get the benefits of:
1. Streaming Server Rendering - Progressively rendering HTML from the server to the client.
2.Selective Hydration - React prioritizes what components to make interactive first based on user interaction.
</Suspense>
How does Streaming with Suspense interact with SEO?
- Next.js will wait for data fetching inside
generateMetadatato complete before streaming UI to the client. This guarantees the first part of a streamed response includes <head> tags. - Since streaming is server-rendered, it does not impact SEO. You can use the Rich Results Test tool from Google to see how your page appears to Google’s web crawlers and view the serialized HTML (source).
How do Status Codes work when Streaming w/ Suspense?
When streaming, a 200 status code will be returned to signal that the request was successful.
The server can still communicate errors or issues to the client within the streamed content itself, for example, when using redirect or notFound. Since the response headers have already been sent to the client, the status code of the response cannot be updated. This does not affect SEO.
What are Server Actions? How do you use them?
Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.
A Server Action can be defined with the React “use server” directive. You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.
How do you use a Server Action in a Server Component?
Server Components can use the inline function level or module level “use server” directive. To inline a Server Action, add “use server” to the top of the function body:
How do you use Server Actions in a Client Component?
Client Components can only import actions that use the module-level “use server” directive.
To call a Server Action in a Client Component, create a new file and add the “use server” directive at the top of it. All functions within the file will be marked as Server Actions that can be reused in both Client and Server Components:
Can you pass a Server Action to a Client Component as a prop? How?
How do you invoke a Server Action? Describe the behavior.
What does it mean that Server Components support progressive enhancement by default?
Server Components support progressive enhancement by default, meaning the form will be submitted even if JavaScript hasn’t loaded yet or is disabled.
Are Server Actions limited to <form> elements?
No, Server Actions are not limited to <form> and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like <button>.</button>
Which part of the NextJS architecture do Server Actions interact with?
Server Actions integrate with the Next.js caching and revalidation architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.
True or False: actions can use multiple types of HTTP methods.
False. Behind the scenes, actions use the POST method, and only this HTTP method can invoke them.
What does React require of args and return values for Server Actions?
The arguments and return value of Server Actions must be serializable by React. See the React docs for a list of serializable arguments and values.
What does it mean that “Server Actions are functions”?
Server Actions are functions. This means they can be reused anywhere in your application.
What runtime do Server Actions use?
Server Actions inherit the runtime from the page or layout they are used on.
Where do Server Actions get their Route Segment Config?
Server Actions inherit the Route Segment Config from the page or layout they are used on, including fields like maxDuration.
What happens when Server Actions are invoked in a <form>?
React extends the HTML <form> element to allow Server Actions to be invoked with the action prop.
When invoked in a form, the action automatically receives the FormData object. You don’t need to use React useState to manage fields, instead, you can extract the data using the native FormData methods:
Good to know:
- Example: Form with Loading & Error States
- When working with forms that have many fields, you may want to consider using the
entries()method with JavaScript’sObject.fromEntries().
For example: const rawFormData = Object.fromEntries(formData). One thing to note is that the formData will include additional $ACTION_ properties.
- See React <form> documentation to learn more.
How do you pass additional arguments to Server Actions in a form?
You can pass additional arguments to a Server Action using the JavaScript bind method.
How do you handle pending states in forms using Server Actions?
You can use the React useFormStatus hook to show a pending state while the form is being submitted.
Can you use useFormStatus in a Server Component?
No, useFormStatus is a React hook and therefore must be used in a Client Component.
How do Server Actions allow you to do server-side validation and error handling with forms?
We recommend using HTML validation like required and type=”email” for basic client-side form validation.
For more advanced server-side validation, you can use a library like zod to validate the form fields before mutating the data. <see></see>
Once the fields have been validated on the server, you can return a serializable object in your action and use the React useFormState hook to show a message to the user.
By passing the action to useFormState, the action’s function signature changes to receive a new prevState or initialState parameter as its first argument.useFormState is a React hook and therefore must be used in a Client Component.
What does the React useOptimistic hook do?
You can use the React useOptimistic hook to optimistically update the UI before the Server Action finishes, rather than waiting for the response:
Can you invoke Server Actions in elements nested in forms? If so, why would you want to?
You can invoke a Server Action in elements nested inside <form> such as <button>, <input></input>, and <input></input>. These elements accept the formAction prop or event handlers.</button>
This is useful in cases where you want to call multiple server actions within a form. For example, you can create a specific <button> element for saving a post draft in addition to publishing it. See the React <form> docs for more information.</button>
What is programmatic form submission? When and how do you use it?
You can trigger a form submission using the requestSubmit() method. For example, when the user presses ⌘ + Enter, you can listen for the onKeyDown event:
This will trigger the submission of the nearest <form> ancestor, which will invoke the Server Action.
Aside from forms, where else are Server Actions commonly invoked?
they can also be invoked from other parts of your code such as event handlers and useEffect.
What do you need to consider when invoking Server Actions in Event Handlers? Give an example.
You can invoke a Server Action from event handlers such as onClick. For example, to increment a like count:
To improve the user experience, we recommend using other React APIs like useOptimistic and useTransition to update the UI before the Server Action finishes executing on the server, or to show a pending state.
For cases like onChange in a form field, where multiple events might be fired in quick succession, we recommend debouncing to prevent unnecessary Server Action invocations.
How do you use the useEffect hook to invoke a Server Action? When might this be useful?
You can use the React useEffect hook to invoke a Server Action when the component mounts or a dependency changes.
This is useful for mutations that depend on global events or need to be triggered automatically.
For example, onKeyDown for app shortcuts, an intersection observer hook for infinite scrolling, or when the component mounts to update a view count:
How do Server Actions handle errors?
When an error is thrown, it’ll be caught by the nearest error.js or <Suspense> boundary on the client. We recommend using try/catch to return errors to be handled by your UI.</Suspense>
For example, your Server Action might handle errors from creating a new item by returning a message:
Good to know:
Aside from throwing the error, you can also return an object to be handled by useFormState. See Server-side validation and error handling.
How do you revalidate data in the Next.js Cache inside of Server Actions?
You can revalidate the Next.js Cache inside your Server Actions with the revalidatePath API Or invalidate a specific data fetch with a cache tag using revalidateTag:
How do Server Actions handle redirects?
If you would like to redirect the user to a different route after the completion of a Server Action, you can use redirect API.
redirect needs to be called outside of the try/catch block:
Do Server Actions interact with Cookies? If so, how?
You can get, set, and delete cookies inside a Server Action using the cookies API:
In the context of Authentication and authorization, how should you treat Server Actions?
You should treat Server Actions as you would public-facing API endpoints, and ensure that the user is authorized to perform the action. For example:
When does defining a Server Action create a closure?
Defining a Server Action inside a component creates a closure where the action has access to the outer function’s scope. For example, the publish action has access to the publishVersion variable.
Closures are useful when you need to capture a snapshot of data (e.g. publishVersion) at the time of rendering so that it can be used later when the action is invoked.
However, for this to happen, the captured variables are sent to the client and back to the server when the action is invoked. Next.js automatically encrypts these variables to prevent data exposure.
What do you need to be aware of when self-hosting your Next.js application across multiple servers?
Overwriting encryption keys (advanced).
When self-hosting your Next.js application across multiple servers, each server instance may end up with a different encryption key, leading to potential inconsistencies.
To mitigate this, you can overwrite the encryption key using the process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY environment variable. Specifying this variable ensures that your encryption keys are persistent across builds, and all server instances use the same key.
This is an advanced use case where consistent encryption behavior across multiple deployments is critical for your application. You should consider standard security practices such key rotation and signing.
Good to know: Next.js applications deployed to Vercel automatically handle this.
What does Next.js do to prevent sensitive data from getting sent to the client in the case of Server Action closures? What are the implications of this?
To prevent sensitive data from being exposed to the client, Next.js automatically encrypts the closed-over variables.
A new private key is generated for each action every time a Next.js application is built. This means actions can only be invoked for a specific build.
How are Server Actions protected from CSRF attacks?
Behind the scenes, Server Actions use the POST method, and only this HTTP method is allowed to invoke them. This prevents most CSRF vulnerabilities in modern browsers, particularly with SameSite cookies being the default.
As an additional protection, Server Actions in Next.js also compare the Origin header to the Host header (or X-Forwarded-Host). If these don’t match, the request will be aborted. In other words, Server Actions can only be invoked on the same host as the page that hosts it.
NOTE: For large applications that use reverse proxies or multi-layered backend architectures (where the server API differs from the production domain), it’s recommended to use the configuration option serverActions.allowedOrigins option to specify a list of safe origins. The option accepts an array of strings.
What is the best practice for fetching data on the server w/ Next.js? Why - what are the benefits?
Whenever possible, we recommend fetching data on the server with Server Components.
What is the pattern for only fetching data when it’s needed?
If you need to use the same data (e.g. current user) in multiple components in a tree, you do not have to fetch data globally, nor forward props between components. Instead, you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data.
This is possible because fetch requests are automatically memoized. Learn more about request memoization.
Good to know: This also applies to layouts, since it’s not possible to pass data between a parent layout and its children.
What are the two data fetching patterns inside React components?
When fetching data inside React components, you need to be aware of two data fetching patterns: Parallel and Sequential.
- With
sequential data fetching, requests in a route are dependent on each other and therefore create waterfalls. There may be cases where you want this pattern because one fetch depends on the result of the other, or you want a condition to be satisfied before the next fetch to save resources. However, this behavior can also be unintentional and lead to longer loading times. - With
parallel data fetching, requests in a route are eagerly initiated and will load data at the same time. This reduces client-server waterfalls and the total time it takes to load data.
What is “all or nothing” data fetching?
An alternative approach to prevent waterfalls is to fetch data globally, at the root of your application, but this will block rendering for all route segments beneath it until the data has finished loading. This can be described as “all or nothing” data fetching. Either you have the entire data for your page or application, or none.
What happens to fetch requests that use await? What should you be aware of?
Any fetch requests with await will block rendering and data fetching for the entire tree beneath it, unless they are wrapped in a <Suspense> boundary or loading.js is used. Another alternative is to use parallel data fetching or the preload pattern.</Suspense>
What is the Parallel Data Fetching pattern?
To fetch data in parallel, you can eagerly initiate requests by defining them outside the components that use the data, then calling them from inside the component. This saves time by initiating both requests in parallel, however, the user won’t see the rendered result until both promises are resolved.
To improve the user experience, you can add a Suspense Boundary to break up the rendering work and show part of the result as soon as possible.
How does the pre-loading data pattern work? What is it used for?
The pre-loading pattern is used to prevent waterfalls. You can optionally create a preload function to further optimize parallel data fetching.
With this approach, you don’t have to pass promises down as props.
The preload function can also have any name as it’s a pattern, not an API.
What are the benefits of using React cache, server-only, and the Preload Pattern?
You can combine the cache function, the preload pattern, and the server-only package to create a data fetching utility that can be used throughout your app.
With this approach, you can eagerly fetch data, cache responses, and guarantee that this data fetching only happens on the server.
The utils/get-item exports can be used by Layouts, Pages, or other components to give them control over when an item’s data is fetched.
Good to know:
We recommend using the server-only package to make sure server data fetching functions are never used on the client.
How can you prevent sensitive data from being exposed to the client?
We recommend using React’s taint APIs, taintObjectReference and taintUniqueValue, to prevent whole object instances or sensitive values from being passed to the client.
To enable tainting in your application, set the Next.js Config experimental.taint option to true.
Then pass the object or value you want to taint to the experimental_taintObjectReference or experimental_taintUniqueValue functions:
What are four ways of fetching data with Next.js and React?
- On the server, with fetch
- On the server, with third-party libraries
- On the client, via a Route Handler
- On the client, with third-party libraries.
How do you fetch data on the Server using fetch? what does this allow you to do?
Next.js extends the native fetch Web API to allow you to configure the caching and revalidating behavior for each fetch request on the server. React extends fetch to automatically memoize fetch requests while rendering a React component tree.
You can use fetch with async/await in Server Components, in Route Handlers, and in Server Actions.
When are fetch requests NOT memoized?
In Route handlers, fetch requests are not memoized as Route Handlers are not part of the React component tree.
When are fetch requests NOT cached?
In Server Actions, fetch requests are not cached (defaults cache: no-store).
What is a side effect of using Next.js cookies and header functions inside of Server Components?
Next.js provides helpful functions you may need when fetching data in Server Components such as cookies and headers.
These will cause the route to be dynamically rendered as they rely on request time information.
What is Next.js’s default caching behavior?
By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. This means that the data can be fetched at build time or request time, cached, and reused on each data request.
However, there are exceptions, fetch requests are not cached when:
- Used inside a Server Action.
- Used inside a Route Handler that uses the POST method.
What is the Data Cache?
The Data Cache is a persistent HTTP cache. Depending on your platform, the cache can scale automatically and be shared across multiple regions.
Learn more about the Data Cache.
What is the process of Revalidating Data in relation to caching?
Revalidation is the process of purging the Data Cache and re-fetching the latest data. This is useful when your data changes and you want to ensure you show the latest information.
What are the two ways cached data can be revalidated?
- Time-based revalidation
- On-demand revalidation
What is Time-based revalidation? When is it useful?
Automatically revalidate data after a certain amount of time has passed.
This is useful for data that changes infrequently and freshness is not as critical.
What is On-demand revalidation? When is it useful?
Manually revalidate data based on an event (e.g. form submission). On-demand revalidation can use a tag-based or path-based approach to revalidate groups of data at once.
This is useful when you want to ensure the latest data is shown as soon as possible (e.g. when content from your headless CMS is updated).
How do you implement Time-based revalidation?
To revalidate data at a timed interval, you can use the next.revalidate option of fetch to set the cache lifetime of a resource (in seconds).
Alternatively, to revalidate all fetch requests in a route segment, you can use the Segment Config Options.
If you have multiple fetch requests in a statically rendered route, and each has a different revalidation frequency. The lowest time will be used for all requests. For dynamically rendered routes, each fetch request will be revalidated independently.
In the context of time-based data revalidation, how do multiple fetch requests get handled differently by static vs dynamically rendered routes?
In a statically rendered route, and each has a different revalidation frequency. The lowest time will be used for all requests.
For dynamically rendered routes, each fetch request will be revalidated independently.
How do you implement On-demand Revalidation?
Data can be revalidated on-demand by path (revalidatePath) or by cache tag (revalidateTag) inside a Server Action or Route Handler.
Next.js has a cache tagging system for invalidating fetch requests across routes.
- When using
fetch, you have the option to tag cache entries with one or more tags. - Then, you can call
revalidateTagto revalidate all entries associated with that tag.
What happens when an error gets thrown when you are attempting to revalidate data?
If an error is thrown while attempting to revalidate data, the last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data.
When are fetch requests not cached?
How can you opt out of caching for individual fetch requests?
To opt out of caching for individual fetch requests, you can set the cache option in fetch to ‘no-store’. This will fetch data dynamically, on every request.
How can you opt out of caching for multiple fetch requests?
If you have multiple fetch requests in a route segment (e.g. a Layout or Page), you can configure the caching behavior of all data requests in the segment using the Segment Config Options.
However, we recommend configuring the caching behavior of each fetch request individually. This gives you more granular control over the caching behavior.
What should you remember about Fetching data on the Server with third-party libraries?
In cases where you’re using a third-party library that doesn’t support or expose fetch (for example, a database, CMS, or ORM client), you can configure the caching and revalidating behavior of those requests using the Route Segment Config Option and React’s cache function.
Whether the data is cached or not will depend on whether the route segment is statically or dynamically rendered.
If the segment is static (default), the output of the request will be cached and revalidated as part of the route segment.
If the segment is dynamic, the output of the request will not be cached and will be re-fetched on every request when the segment is rendered.
What if you need to fetch data in a client component? What do you use? Why might you want to do this?
If you need to fetch data in a client component, you can call a Route Handler from the client.
Route Handlers execute on the server and return the data to the client.
This is useful when you don’t want to expose sensitive information to the client, such as API tokens.
Do Server Components ever need the Route Handler to fetch data?
Since Server Components render on the server, you don’t need to call a Route Handler from a Server Component to fetch data. Instead, you can fetch the data directly inside the Server Component.
Can you fetch data on the Client with third party libraries? When would you want to do this?
You can also fetch data on the client using a third-party library such as SWR or TanStack Query. These libraries provide their own APIs for memoizing requests, caching, revalidating, and mutating data.
Should you ever wrap fetch in use in Client Components? why or why not?
use is a React function that accepts and handles a promise returned by a function.
Wrapping fetch in use is currently not recommended in Client Components and may trigger multiple re-renders.
Learn more about use in the React docs.
What does the Tree refer to?
A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.
What is a Subtree?
Part of a tree, starting at a new root (first) and ending at the leaves (last).
What is the Root?
Root: The first node in a tree or subtree, such as a root layout.
What is a Leaf?
Nodes in a subtree that have no children, such as the last segment in a URL path.
What is a URL Segment?
Part of the URL path delimited by slashes.
What is the URL Path?
Part of the URL that comes after the domain (composed of segments).
What is the app Router? Where does it live?
In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.
The App Router works in a new directory named app.
By default, components inside app are React Server Components. This is a performance optimization and allows you to easily adopt them, and you can also use Client Components.
NOTE: app router takes priority over old pages router, incremental switch over allowed
What are the roles of Folders and Files in the Next.js file-system based router?
- Folders are used to define routes. A route is a single path of nested folders, following the file-system hierarchy from the root folder down to a final leaf folder that includes a page.js file. See Defining Routes.
- Files are used to create UI that is shown for a route segment. See special files.
What are Route Segments?
Each folder in a route represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.
How do you create a nested route?
To create a nested route, you can nest folders inside each other. For example, you can add a new /dashboard/settings route by nesting two new folders in the app directory.
The /dashboard/settings route is composed of three segments:
- / (Root segment)
- dashboard (Segment)
- settings (Leaf segment)
What are Next.js file conventions?
Next.js provides a set of special files to create UI with specific behavior in nested routes:
Route special file: layout
Shared UI for a segment and its children
Route special file: page
Unique UI of a route and make routes publicly accessible
Route special file: loading
Loading UI for a segment and its children
Route special file: not-found
Not found UI for a segment and its children
Route special file: error
Error UI for a segment and its children
Route special file: global-error
Global Error UI
Route special file: route
Server-side API endpoint
Route special file: template
Specialized re-rendered Layout UI
Route special file: default
Fallback UI for Parallel Routes
What is the specific order/hierarchy in which React Components defined in special files of a route segment get rendered?
- layout.js
- template.js
- error.js (React error boundary)
- loading.js (React suspense boundary)
- not-found.js (React error boundary)
- page.js or nested layout.js
How are components nested in nested routes?
In a nested route, the components of a segment will be nested inside the components of its parent segment.
What is Colocation and why do you need it?
In addition to special files, you have the option to colocate your own files (e.g. components, styles, tests, etc) inside folders in the app directory.
This is because while folders define routes, only the contents returned by page.js or route.js are publicly addressable.
What are examples of advanced routing patterns?
- Parallel Routes
- Intercepting Routes
These patterns allow you to build richer and more complex UIs, democratizing features that were historically complex for small teams and individual developers to implement.
What do Parallel Routes pattern allow you to do?
Parallel Routes: Allow you to simultaneously show two or more pages in the same view that can be navigated independently. You can use them for split views that have their own sub-navigation. E.g. Dashboards.
What does the Intercepting Routes pattern allow you to do?
Intercepting Routes: Allow you to intercept a route and show it in the context of another route. You can use these when keeping the context for the current page is important. E.g. Seeing all tasks while editing one task or expanding a photo in a feed.
Which special files allow you to create UI for a route?
The special files layout.js, page.js, and template.js allow you to create UI for a route.
What is a page UI? What should you know about them?
A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.
- The .js, .jsx, or .tsx file extensions can be used for Pages.
- A page is always the leaf of the route subtree.
- A page.js file is required to make a route segment publicly accessible.
- Pages are Server Components by default, but can be set to a Client Component.
- Pages can fetch data. View the Data Fetching section for more information.
A page is always the leaf of the route subtree. True or False?
True
A page is always the leaf of the route subtree.
Pages can’t fetch data. True or False?
False. Pages can fetch data.
A page.js file is required to make a route segment publicly accessible. True or False?
True.
A page.js file is required to make a route segment publicly accessible.
Pages are Client Components by default. True or False?
False.
Pages are Server Components by default, but can be set to a Client Component
What is a Layout UI? Why use them? How do you define them and what props does it need to take?
A layout is UI that is shared between multiple routes.
- On navigation, layouts preserve state, remain interactive, and do not re-render.
- Layouts can also be nested.
You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.
How do you define a layout UI?
You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.
Why would you want to use a layout UI?
On navigation, layouts preserve state, remain interactive, and do not re-render.
- Layouts can also be nested.
What does it mean that layouts in the folder hierarchy are nested by default?
By default, layouts in the folder hierarchy are nested, which means they wrap child layouts via their children prop. You can nest layouts by adding layout.js inside specific route segments (folders).
For example, to create a layout for the /dashboard route, add a new layout.js file inside the dashboard folder:
What is the role of the Root Layout? Do you need it?
The root layout is defined at the top level of the app directory and applies to all routes. This layout is required and must contain html and body tags, allowing you to modify the initial HTML returned from the server.
How do you nest layouts?
If you were to combine the two layouts above, the root layout (app/layout.js) would wrap the dashboard layout (app/dashboard/layout.js), which would wrap route segments inside app/dashboard/*.
The two layouts would be nested as such:
True or False: Only the root layout can contain <html> and <body> tags.
True.
Only the root layout can contain <html> and <body> tags.
True or False: When a layout.js and page.js file are defined in the same folder, the layout will wrap the page.
True.
When a layout.js and page.js file are defined in the same folder, the layout will wrap the page.
True or False:
Layouts are Client Components by default.
False.
Layouts are Server Components by default but can be set to a Client Component.
True or False:
Layouts can’t fetch data.
False.
Layouts can fetch data. View the Data Fetching section for more information.
Is passing data between a parent layout and it’s children possible?
No.
Passing data between a parent layout and its children is not possible.
However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.
What happens if you fetch the same data in a route more than once?
React will automatically dedupe the requests without affecting performance.
True or False: Layouts have access to the route segments below itself.
False.
Layouts do not have access to the route segments below itself.
To access all route segments, you can use useSelectedLayoutSegment or useSelectedLayoutSegments in a Client Component.
How can Layouts access route layouts below itself?
To access all route segments, you can use useSelectedLayoutSegment or useSelectedLayoutSegments in a Client Component.
What are two ways to use Route Groups in relation to layouts?
- to opt specific route segments in and out of shared layouts.
- to create multiple root layouts.
What are Templates? How are they different from Layouts?
Templates are similar to layouts in that they wrap each child layout or page.
- Unlike layouts that persist across routes and maintain state, templates create a new instance for each of their children on navigation.
This means that when a user navigates between routes that share a template
- a new instance of the component is mounted
- DOM elements are recreated
- state is not preserved
- effects are re-synchronized.
What happens when a user navigates between routes that share a template?
- a new instance of the component is mounted
- DOM elements are recreated
- state is not preserved
- effects are re-synchronized.
What are cases where a template is more suitable than a layout?
- Features that rely on
useEffect(e.g logging page views) anduseState(e.g a per-page feedback form). - To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.
How do you define a template?
A template can be defined by exporting a default React component from a template.js file. The component should accept a children prop.
What happens when you nest a template?
In terms of nesting, template.js is rendered between a layout and its children. Here’s a simplified output:
How do you define Metadata in routes?
In the app directory, you can modify the <head> HTML elements such as title and meta using the Metadata APIs.
Metadata can be defined by exporting a metadata object or generateMetadata function in a layout.js or page.js file.
Good to know: You should not manually add <head> tags such as <title> and <meta></meta> to root layouts. Instead, you should use the Metadata API which automatically handles advanced requirements such as streaming and de-duplicating <head> elements.</title>
What are the 4 ways to navigate between routes in Next.js?
- Using the <link></link> Component
- Using the
useRouterhook (Client Components) - Using the
redirectfunction (Server Components) - Using the native History API
What is the <link></link> Component in Next.js? what is it used for?
<link></link>
is a built-in component that extends the HTML <a> tag to provide prefetching and client-side navigation between routes. It is the primary and recommended way to navigate between routes in Next.js.</a>
You can use it by importing it from next/link, and passing a href prop to the component:
How do you Link to Dynamic Segments?
When linking to dynamic segments, you can use template literals and interpolation to generate a list of links. For example, to generate a list of blog posts:
How do you check Active Links?
You can use usePathname() to determine if a link is active. For example, to add a class to the active link, you can check if the current pathname matches the href of the link:
How do you scroll to a specific id on navigation?
The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.
If you’d like to scroll to a specific id on navigation, you can append your URL with a # hash link or just pass a hash link to the href prop. This is possible since <link></link> renders to an <a> element.</a>
Next.js will scroll to the Page if it is not visible in the viewport upon navigation.
How do you disable scroll restoration in Next.js?
The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.
If you’d like to disable this behavior, you can pass scroll={false} to the <link></link> component, or scroll: false to router.push() or router.replace().
What does the useRouter hook allow you to do?
The useRouter hook allows you to programmatically change routes from Client Components.
Recommendation: Use the <link></link> component to navigate between routes unless you have a specific requirement for using useRouter.
What is the redirect function used for?
For Server Components, use the redirect function.
What status code does redirect return by default?
redirect returns a 307 (Temporary Redirect) status code by default.
What status code does redirect return when used in a Server Action?
When used in a Server Action, it returns a 303 (See Other), which is commonly used for redirecting to a success page as a result of a POST request.
Should redirect be called inside or outside of try/catch blocks? why?
redirect internally throws an error so it should be called outside of try/catch blocks.
Under what conditions can redirect be called in Client Components?
redirect can be called in Client Components during the rendering process but not in event handlers. You can use the useRouter hook instead.
Can you pass an absolute URL to redirect? Why would you do this?
redirect also accepts absolute URLs and can be used to redirect to external links.
Can you redirect before the render process?
If you’d like to redirect before the render process, use next.config.js or Middleware.
How does Next.js enable routing with the native History API?
Next.js allows you to use the native window.history.pushState and window.history.replaceState methods to update the browser’s history stack without reloading the page.
pushState and replaceState calls integrate into the Next.js Router, allowing you to sync with usePathname and useSearchParams.
How do you use window.history.pushState for routing in Next.js?
Use it to add a new entry to the browser’s history stack. The user can navigate back to the previous state. For example, to sort a list of products:
How do you use window.history.replaceState for routing in Next.js?
Use it to replace the current entry on the browser’s history stack. The user is not able to navigate back to the previous state. For example, to switch the application’s locale:
How does Routing and Navigation work in Next.js?
The App Router uses a hybrid approach for routing and navigation.
- On the server, your application code is automatically code-split by route segments.
- And on the client, Next.js prefetches and caches the route segments.
This means, when a user navigates to a new route, the browser doesn’t reload the page, and only the route segments that change re-render - improving the navigation experience and performance.
Explain Code Splitting. What are the benefits? What kind of components use it?
Code splitting allows you to split your application code into smaller bundles to be downloaded and executed by the browser. This reduces the amount of data transferred and execution time for each request, leading to improved performance.
Server Components allow your application code to be automatically code-split by route segments. This means only the code needed for the current route is loaded on navigation.
Explain Prefetching.
Prefetching is a way to preload a route in the background before the user visits it.
What are two ways routes are prefetched in Next.js?
- <link></link>component: Routes are automatically prefetched as they become visible in the user’s viewport. Prefetching happens when the page first loads or when it comes into view through scrolling.
- router.prefetch(): The useRouter hook can be used to prefetch routes programmatically.
How does <link></link>’s prefetching behavior differ for static and dynamic routes?
- Static Routes:
prefetchdefaults totrue. The entire route is prefetched and cached. - Dynamic Routes:
prefetchdefault to automatic. Only the shared layout, down the rendered “tree” of components until the firstloading.jsfile, is prefetched and cached for 30s. This reduces the cost of fetching an entire dynamic route, and it means you can show an instant loading state for better visual feedback to users.
How do you disable prefetching?
You can disable prefetching by setting the prefetch prop to false.
True or False: Prefetching is enabled in development and production.
False. Prefetching is not enabled in development, only in production.
What is the Router Cache?
Next.js has an in-memory client-side cache called the Router Cache. As users navigate around the app, the React Server Component Payload of prefetched route segments and visited routes are stored in the cache.
This means on navigation, the cache is reused as much as possible, instead of making a new request to the server - improving performance by reducing the number of requests and data transferred.
What does Partial Rendering mean?
Partial rendering means only the route segments that change on navigation re-render on the client, and any shared segments are preserved.
For example, when navigating between two sibling routes, /dashboard/settings and /dashboard/analytics, the settings and analytics pages will be rendered, and the shared dashboard layout will be preserved.
Without partial rendering, each navigation would cause the full page to re-render on the client. Rendering only the segment that changes reduces the amount of data transferred and execution time, leading to improved performance.
What is Soft Navigation? What does it enable?
Browsers perform a “hard navigation” when navigating between pages. The Next.js App Router enables “soft navigation” between pages, ensuring only the route segments that have changed are re-rendered (partial rendering).
This enables client React state to be preserved during navigation.
What is Next.js’s default behavior for Back and Forward Navigation?
By default, Next.js will maintain the scroll position for backwards and forwards navigation, and re-use route segments in the Router Cache.
What does the loading.js special file enable you to do?
The special file loading.js helps you create meaningful Loading UI with React Suspense. With this convention, you can show an instant loading state from the server while the content of a route segment loads. The new content is automatically swapped in once rendering is complete.
What is an Instant Loading State?
An instant loading state is fallback UI that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience.
How do you create a loading state?
Create a loading state by adding a loading.js file inside a folder.
In the same folder, loading.js will be nested inside layout.js. It will automatically wrap the page.js file and any children below in a <Suspense> boundary.</Suspense>
True or False: With server-centric routing, navigation is not immediate.
False.
Navigation is immediate, even with server-centric routing.
What does it mean that Navigation is interruptible?
Navigation is interruptible, meaning changing routes does not need to wait for the content of the route to fully load before navigating to another route.
True or False: Shared layouts remain interactive while new route segments load.
True.
Shared layouts remain interactive while new route segments load.
When should you use the loading.js convention?
Recommendation: Use the loading.js convention for route segments (layouts and pages) as Next.js optimizes this functionality.
What is an alternative to loading.js?
Streaming with Suspense
In addition to loading.js, you can also manually create Suspense Boundaries for your own UI components. The App Router supports streaming with Suspense for both Node.js and Edge runtimes.
What are the benefits of using <Suspense>?</Suspense>
By using Suspense, you get the benefits of:
- Streaming Server Rendering - Progressively rendering HTML from the server to the client.
- Selective Hydration - React prioritizes what components to make interactive first based on user interaction.
What is Streaming Server Rendering?
Progressively rendering HTML from the server to the client.
What is Selective Hydration?
React prioritizes what components to make interactive first based on user interaction.
How does Streaming impact SEO in Next.js?
- Next.js will wait for data fetching inside
generateMetadatato complete before streaming UI to the client. This guarantees the first part of a streamed response includes <head> tags. - Since streaming is server-rendered, it does not impact SEO. You can use the Rich Results Test tool from Google to see how your page appears to Google’s web crawlers and view the serialized HTML (source).
How does Streaming impact Status Codes in Next.js?
When streaming, a 200 status code will be returned to signal that the request was successful.
The server can still communicate errors or issues to the client within the streamed content itself, for example, when using redirect or notFound. Since the response headers have already been sent to the client, the status code of the response cannot be updated. This does not affect SEO.
What does the error.js file convention allow you to do? What are 4 features?
The error.js file convention allows you to gracefully handle unexpected runtime errors in nested routes.
- Automatically wrap a route segment and its nested children in a React Error Boundary.
- Create error UI tailored to specific segments using the file-system hierarchy to adjust granularity.
- Isolate errors to affected segments while keeping the rest of the application functional.
- Add functionality to attempt to recover from an error without a full page reload.
How do you create an error UI?
Create error UI by adding an error.js file inside a route segment and exporting a React component:
What does error.js work?
-
error.jsautomatically creates a React Error Boundary that wraps a nested child segment orpage.jscomponent. - The React component exported from the
error.jsfile is used as the fallback component. - If an error is thrown within the error boundary, the error is contained, and the fallback component is rendered.
-When the fallback error component is active, layouts above the error boundary maintain their state and remain interactive, and the error component can display functionality to recover from the error.
How does an error component recover from errors?
The cause of an error can sometimes be temporary. In these cases, simply trying again might resolve the issue.
An error component can use the reset() function to prompt the user to attempt to recover from the error. When executed, the function will try to re-render the Error boundary’s contents. If successful, the fallback error component is replaced with the result of the re-render.
How does the nested component hierarchy impact the behavior of error.js files across a nested route?
- Errors bubble up to the nearest parent error boundary. This means an
error.jsfile will handle errors for all its nested child segments. More or less granular error UI can be achieved by placingerror.jsfiles at different levels in the nested folders of a route. - An
error.jsboundary will not handle errors thrown in alayout.jscomponent in the same segment because the error boundary is nested inside that layout’s component.
How do you handle errors in Layouts?
error.js boundaries do not catch errors thrown in layout.js or template.js components of the same segment. This intentional hierarchy keeps important UI that is shared between sibling routes (such as navigation) visible and functional when an error occurs.
To handle errors within a specific layout or template, place an error.js file in the layout’s parent segment.
To handle errors within the root layout or template, use a variation of error.js called global-error.js.
True or False: error.js can be used to catch errors in Layouts and Templates.
False.
error.js boundaries do not catch errors thrown in layout.js or template.js components of the same segment.
This intentional hierarchy keeps important UI that is shared between sibling routes (such as navigation) visible and functional when an error occurs.
How do you handle errors in a specific template or layout?
To handle errors within a specific layout or template, place an error.js file in the layout’s parent segment.
How do you handle errors within the root layout or template?
To handle errors within the root layout or template, use a variation of error.js called global-error.js.
How does global-error.js differ from the root error.js?
The root app/error.js boundary does not catch errors thrown in the root app/layout.js or app/template.js component.
To specifically handle errors in these root components, use a variation of error.js called app/global-error.js located in the root app directory.
True or False: if you have a global-error.js defined, you don’t need to define a root error.js.
False.
Even if a global-error.js is defined, it is still recommended to define a root error.js whose fallback component will be rendered within the root layout, which includes globally shared UI and branding.
True or False: global-error.js is likely to be triggered at least as much as root error.js
False.
global-error.js is unlikely to be triggered often as root components are typically less dynamic, and other error.js boundaries will catch most errors.
True or False: global-error.js is considered the catch-all error for an entire application.
True.
global-error.js is the least granular error UI and can be considered “catch-all” error handling for the whole application.
Why is it important for global-error.js to define it’s own <html> and <body> tags?
global-error.js must define its own <html> and <body> tags b/c unlike the root error.js, the global-error.js error boundary wraps the entire application, and its fallback component replaces the root layout when active.
True or False: global-error.js is only enabled in production.
True.
global-error.js is only enabled in production. In development, our error overlay will show instead.
How does Next.js handle Server Errors?
If an error is thrown inside a Server Component, Next.js will forward an Error object (stripped of sensitive error information in production) to the nearest error.js file as the error prop.
What does Next.js do to secure sensitive server error information?
During production, the Error object forwarded to the client only includes a generic message and digest property.
This is a security precaution to avoid leaking potentially sensitive details included in the error to the client.
The message property contains a generic message about the error and the digest property contains an automatically generated hash of the error that can be used to match the corresponding error in server-side logs.
During development, the Error object forwarded to the client will be serialized and include the message of the original error for easier debugging.
What are the ways Next.js handles redirects?
What does the redirect function allow you to do? where can you call it?
The redirect function allows you to redirect the user to another URL. You can call redirect in Server Components, Route Handlers, and Server Actions.
redirect is often used after a mutation or event. For example, creating a post:
What does the permanentRedirect function allow you to do? Where can you call it? When do you use it?
The permanentRedirect function allows you to permanently redirect the user to another URL. You can call permanentRedirect in Server Components, Route Handlers, and Server Actions.
permanentRedirect is often used after a mutation or event that changes an entity’s canonical URL, such as updating a user’s profile URL after they change their username:
What status code does permanentRedirect return by default?
permanentRedirect returns a 308 (permanent redirect) status code by default.
Can permanentRedirect be used to redirect to external links?
Yes. permanentRedirect also accepts absolute URLs and can be used to redirect to external links.
If you need to redirect inside an event handler in a Client Component, what should you use?
If you need to redirect inside an event handler in a Client Component, you can use the push method from the useRouter hook. For example:
NOTE: If you don’t need to programatically navigate a user, you should use a <link></link> component.
What does the redirects option in the next.config.js file allow you to do?
The redirects option in the next.config.js file allows you to redirect an incoming request path to a different destination path. This is useful when you change the URL structure of pages or have a list of redirects that are known ahead of time.
redirects supports path, header, cookie, and query matching, giving you the flexibility to redirect users based on an incoming request.
What status code does redirects return without the permanent option?
returns a 307 (Temporary Redirect)
What status code does redirects return with the permanent option?
308 (Permanent Redirect) status code with the permanent option.
True or False: redirects runs before Middleware.
True.
redirects runs before Middleware.
What is Vercel’s limit for redirects?
1,024 redirects.
redirects may have a limit on platforms. For example, on Vercel, there’s a limit of 1,024 redirects.
To manage a large number of redirects (1000+), consider creating a custom solution using Middleware. See managing redirects at scale for more.
How does redirect behave in the streaming context?
When used in a streaming context, this will insert a meta tag to emit the redirect on the client side.
How does redirect behave when used in a Server Action?
it will serve a 303 HTTP redirect response to the caller. Otherwise, it will serve a 307 HTTP redirect response to the caller.
In Server Actions and Route Handlers should redirect be called before or after try/catch blocks?
After.
In Server Actions and Route Handlers, redirect should be called after the try/catch block.
What parameters does the redirect function take?
redirect(path, type)
By default, redirect will use push (adding a new entry to the browser history stack) in Server Actions and replace (replacing the current URL in the browser history stack) everywhere else. You can override this behavior by specifying the type parameter.
The type parameter has no effect when used in Server Components.
Does redirect return a value?
No. redirect does not return any value.
What happens when you invoke the redirect() function in a Server Component?
Invoking the redirect() function throws a NEXT_REDIRECT error and terminates rendering of the route segment in which it was thrown.
How do you use redirect in a Client Component?
redirect can be used in a Client Component through a Server Action. If you need to use an event handler to redirect the user, you can use the useRouter hook.
Why does redirect use 307 and 308?
The introduction of the 307 status code means that the request method is preserved as POST.
302 - Temporary redirect, will change the request method from POST to GET
307 - Temporary redirect, will preserve the request method as POST
The redirect() method uses a 307 by default, instead of a 302 temporary redirect, meaning your requests will always be preserved as POST requests.
What does Middleware allow you to do?
Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
Middleware runs before cached content and routes are matched. See Matching Paths for more details.
What can integrating middleware into your application significantly improve?
performance, security, and user experience
What are common scenarios where Middleware is particularly effective?
What are scenarios where middleware may not be the optimal approach?
What is the convention for defining Middleware in Next.js applications?
Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.
Note: While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers.
Why is it important to use Matchers when using middleware in your app?
Middleware will be invoked for every route in your project. Given this, it’s crucial to use matchers to precisely target or exclude specific routes.
What is the execution order for Matching Paths?
What are the two ways to define which paths Middleware will run on?
- Custom matcher config
- Conditional Statements
What is Matcher?
matcher allows you to filter Middleware to run on specific paths.
- You can match a single path or multiple paths with an array syntax.
- The matcher config allows full regex so matching like negative lookaheads or character matching is supported.
How can you use Matcher to bypass Middleware for certain requests?
You can also bypass Middleware for certain requests by using the missing or has arrays, or a combination of both:
Why do the matcher values need to be constants?
The matcher values need to be constants so they can be statically analyzed at build-time. Dynamic values such as variables will be ignored.
What are 4 rules for configured matchers?
How are conditional statements used for managing which routes can be accessed by middleware?
What does the NextResponse API allow you to do?
How do you use the NextResponse` API to produce a response from Middleware?
How do you manage middleware using Cookies?
How do you manage middleware using the NextResponse API to set headers?
How do you set CORS headers in Middleware? Why?
You can set CORS headers in Middleware to allow cross-origin requests, including simple and preflighted requests.
How do you produce a response from Middleware?
You can respond from Middleware directly by returning a Response or NextResponse instance. (This is available since Next.js v13.1.0)
Why use waitUntil and NextFetchEvent in Middleware?
The NextFetchEvent object extends the native FetchEvent object, and includes the waitUntil() method.
The waitUntil() method takes a promise as an argument, and extends the lifetime of the Middleware until the promise settles. This is useful for performing work in the background.
True or False: Middleware supports both Edge and Node.js runtimes.
False.
Middleware currently only supports the Edge runtime. The Node.js runtime can not be used.
What are the differences between the Data Cache and Request Memoization in Next.js?
While both caching mechanisms help improve performance by re-using cached data, the Data Cache is persistent across incoming requests and deployments, whereas memoization only lasts the lifetime of a request.
With memoization, we reduce the number of duplicate requests in the same render pass that have to cross the network boundary from the rendering server to the Data Cache server (e.g. a CDN or Edge Network) or data source (e.g. a database or CMS). With the Data Cache, we reduce the number of requests made to our origin data source.
True or False. Next.js automatically renders and caches routes at build time.
True.
Next.js automatically renders and caches routes at build time. This is an optimization that allows you to serve the cached route instead of rendering on the server for every request, resulting in faster page loads.
How does React Rendering work on the Server?
On the server, Next.js uses React’s APIs to orchestrate rendering. The rendering work is split into chunks: by individual routes segments and Suspense boundaries.
Each chunk is rendered in two steps:
- React renders Server Components into a special data format, optimized for streaming, called the
React Server Component Payload. - Next.js uses the React Server Component Payload and Client Component JavaScript instructions to render HTML on the server.
This means we don’t have to wait for everything to render before caching the work or sending a response. Instead, we can stream a response as work is completed.
What is the React Server Component Payload?
The React Server Component Payload is a compact binary representation of the rendered React Server Components tree. It’s used by React on the client to update the browser’s DOM.
What does the React Server Component Payload contain?
- The rendered result of Server Components
- Placeholders for where Client Components should be rendered and references to their JavaScript files
- Any props passed from a Server Component to a Client Component
What is the Next.js Full Route Cache?
The default behavior of Next.js is to cache the rendered result (React Server Component Payload and HTML) of a route on the server. This applies to statically rendered routes at build time, or during revalidation.
Explain React Hydration and Reconciliation on the Client?
At request time, on the client:
- The HTML is used to immediately show a fast non-interactive initial preview of the Client and Server Components.
- The React Server Components Payload is used to reconcile the Client and rendered Server Component trees, and update the DOM.
- The JavaScript instructions are used to hydrate Client Components and make the application interactive.
What is the Next.js Router Cache?
The Router Cache is how Next.js caches on the Client side.
The React Server Component Payload is stored in the client-side Router Cache - a separate in-memory cache, split by individual route segment. This Router Cache is used to improve the navigation experience by storing previously visited routes and prefetching future routes.
On subsequent navigations or during prefetching, Next.js will check if the React Server Components Payload is stored in the Router Cache. If so, it will skip sending a new request to the server.
If the route segments are not in the cache, Next.js will fetch the React Server Components Payload from the server, and populate the Router Cache on the client.
Route Handlers
https://nextjs.org/docs/app/building-your-application/routing/route-handlers
What are 2 cases where you have to write database queries in NextJs?
- When creating your API endpoints, you need to write logic to interact with your database.
- If you are using React Server Components (fetching data on the server), you can** skip the API layer**, and query your database directly without risking exposing your database secrets to the client.
What are 3 benefits of Static Rendering?
- Faster Websites - Prerendered content can be cached and globally distributed. This ensures that users around the world can access your website’s content more quickly and reliably.
- Reduced Server Load - Because the content is cached, your server does not have to dynamically generate content for each user request.
- SEO - Prerendered content is easier for search engine crawlers to index, as the content is already available when the page loads. This can lead to improved search engine rankings.
Static rendering is useful for UI with no data or data that is shared across users, such as a static blog post or a product page. It might not be a good fit for a dashboard that has personalized data that is regularly updated.
When does dynamic rendering happen?
With dynamic rendering, content is rendered on the server for each user **at request time **(when the user visits the page).
What are 3 benefits of dynamic rendering?
- Real-Time Data - Dynamic rendering allows your application to display real-time or frequently updated data. This is ideal for applications where data changes often.
- User-Specific Content - It’s easier to serve personalized content, such as dashboards or user profiles, and update the data based on user interaction.
- Request Time Information - Dynamic rendering allows you to access information that can only be known at request time, such as cookies or the URL search parameters.
By default, @vercel/postgres doesn’t set its own caching semantics. What does this allow a framework to do?
This allows the framework to set its own static and dynamic behavior.
Which Next.js API can you use inside your Server Components or data fetching functions to opt out of static rendering?
` unstable_noStore from next/cache`
ex.
import { unstable_noStore as noStore } from 'next/cache';
export async function fetchFilteredCustomers(query: string) {
noStore();
// ...
}
The STABLE version is export const dynamic = "force-dynamic". (https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config)
What is interruptable navigation?
The user doesn’t have to wait for the page to finish loading before navigating away
what are loading skeletons in relation to loading.tsx files?
A loading skeleton is a simplified version of the UI. Many websites use them as a placeholder (or fallback) to indicate to users that the content is loading. Any UI you embed into loading.tsx will be embedded as part of the static file, and sent first. Then, the rest of the dynamic content will be streamed from the server to the client.
How do you create Route Groups?
- Create a new folder called
/(overview)inside thedashboardfolder. Then, move yourloading.tsxandpage.tsxfiles inside the folder -
Route groups allow you to organize files into logical groups without affecting the URL path structure. When you create a new folder using parentheses
(), the name won’t be included in the URL path. So/dashboard/(overview)/page.tsxbecomes/dashboard.
In this example, you’re using a route group to ensure loading.tsx only applies to your dashboard overview page. However, you can also use route groups to separate your application into sections (e.g. (marketing) routes and (shop) routes) or by teams for larger applications.
What does Suspense allow you to do?
Suspense allows you to defer rendering parts of your application until some condition is met (e.g. data is loaded). You can wrap your dynamic components in Suspense. Then, pass it a fallback component to show while the dynamic component loads.
It’s worth noting that wrapping a component in Suspense doesn’t make the component itself dynamic (remember you used unstable_noStore to achieve this behavior), but rather Suspense is used as a boundary between the static and dynamic parts of your route.
When can you use the CardWrapper pattern?
https://nextjs.org/learn/dashboard-app/streaming
You can use this pattern when you want multiple components to load in at the same time.
What should you consider when deciding where to place your Suspense boundaries?
Where you place your Suspense boundaries will depend on a few things:
- How you want the user to experience the page as it streams.
- What content you want to prioritize.
- If the components rely on data fetching.
example considerations/consequenses:
- You could stream the whole page like we did with
loading.tsx… but that may lead to a longer loading time if one of the components has a slow data fetch. - You could stream every component individually… but that may lead to UI popping into the screen as it becomes ready.
- You could also create a staggered effect by streaming page sections. But you’ll need to create wrapper components.
In general, it’s good practice to move your data fetches down to the components that need it, and then wrap those components in Suspense. But there is nothing wrong with streaming the sections or the whole page if that’s what your application needs.
https://nextjs.org/learn/dashboard-app/streaming
useSearchParams
Allows you to access the parameters of the current URL. For example, the search params for this URL /dashboard/invoices?page=1&query=pending would look like this: {page: '1', query: 'pending'}.
NOTE: Page components accept a prop called searchParams, (page.tsx)
usePathname
Lets you read the current URL’s pathname. For example, for the route /dashboard/invoices, usePathname would return '/dashboard/invoices'.
useRouter
Enables navigation between routes within client components programmatically. There are multiple methods you can use. (https://nextjs.org/docs/app/api-reference/functions/use-router#userouter)
-
router.push(href: string, { scroll: boolean }):Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack. -
router.replace(href: string, { scroll: boolean }): Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.
-router.refresh(): Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
-router.prefetch(href: string): Prefetch the provided route for faster client-side transitions. -
router.back(): Navigate back to the previous route in the browser’s history stack. -
router.forward(): Navigate forwards to the next page in the browser’s history stack.
router.push(href: string, { scroll: boolean }):
Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.
router.replace(href: string, { scroll: boolean }):
Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.
router.refresh():
Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
router.prefetch(href: string):
Prefetch the provided route for faster client-side transitions.
router.back():
Navigate back to the previous route in the browser’s history stack.
router.forward()
Navigate forwards to the next page in the browser’s history stack
What are the steps for implementing search functionality in NextJs
Here’s a quick overview of the implementation steps:
- Capture the user’s input.
- Update the URL with the search params.
- Keep the URL in sync with the input field. (client side)
- Update the table to reflect the search query. (server side)
defaultValue vs. value / Controlled vs. Uncontrolled
If you’re using state to manage the value of an input, you’d use the value attribute to make it a controlled component. This means React would manage the input’s state.
However, since you’re not using state, you can use defaultValue. This means the native input will manage its own state. This is okay since you’re saving the search query to the URL instead of state.
When to use the useSearchParams() hook vs. the searchParams prop?
You might have noticed you used two different ways to extract search params. Whether you use one or the other depends on whether you’re working on the client or the server.
<Search> is a Client Component, so you used the useSearchParams() hook to access the params from the client.
<Table> is a Server Component that fetches its own data, so you can pass the searchParams prop from the page to the component.
As a general rule, if you want to read the params from the client, use the useSearchParams() hook as this avoids having to go back to the server.
What is Debouncing?
a programming practice that limits the rate at which a function can fire. In our case, you only want to query the database when the user has stopped typing.
ex.
~~~
Searching… E
Searching… Em
Searching… Emi
Searching… Emil
~~~
How Debouncing Works:
- Trigger Event: When an event that should be debounced (like a keystroke in the search box) occurs, a timer starts.
- Wait: If a new event occurs before the timer expires, the timer is reset.
- Execution: If the timer reaches the end of its countdown, the debounced function is executed.
ex npm i use-debounce
By debouncing, you can reduce the number of requests sent to your database, thus saving resources.
Why is it important not to fetch data in a Client Component?
You don’t want to** fetch data on the client** as this would expose your database secrets (remember, you’re not using an API layer). Instead, you can **fetch the data on the server **(in a server component), and pass it to the client component as a prop.
Explain this code:
~~~
const createPageURL = (pageNumber: number | string) => {
const params = new URLSearchParams(searchParams);
params.set(‘page’, pageNumber.toString());
return ${pathname}?${params.toString()};
};
```
Here’s a breakdown of what’s happening:
-
createPageURLcreates an instance of the current search parameters. - Then, it updates the “page” parameter to the provided page number.
- Finally, it constructs the full URL using the pathname and updated search parameters.
What is an advantage of invoking a Server Action within a Server Component?
An advantage of invoking a Server Action within a Server Component is progressive enhancement - forms work even if JavaScript is disabled on the client.
Good to know: In HTML, you’d pass a URL to the action attribute. This URL would be the destination where your form data should be submitted (usually an API endpoint).
However, in React, the action attribute is considered a special prop - meaning React builds on top of it to allow actions to be invoked.
Behind the scenes, Server Actions create a POST API endpoint. This is why you don’t need to create API endpoints manually when using Server Actions.
what is progressive enhancement?
allows users to interact with the form and submit data even if the JavaScript for the form hasn’t been loaded yet or if it fails to load.
Tip for working with Server Actions in forms with lots of fields:
Tip: If you’re working with forms that have many fields, you may want to consider using the entries() method with JavaScript’s Object.fromEntries().
For example:
~~~
const rawFormData = Object.fromEntries(formData.entries())
~~~
What are Dynamic Route Segments and what do they allow you to do?
Next.js allows you to create Dynamic Route Segments when you don’t know the exact segment name and want to create routes based on data. This could be blog post titles, product pages, etc. You can create dynamic route segments by wrapping a folder’s name in square brackets. For example, [id], [post] or [slug].
Example: These are the steps you’ll take to update an invoice:
- Create a new dynamic route segment with the invoice id.
- Read the invoice id from the page params.
- Fetch the specific invoice from your database.
- Pre-populate the form with the invoice data.
- Update the invoice data in your database.
UUIDs vs. Auto-incrementing Keys
We use UUIDs instead of incrementing keys (e.g., 1, 2, 3, etc.). This makes the URL longer; however, UUIDs eliminate the risk of ID collision, are globally unique, and reduce the risk of enumeration attacks - making them ideal for large databases.
However, if you prefer cleaner URLs, you might prefer to use auto-incrementing keys.
Why should redirect() be called outside of the try/catch block?
Note how redirect is being called outside of the try/catch block. This is because redirect works by throwing an error, which would be caught by the catch block. To avoid this, you can call redirect after try/catch. redirect would only be reachable if try is successful.
What do you need to remember about error.tsx files?
-
"use client"-error.tsxneeds to be a Client Component. - It accepts
two props:
-error: This object is an instance of JavaScript’s native Error object.
-reset: This is a function to reset the error boundary. When executed, the function will try to re-render the route segment.
