javascript - How to detect Internet Explorer on Next.js (SSR)? - Stack Overflow

admin管理员组

文章数量:1023195

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.

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.

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Jul 6, 2021 at 7:17 ogulcan asked Jul 6, 2021 at 7:10 ogulcanogulcan 14511 gold badge55 silver badges1313 bronze badges 4

• Does this answer your question? Check if user is using IE – StackByMe Commented Jul 6, 2021 at 7: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: github./duskload/react-device-detect/issues/75 – ogulcan Commented Jul 6, 2021 at 7: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 Commented Jul 6, 2021 at 7:22
• @AndorPolgar ment 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 Commented Jul 6, 2021 at 7:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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.

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
  );
}

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.

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.

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Jul 6, 2021 at 7:17 ogulcan asked Jul 6, 2021 at 7:10 ogulcanogulcan 14511 gold badge55 silver badges1313 bronze badges 4

• Does this answer your question? Check if user is using IE – StackByMe Commented Jul 6, 2021 at 7: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: github./duskload/react-device-detect/issues/75 – ogulcan Commented Jul 6, 2021 at 7: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 Commented Jul 6, 2021 at 7:22
• @AndorPolgar ment 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 Commented Jul 6, 2021 at 7:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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.

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
  );
}

本文标签： javascriptHow to detect Internet Explorer on Nextjs (SSR)Stack Overflow