How to detect Internet Explorer on Next.js (SSR)?

Question

There is a project where we use Next.js. In this project, Internet Explorer view is in a very bad state due to various React.js packages. (For example: React-Slick settings, tag etc.)

I'm also thinking of something to check if the browser is IE but unfortunately the "react-device-detect" package didn't work as it is SSR.

Example:

import {isIE} from "react-device-detect" 

<section className="home">
    {isIE ? (
    <div>
      <p>Google Chrome, Firefox, etc...</p>
    </div>
  ) : (
    <div>
      <p>Internet Explorer</p>
    </div>
  )}
</section>

When I do console.log, it understands whether the browser is IE or not, but it does not fulfill its task. For example: If the browser is IE, we want to render "X", but both Chrome and IE render X.)

How can I detect that the browser is Internet Explorer and provide this browser specific control on Next.js (SSR)? Thanks.

Does this answer your question? [Check if user is using IE](https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie) — Reyno, Jul 06 '21 at 07:12
@Reyno unfortunately not. I've been trying since yesterday but I still can't do it. There is still debate on this issue. it doesn't understand if the browser is IE and renders incorrectly on SSR. check it: https://github.com/duskload/react-device-detect/issues/75 — ogulcan, Jul 06 '21 at 07:15
Next.js developers normally do browser detection in useEffect hooks, and update the state after the initial render to avoid DOM mismatch between the client and the server. It's because it's not easy to detect browsers on the server-side. — Andor Polgar, Jul 06 '21 at 07:22
@AndorPolgar comment make total sense, detecting browser at server end these days is not great, especially when anti browser fingerprinting seems to be popular, faking the user-agent is likely the first place that gets mashed. One of the reasons why detecting browsers is usually not a great idea, and feature detection is the way to go. — Keith, Jul 06 '21 at 07:32

brc-dd · Answer 1 · 2021-07-06T07:49:29.053

Why not simply do something like this:

export default function IndexPage({ isIE }) {
  return <div>Hello {isIE ? "IE" : "Modern Browsers"}!</div>;
}

export async function getServerSideProps({ req }) {
  return {
    props: {
      isIE: /MSIE|Trident/.test(req.headers["user-agent"])
    }
  };
}

Or maybe:

import { useEffect, useState } from "react";

export default function IndexPage() {
  const [isIE, setIsIE] = useState(false);

  useEffect(() => {
    setIsIE(/MSIE|Trident/.test(window.navigator.userAgent));
    return () => {};
  }, []);

  return <div>Hello {isIE ? "IE" : "Modern Browsers"}!</div>;
}

PS: IE users generally don't fake the user-agent headers, so the first should work fine for general users. Also, the second method will need efforts (during development) to manually check by running the website on IE as User-Agent Switcher just changes the headers. And, AFAIK services like Google Fonts too just check the headers and send the CSS accordingly. Also, I agree with Keith you should go with feature detection (and fallbacks) instead of selective rendering.

Side Note:

Please read Browser detection using the user agent for why serving different Web pages or services to different browsers is usually a bad idea.

~ MDN

score 1 · Answer 2 · answered Jul 06 '21 at 07:20

1

The only way to understand on which browser your application will be displayed is to intercept the User-Agent headers in the request that arrives at the Next.js server

The SSR stage has no visibility into what type of browser the user is using.

answered Jul 06 '21 at 07:20

rdonadono

72
2
8

score 0 · Answer 3 · answered Jul 06 '21 at 07:17

It is possible if you need to detect on client side, with user navigator object. Following function return true if the browner is internet explorer

function isIE() {
  return (
    /MSIE (\d+\.\d+);/.test(navigator.userAgent) ||
    navigator.userAgent.indexOf("Trident/") > -1
  );
}

How to detect Internet Explorer on Next.js (SSR)?

3 Answers3