search

bjoluc / next-redux-cookie-wrapper

Sync a subset of your Redux state with cookies in Next.js :cookie: :sparkles:
MIT License
114 stars 4 forks source link

Ability to hydrate all pages without getServerSideProps and connect. #27

Closed lukasfri closed 2 years ago

lukasfri commented 2 years ago

I opened this in the next-redux-wrapper issues but it might be more appropriate here. I use Redux for saving my current theme I use in Material UI. They use a wrapper that provides the theme and as such I have a component that uses a selector to get the current theme and apply it. The issue is that I need to hydrate all pages for it to work meaning I have to create lots of empty getServerSIdeProps functions and connect pages which leads to alot of boilerplate. I would like the ability to turn on hydration for all pages regardless of if it is connected or not.

bjoluc commented 2 years ago

Hi @DreamplaySE,

that's exactly what #22 is about – I addressed #22 by always dispatching a HYDRATE action on the initial client-side page load, accepting duplicate HYDRATE actions on pages with data loading functions. In other words, this should work with version 2.1.2.

On the server, next-redux-cookie-wrapper only dispatches a HYDRATE action if client cookies are actually available, so on static pages (= without getServerSideProps), your server-rendered markup has no chance to respect a client-specific theme. If you want this, @kirill-konshin's suggestion is the way to go – although/because it disables automatic static optimization.

Cheers!

lukasfri commented 2 years ago

Sorry I should've been more clear! I read thru that issue but basically my hope was for some future feature to simply the boilerplate by maybe providing a wrapper of some kind that automatically provides it all through the _app file. Since you need to default export the page and you can't provide getServerSideProps as a property of the page it means that there's no way to easily make a one-line function that both connects and enables server-side rendering. My question was if there's any way you could create a feature that enables this via a config or some kind of special function of the wrapper that also specifies to NextJS that you're server-side rendering with cookies.

bjoluc commented 2 years ago

by maybe providing a wrapper of some kind that automatically provides it all through the _app file

I believe what you are looking for is adding getInitialProps to your _app file, as suggested in the next-redux-wrapper issue. All your pages will be server-rendered on each request then, no matter if they have getServerSideProps or not.

lukasfri commented 2 years ago

I missed that part. Thank you!

29 Dec 2021 20:22:47 bjoluc @.***>:

by maybe providing a wrapper of some kind that automatically provides it all through the _app file

I believe what you are looking for is adding getInitialProps to your _app file, as suggested in the next-redux-wrapper issue. All your pages will be server-rendered on each request then, no matter if they have getServerSideProps or not.

— Reply to this email directly, view it on GitHub[https://github.com/bjoluc/next-redux-cookie-wrapper/issues/27#issuecomment-1002743935], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AGBIK4DDSDGBNM6A4UFEQ4TUTNNYHANCNFSM5K23DKPA]. You are receiving this because you were mentioned. [data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAABHNCSVQICAgIfAhkiAAAACtJREFUeJztwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAD4MUUgAARy2AfAAAAAASUVORK5CYII=###24x24:true###][Tracking image][https://github.com/notifications/beacon/AGBIK4BJZPP3EPBJXHE7O6DUTNNYHA5CNFSM5K23DKPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOHPCKQ7Y.gif]