Render page using Link with data fetch
hepicek opened this issue · 5 comments
Hi,
I run in to problem, when I use Link for navigation in application and fetch data for app, the request is made from client. I use react-universal-component with RFR.
If I use tag it goes to server and fetches data correctly and page is rendered on server.
But if I use Link, it routes in client and make request from client.
Do you have any idea why is this happening or is it intended bahaviour?
Or do you know how to solve it?
Thank you
Hi, this is the intended behavior. <Link> is a higher order <a> component to handle requests client side using Redux (First Router) thunks. What do you mean by "page is rendered on server"? Each navigation event should reload the page? Sorry if I misunderstood you.
Hi, I use SSR. So I expect that the < Link > should go to server, thunk make request for data then render the page then send it to client. But < Link > changes the route and thunk makes request to endpoint for data on client side. So page doesn't get rendered.
If I use < a > tag it, requests the server and render page correctly.
I'm not sure if i describe it well.
Oh ok. But SSR should only be used to render the first page to load, then to handle requests made by the client side app on route change to fetch data that it (the client side app) needs to (re-)render a part of the page. Reloading the full page defeats the purpose of delivering a client side app, server side rendered or not.
I hope it helps a bit.
Ok I understand. I probably found what's the issue.
Page is being rendered before it has data ready.
I don't see loading fallback.
Would you know why does it happen?
Problem solved, I had wrongly defined condition for rendering