nuxtlink or navigateto forces client side request instead of SSR

[sznski]

nuxtlink or navigateto forces client side request instead of SSR

[danielroe]

@AdrianFahrbach You can also set experimental.payloadExtraction to true to ensure useAsyncData only runs on the server for all routes.

[danielroe]

You can pass the external prop to force a hard reload, though note this will probably lead to a worse UX.

[sznski]

You can pass the external prop to force a hard reload, though note this will probably lead to a worse UX.

then there's no correct way to prevent page do client requests when they should be server side?

[sznski]

i think it sounds insecure. like, what if i pass secret api key which only server should use? creating nuxt api layer to proxy sounds not that good if not every route requires this type of key.

[sznski]

You can pass the external prop to force a hard reload, though note this will probably lead to a worse UX.

and it doesn't work !)

const handlePayment = async () => {
	// TODO: handle payment
	return navigateTo('/delivery/' + offerId, {
		external: true,
	});
};

still client requests on the navigated page, and even when i move in history like clicking back and forward buttons in browser i see client requests. would be cool to see some info on nuxt docs about this type of simple tasks, how to make it correct way how nuxt devs would do it.

[danielroe]

Please provide a reproduction if it doesn't work.

I would recommend you consider server components or create a BFF using Nitro server routes.

[AdrianFahrbach]

So the only ways to solve this are:

1. External links everywhere (basically not using NuxtLink)
2. Wrapping server side api requests into a server component
3. BFF Nitro server routes

@danielroe Do you have improvements for this planned in the future? I would definitely prefer an option to force useAsyncData to only run on the server.

Could you also elaborate on the BFF Nitro server route approach a bit? My guess is that the solution there would be to create an internal API route that caches the data fetched from external sources, but still gets called on the client.