Using with NextJS and React Library Component about usesse HOT 5 OPEN

Hi @tahuy
I was able to solve it by initializing the useSSE hook inside my parent NextJS application and passing the initialized variable as PROP to my react based library components. Then, inside my react components, I used this prop based useSSE to make double SSR rendering. However, this was not the ideal approach in an enterprise level application as this architecture failed to work in parallel with getStaticProps and getServerSideProps on other pages. With this double-ssr approach, you are bound to implement the entire web application using this architecture. You cannot leverage the existing data fetching capabilities of NextJS for SSR and SSG. As a workaround, I wrote a data generator inside my components library and called that function to fetch data for my desired component and passed it as normal props from my parent NextJS application.
Fortunately, nothing to worry about. You can now 100% achieve the component based data fetching, thanks to the newly launched NextJS v13. This is currently still in BETA but will definitely be a game changer. Follow this link to know more: https://beta.nextjs.org/docs/data-fetching/fundamentals#component-level-data-fetching

With this architecture, you can now implement data fetching logic directly inside your layouts.

from usesse.

@kmoskwiak Please respond to my query as this is really urgent

from usesse.

Hi @usabir-mms
How is your solution for this?
I read from this post, maybe it solve your problem.
If you have another way to handle it, please tell me. I'm facing same problem

from usesse.

@usabir-mms Do NextJS 13 layouts make this useSSE technique unnecessary?

from usesse.

Hi @tahuy

I was able to solve it by initializing the useSSE hook inside my parent NextJS application and passing the initialized variable as PROP to my react based library components. Then, inside my react components, I used this prop based useSSE to make double SSR rendering. However, this was not the ideal approach in an enterprise level application as this architecture failed to work in parallel with getStaticProps and getServerSideProps on other pages. With this double-ssr approach, you are bound to implement the entire web application using this architecture. You cannot leverage the existing data fetching capabilities of NextJS for SSR and SSG. As a workaround, I wrote a data generator inside my components library and called that function to fetch data for my desired component and passed it as normal props from my parent NextJS application.

Fortunately, nothing to worry about. You can now 100% achieve the component based data fetching, thanks to the newly launched NextJS v13. This is currently still in BETA but will definitely be a game changer. Follow this link to know more: https://beta.nextjs.org/docs/data-fetching/fundamentals#component-level-data-fetching

With this architecture, you can now implement data fetching logic directly inside your layouts.

Hi @usabir-mms
Excellent, thank you so much

from usesse.