Using with NextJS and React Library Component

[usabir-mms]

So I have configured a NextJS parent application to use useSSE and it works well with components developed inside the NextJS application. However, I have created component based architecture where I publish a separate React Library project on npm and import those components inside my main NextJS application. These react library components are using useSSE to fetch data. But when I import these react components inside my NextJS parent application, it just fetches the promises and does not resolve the data. I have used the example Todos component demonstrated in this repository to validate the flow. When this Todos component was developed within the NextJS app, it was SSR ready and resolved the data correctly. When I moved this component to my React library, and imported the same from the package instead, I am starting to face this issue. Please help and guide

[usabir-mms]

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

[tahuy]

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

[usabir-mms]

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.

[jamesopti]

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

[tahuy]

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