Recently I have been studying a lot about dapps and now working on a little complex one. So what I wanted to ask is which is better for a dapp ? SSR or CSR ?
I have read in a couple of places that we should use SSR incase if metamask is not installed on the browser and we can fetch info from the Ethereum blockchain on the server using something like infura from the server(ofcourse we still cant sign anything).
A simple setup would be like the code in the link below
As you can see I am checking if web3 exist in the browser and use the injected one but if its not (else case), I am using infura.
My question is that cant we just use CSR because it will work even if the page is rendered in the client side.
It will simply use infura if web3 doesn't exits and we can use componentDidMount lifecycle method for fetching the data from the ethereum blockchain.
Please ask for the details if needed
Regards
Best Answer
The big idea behind using the
Next.jsin ethereum applications (dapps) is server side rendering. You can also use CSR but it will not be good for user experience.Let say you are building an voting application and the candidates are stored on the blockchain. To populate the html document the data should be fetched from blockchain. As you said we can fetch the data on CSR and can use
componentDidMountfunction. First it will take more time. Secondly, if user do not have metamask installed, the user will see blank Html document and will never get any interest in the application and will not even try to install metemask.On the other hand, by using
next.js, thenext.jsserver run the react app and do the necessary calls to blockchain to get data and populate the html document and then send the populated html document with that data to client, later it also send all the JS code to handle user interactions on browser.So SSR is suggested because we should show something to our users whether or not they already installed metamask or not.
Hope it helps to clear understanding.