Seems, this behaviour of SvelteKit is not replicable in NextJS. There is a similar feature in NextJS and it is called prerendering. But, prerendering only works for static pages.

For dynamic pages, the server components start to render on the server only after the page is navigated to. If needed, a suspense boundary can be used as a placeholder (which is displayed instantly) before the whole page is rendered.

With respect to wasted bandwidth of fetching links when it comes into viewport, @oscar-hermoso's answer of switching the prefetch option to on hover works.

After using both the frameworks, it feels as if SvelteKit is really thought out when it comes to frameworks. NextJS relies on CDN to make the site fast. SvelteKit uses a simple, but clever trick. So, when end users use the site, the SvelteKit version feels much faster.