Nuxt.js: Make store available on redirected SSR pages

[njam]

What problem does this feature solve?

Currently when server-side-rendering a page that has a redirect (in asyncData()), the Vuex store is _not_ available on that page.

This can be a problem, because it means I cannot pre-populate store data on the server-side when rendering that page.

Imagine an index page "/" that redirects to "/foo".
When I load the index page the following happens:

1. Page "/" loads, without any store.
2. Client-side redirect to "/foo"
3. Page "/foo" loads, and asyncData() is called. There is no server-side data available at all.

-> It's not possible to pre-populate any data server-side for page "/foo".

How about making the store available on pages that have a redirect?
In the above example this would allow to pre-populate data on the "/" page, and have it available in the store on the "/foo" page.

What does the proposed changes look like?

If I remove the return noopApp() line in "vue-app/template/server.js" then I have the store available on pages with redirects.

diff --git a/node_modules/@nuxt/vue-app/template/server.js b/node_modules/@nuxt/vue-app/template/server.js
index 24dd8c5..b9b7998 100644
--- a/node_modules/@nuxt/vue-app/template/server.js
+++ b/node_modules/@nuxt/vue-app/template/server.js
@@ -225,7 +225,6 @@ export default async (ssrContext) => {
   ssrContext.nuxt.data = asyncDatas.map(r => r[0] || {})

   // ...If there is a redirect or an error, stop the process
-  if (ssrContext.redirected) return noopApp()
   if (ssrContext.nuxt.error) return renderErrorPage()

   // Call beforeNuxtRender methods & add store state

I'm not sure if there are any negative effects of this. So far I didn't experience problems with this approach.

_{This feature request is available on Nuxt community (#c9086)}

[manniL]

Is the "client-side" redirection needed? :thinking:

If not, you could use https://github.com/nuxt-community/redirect-module

1. Should solve your issue form above
2. Better SEO (client-side redirects can influence SEO negatively)
3. Faster

[njam]

Is the "client-side" redirection needed? thinking

Thanks for the suggestion! For my case it will not work unfortunately, because _where_ the redirect goes to, depends on data only available on the client (localStorage).

(As an example let's say I redirect users based on geo location, so "/" redirects either to "/switzerland" or "/italy" based on the settings the user has configured on the last visit.)

[manniL]

@njam Ah, got it!

[rchl]

To be fair, your use case should be solvable on server-side too. You would just need to store user settings in a cookie instead of local storage.

[njam]

[...] store user settings in a cookie instead of local storage.

Yes, but I want to use static HTML (server-side-rendered).

[ThePooN]

I have a similar use case where having store not cleared after an SSR redirection would help.

Let's say I want to access /admin but my session expired. nuxtServerInit will fail to populate my user, and push an alert in my store stating the session expired.
Then, the middleware on the /admin page redirects me to /login. However the store got cleared, and the alert thus never appears. The user has no idea why they were disconnected.

I could use cookies as a workaround, but I'd rather not. This works 100% fine in an SPA context, and I believe the current behavior on SSR should be considered a bug.

[rchl]

I'd say this is a bug and not a feature request. A case where store is not available due to client redirect seems quite bad.

[franzwilhelm]

Any updates on this?

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.