I\'m getting the following error using SSR
The issue is on the c
My solution is to use a middleware like express-useragent to detect the browser user agent. Then, in the server side, create a Then, it is still somehow a responsive design in SSR. HTTP Client Hints could help you with this. Another interesting article regarding Client Hints. The current accepted answer doesn’t play well with TypeScript. Here is what works for me. This will solve the issue.Warning: Expected server HTML to contain a matching
viewsize
like {width, height}
by the following rulesif (ua.isMobile) {
return {width: 360, height: 480}
}
if (ua.isDesktop) {
return {width: 768, height: 600}
}
return {width: 360, height: 480} // default, and for bot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
import React from "react"
import { hydrate, render } from "react-dom"
import BrowserRouter from "./routers/Browser"
const root = document.getElementById("root")
var renderMethod
if (root && root.innerHTML !== "") {
renderMethod = hydrate
} else {
renderMethod = render
}
renderMethod(<BrowserRouter />, document.getElementById("root"))
// Fix: Expected server HTML to contain a matching <a> in
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
renderMethod(
<BrowserRouter>
<RoutersController data={data} routes={routes} />
</BrowserRouter>,
document.getElementById('root')
);