DEV Community

jfn0
jfn0

Posted on

React SSR fetch per components

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

Discussion (4)

Collapse
jackyef profile image
Jacky Efendi • Edited on

Hi, if your backend services are using GraphQL, you can actually use react-apollo and you can then declare your data requirement in the component itself. The SSR process is very simple since react-apollo just provide function like renderToStringWithData() or getDataFromTree() 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 :)

Collapse
dramoslace profile image
Deiby Dayans R

Hi, are we able to use a package like zoomus/websdk within SSR structure?

Collapse
jackyef profile image
Jacky Efendi

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.

Collapse
nikhilambre003 profile image
Nikhil Ambre

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.