I am currently facing a challenge with the website I'm working on as it lacks a responsive design. This means that the view I display is dependent on the user agent of the client. In order to achieve this, I have been using getServerSideProps to determine which view to render. However, after analyzing the website's requirements, I believe it would be more beneficial to utilize getStaticProps and revalidate it every 3 minutes. The only issue is that getStaticProps and getServerSideProps cannot coexist. Is there an alternative method to access user agent headers?
util.js
import * as Parser from "ua-parser-js";
export const isMobile = (req) => {
let ua;
if (req) {
ua = Parser(req.headers["user-agent"] || "");
} else {
ua = new Parser().getResult();
}
return (
ua?.device?.type === "mobile"
);
};somepage.js
import { isMobile } from "util";
import { useEffect } from "react";
const SomePage = ({ isMobile }) => {
return isMobile ? <View1 /> : <View2 />;
};
export default SomePage;
export async function getServerSideProps({ req }) {
return {
props: {
isMobile: isMobile(req),
},
};
}