should I use server side rendering(Next.js) for a dapp?

Question

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

An example of web3 setup

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

Answer 1

The big idea behind using the Next.js in 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 componentDidMount function. 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, the next.js server 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.

Answer 2

There is a little more distinction which may help clarify the answer.

When working with a blockchain network, there are plenty of things you can do without the account holder's information such as discovering contracts and invoking their methods. However, anything you need to do using the account holder's information must be performed in the CSR context.