Next.js: Persisting React state between route navigation

Created on 1 Jan 2017 · 20Comments · Source: vercel/next.js

I have followed the redux example, and rendering an iframe inside a shared component. but it seems that the Provider component always rerender the app every time the route changes and triggers the iframe to reload. I want it to persist. Is it possible?

Source

viankakrisna

👍8

Most helpful comment

Next.js is great for SSR and code-splitting. It's on path to be an amazing framework.

But I had the same issue as @viankakrisna while making an audio player webapp.
I want my AudioComponent which plays music, to maintain its state, while the user browses through the genres and artists to add them to his playlist.

It would be great if you guys could do something about it.

For reference, here is the github repo the player app :
nextjs-audio-player

adarshsingh1407 on 20 Jun 2017

👍9

All 20 comments

Currently it's kind a hard to have this.
We only persist module state only.
When we are switching pages, it'll render new React components (pages).
So, that's why we see that.

Currently, I hope we could do something with a custom document.

arunoda on 1 Jan 2017

Maybe save the current state in localstorage and if it exists load it from there on the next page?

shelldandy on 1 Jan 2017

@mike3run That's not what @viankakrisna is asking.
We have JS module level persistence. So no need to use local storage.

But @viankakrisna is asking about the React state. Because of that, his iframe inside the common component getting re-rendered again.

arunoda on 1 Jan 2017

@arunoda I'm testing your suggestion with custom document:

    <html>
      <Head>
        <link rel='stylesheet' href='/static/style.css' />
      </Head>
      <body>
        <Provider store={this.store}>
          <div>
            <Navbar />
            <YouTubePlayer />
            <Main />
          </div>
        </Provider>
        <NextScript />
      </body>
    </html>

But getting this error:

Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Component)".

It seems that the pages cannot see the Provider.

viankakrisna on 1 Jan 2017

Are you sure he's asking about React state vs a re-usable global store ?

rauchg on 1 Jan 2017

@rauchg I figured it based on this comment:

rerender the app every time the route changes and triggers the iframe to reload.

Anyway, @viankakrisna could you send us a sample repo. May be we could think something to do.

arunoda on 1 Jan 2017

@rauchbg yes, i'm talking about react state. Sorry if it's not clear enough. @arunoda, will do when i get home. Like you said, I think the issue is it always renders new React component on route changes. Can we treat the pages as the children of the Document? So the main shell shouldn't be recreated every route changes.

ps: sorry for my english, not a native :(

viankakrisna on 1 Jan 2017

👍2

@viankakrisna let's see what we can do with the example.

arunoda on 1 Jan 2017

Closing because of inactivity.

timneutkens on 11 Jun 2017

Next.js is great for SSR and code-splitting. It's on path to be an amazing framework.

It would be great if you guys could do something about it.

For reference, here is the github repo the player app :
nextjs-audio-player

adarshsingh1407 on 20 Jun 2017

👍9

@adarshsingh1407 for now you can do this by wrapping all these functionalities into a single page and use our custom routing API to do custom URLs.

arunoda on 20 Jun 2017

@arunoda So I would have one page that conditionally renders a view from render? Something like,

render () {
   if (condition) {
     return this.renderThis()
   } else {
      return this.renderThat()
   }
}

Can you please elaborate on what you mean by custom API routing and how we can accomplish that with Next?

bookercodes on 30 Jun 2017

👍1

@bookercodes https://github.com/zeit/next.js/tree/v3-beta/examples/with-next-routes

shelldandy on 30 Jun 2017

do you have a solution for this problem using a custom express server?
i use the routing like this:
server.js:

const webRoutes = require('./app/routes/web')(server, app);
server.get('*', (req, res) => handle(req, res));

routes.js:

// import controller middlewares
const authController = require('../controllers/authController');

// define the actual page files for each route
const render = {
    index: app => (req, res) => app.render(req, res, '/index'),
    create: app => (req, res) => app.render(req, res, '/assignment/create'),
    preview: app => (req, res) => app.render(req, res, '/assignment/preview'),
};

// link url to pages, apply middlewares where needed
module.exports = (server, app) => {
    server.get('/dashboard', authController.login, render.index(app));
    server.get('/create', render.create(app));
    server.get('/create/assignment', render.create(app));
    server.get('/preview/assignment', render.preview(app));
};

routing this way i can apply express middlewares to my routes. but everytime i load a new page my redux state is gone

d4ny0 on 1 Dec 2017

👍5

Heeey!

@timneutkens this might be interesting to add to your checklist for v6 ;)

glemiere on 5 Apr 2018

I believe that this should work now using custom App.js component.

hakimelek on 11 Oct 2018

👍1

example exists?

yareyaredesuyo on 9 May 2019

😕2 👀1

So have I got it right if I'd say that this isn't possible as of yet?

johansedgeware on 11 Jun 2019

👀2

Next.js is great for SSR and code-splitting. It's on path to be an amazing framework.

But I had the same issue as @viankakrisna while making an audio player webapp.
I want my AudioComponent which plays music, to maintain its state, while the user browses through the genres and artists to add them to his playlist.

It would be great if you guys could do something about it.

For reference, here is the github repo the player app :
nextjs-audio-player

@adarshsingh1407 Did you reach a consolation to continue playing music while navigating between pages?