CSR or SSR
So I am creating an app where you have a card component which contains title , link ,tags , and a textarea ,link renders a tweet embedded or YouTube iframe accordingly , now the things is I want to know which rendering strategy to use , there will be add card button to create a new card and textarea will contain a save button to update the content of card , as there is need of interactivity at different places , I am confused what to use here
2 Replies
it depends on A. where the cards are saved and B. how involved you want the client input to be. if you are saving these cards to a database or on the server in some way you can get by using ssr entirely with forms, but you give up client side validation + added latency when the user hits save. doing it client side and then using a mutation to sync it to server side allows you to do client side validation (e.g warn the user as they're typing that the link is invalid) + you can do optimistic updates, save the card immediately on client as you send the mutation, and only delete it if the server errors out.
With SSR you want to avoid increasing the server load, since it’s basically going to render the UI for each request. This can be very impactful if you have many concurrent users or high traffic but on the other hand it can also make the page load faster.
I believe for your use case CSR is fine to use, you’ll just provide a form with some validations and then make a request to an API to add the new card’s data into a DB and then having some validations running in the backend to make sure the data that was entered is correct and wasn’t manipulated.