Hi folk!
After a lots of googling and reading regarding the best way to handle fetch per components in a SSR way I came to the conclusion that I need some React community help hehe.
I tested razzle, nextjs, custom setup with express... and all the approaches follow the same pattern;
1 Fetch all you data and
2 pass it to the
3 render to string ...
4 hydrate, initial_state ... etc etc
However, there is something that I do not like with this approach. I did a lot of SPA project in the past without caring about seo and being able to share page on facebook nor twitter, having Helmet changing my meta on the fly...
But now, with this ssr way to do thing, not being able to fetch data in my component constructor... I feel that I have to break the way I am doing stuff.
So the question, is there a way, to have a none ssr react spa project transfers to ssr without having to fetch all my data at the begining if favor to a per components approach like I did without ssr.
side note:
The closest I get is a try with JSDOM, where I am able to use Render( from react-dom in the server instead of renderToString... the downside with this approach is that I did not see any blog post exposing this approach. the other downside is I cannot know when all the components are done with theirs fetching, so I have to embed everything in a ; setTimeOut with a exagerated delay to be sure everything is done.
Thank you
Top comments (4)
Hi, if your backend services are using GraphQL, you can actually use
react-apolloand you can then declare your data requirement in the component itself. The SSR process is very simple sincereact-apollojust provide function likerenderToStringWithData()orgetDataFromTree()to automatically fetch all the data in your component tree.But, if you are not using graphql, but just simple fetch GET request, I don't think there were any solution like react-apollo. So, I decided to create one myself! I named it react-isomorphic-data. It still needs more fine-tuning and a lot of docs to complete though. Check it out :)
Hi, are we able to use a package like zoomus/websdk within SSR structure?
I am assuming you are talking about zoom/websdk. If so, the code should still be initialised on the client side, as I think they are using browser APIs and not meant to run on a Node.js environment.
With next JS if you use 'getServerSideProps', It can fetch with each component having this method. Next Js is good for SSR and improving. Only thing I don't like with Next Js is routing with pages folder, It brings multiple restrictions.