#how can I check if I am doing a soft or hard navigation?

1 messages · Page 1 of 1 (latest)

leaden atlas
#

Anyway to check on runtime?

hollow hornetBOT
#

Hi @leaden atlas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, you can check the runtime in a couple of ways depending on your use case.

  1. Edge Runtime: If you want to check if your function is running on the Edge Runtime, you can check the global globalThis.EdgeRuntime property. This can be useful if you need to validate that your function is running on the Edge Runtime in tests, or if you need to use a different API depending on the runtime. Here's a code snippet demonstrating this:
if (typeof EdgeRuntime !== 'string') {
 // Dead-code elimination is enabled for the code inside this block
}

(Source: Vercel Edge Runtime (https://vercel.com/docs/concepts/functions/edge-functions/edge-runtime))

  1. Next.js Runtime: In Next.js, you can specify a runtime for individual route segments in your application. You can declare a variable called runtime and export it. The variable must be a string, and must have a value of either 'nodejs' or 'edge' runtime. Here's an example:
export const runtime = 'edge' // 'nodejs' (default) | 'edge'

If the segment runtime is not set, the default nodejs runtime will be used. You do not need to use the runtime option if you do not plan to change from the Node.js runtime.
(Source: Next.js Edge and Node.js Runtimes (https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes))

Remember to refer to the respective documentation for a more detailed understanding.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@leaden atlas kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden atlas
#

@hollow hornet I am asking about soft or hard navigation

hollow hornetBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, you can determine whether a navigation is a hard navigation or a soft navigation by observing the behavior of the page.

  • Hard Navigation: By default, the browser performs a hard navigation between pages. This means the browser reloads the page and resets React state such as useState hooks in your app and browser state such as the user's scroll position or focused element.

  • Soft Navigation: However, in Next.js, the App Router uses soft navigation. This means React only renders the segments that have changed while preserving React and browser state, and there is no full page reload.

Unfortunately, there's no built-in way to check if a navigation was hard or soft at runtime. However, you can infer it based on the behavior of your application. If your React state is preserved and there's no full page reload, it was a soft navigation. If the page reloads and the React state is reset, it was a hard navigation.

For more information, you can refer to the Next.js documentation on routing and navigation (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: