What is the difference between these two ways of serving React App

I would like to serve a react project from the nodejs server. I encountered the two ways of doing it , the first ways is to use express to serve just the build folder for whatever the req made.

const express = require('express')
const app = express()
const path = require('path')

app.use(express.static(path.join(__dirname,'build')))

app.get('*',function(req,res){
    res.sendFile(path.join(__dirname,'build','index.html'))
})
module.exports = app;

The second way is one using ReactDOM.hydrate and ReactDOMServer.renderToString to serve the app.
refer this link https://www.digitalocean.com/community/tutorials/react-server-side-rendering

What is best way to achieve the good SEO from the above mentioned ways? and also when to choose one over other.

Thnak you!!!

Comments

[Benjioe]

With the first (client-side rendering) you serve your project as JavaScript files. The browser has to interpret them to display the page.
With the second way (server-side rendering), your server generates HTML from your React and send it to the browser.

So the second way is more complex, but more performing who is better for SEO.

If you choose the second way, look at Next. JS, it helps a lot ;).

P.S: SSR is a little more complex than just rendering HTML. It could choose to send Javascript or Json to limit bandwidth usage.

[Benjioe]

And there is a third way : Static Site Generation (jamstack) where you generate html from react when you deploy (at compile time).

Could be more scalable, more secure and have a better caching strategy, but you have to manage database changes.

Next.JS or Gatsby can help with that.