How to get fresh SSR data Instantly #53034
-
SummaryI have fetched posts with getServerSideProps from Firestore . So How can I get Instantly data for SSR ? I see Fireship tutorial with ISR but He update data on single post page.
Additional informationNo response Example |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
In my opinion, using SSR (Server-Side Rendering) to fetch data for a simple increment of likes when a user clicks the like button seems like an anti-pattern. I'm curious about the reasons behind wanting to use SSR to fetch the updated data when a like is added. From my perspective, it would be more efficient to use SSR initially to fetch the necessary data, and then transition to CSR for subsequent data updates resulting from user interactions. This approach could provide an overall better user experience, as the initial data fetch can benefit from SSR's advantages, and the subsequent interactions can be handled more smoothly with CSR. By utilizing CSR for interactive data updates, you can minimize the need for full page reloads and allow for a more responsive and dynamic user interface. Additionally, with the help of modern frontend libraries or frameworks, you can efficiently manage state and handle data updates on the client-side, providing a smoother experience for users interacting with the like button. - router.replace("/",undefined, {scroll:false});
+ axios.get(`/board/${uid}`) |
Beta Was this translation helpful? Give feedback.
-
|
I am confusing
|
Beta Was this translation helpful? Give feedback.
-
|
The axios.get code I provided was just an example. It seems like a better approach would be to implement the code for fetching data using CSR instead of SSR to receive the data. Declare the code you wrote in SSR again in CSR and use it |
Beta Was this translation helpful? Give feedback.
-
|
For me , The reason of using SSR instead of CSR is Loading Time Delay . You can compare it by visiting |
Beta Was this translation helpful? Give feedback.
-
|
I agree that using SSR can improve the initial loading speed compared to CSR. Therefore, it seems like a good idea to use SSR when a user visits the page for the first time. However, I'm concerned that fetching data again through SSR when a user clicks the "Like" button might result in slower loading speeds compared to CSR. So, my suggestion is to use SSR to fetch the initial data, and then use CSR to fetch the updated data after the user interacts with the "Like" button. This way, we can achieve faster loading speeds and a more responsive user interface. Implementing this approach might require writing the code to fetch data again in CSR, in addition to what was already written in the getServerSideProps function. |
Beta Was this translation helpful? Give feedback.
-
|
Great , That is a good idea . But I am worrying some functions are not working in CSR . Example AuthorInfo (photURL) from firebase admin SDK . So I think I should only retrieve the post.likes in CSR . |
Beta Was this translation helpful? Give feedback.
-
|
I looked at the code and confirmed that there is a lot of data communication happening in getServerSideProps, which results in receiving a large amount of data. It seems that the slow performance is due to the heavy communication. In my opinion, to resolve this, we should modify the structure so that only the communication to fetch the list of posts when liking a post occurs or only the data of the liked post is fetched. |
Beta Was this translation helpful? Give feedback.
-
|
It works ! Thanks for your time . Now I changed to CSR . But I don't know how to use SSR data when initial page load , then use CSR Like Count onClick
Working DemoVideo_2023_07_22-3.mp4 |
Beta Was this translation helpful? Give feedback.
I agree that using SSR can improve the initial loading speed compared to CSR. Therefore, it seems like a good idea to use SSR when a user visits the page for the first time. However, I'm concerned that fetching data again through SSR when a user clicks the "Like" button might result in slower loading speeds compared to CSR.
So, my suggestion is to use SSR to fetch the initial data, and then use CSR to fetch the updated data after the user interacts with the "Like" button. This way, we can achieve faster loading speeds and a more responsive user interface.
Implementing this approach might require writing the code to fetch data again in CSR, in addition to what was already written in the ge…