Next SSR isMobile control for component render

[brkdmn35]

Hello,

Currently I am using a getStaticProps to cache my page for a hour. But with this I am loosing context of request to decide device type from header.

`
import React from 'react'
import { GetStaticProps } from 'next'

// Theme layout
import Layout from '../../layouts/LayoutDefault'
import { useTheme } from '@material-ui/core/styles'

//js
import axios from '../../assets/js/utils/request/axios'

//Components
import { SeoHelper } from '../../components/Shared/SeoHelper'

const Dob = ({

}) => {

return (
    <Layout>
        <SeoHelper
            title={'Test'}
            description="Desc"
            canonical={`${process.env.domain}test`}
        />

    </Layout>
)

}

export const getStaticProps: GetStaticProps = async (context) => {
const [apiResponse] = await Promise.all(
[
axios.get(https://bdemirezen.test.hesapkurdu.com/dob/product/get-active),
]
);
const productList = apiResponse.data;

return {
    props: {
        productList
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 1 Hour
    revalidate: 3600
}

}

export default Dob;
`

So, I need to decide is request Mobile or Desktop on serverside not with css. Is there any way to use 2 GetStaticProps one of these will have 1 hour cache and the other one will execute every request.

If it is not possible, I am open for further solutions.

Thank You.

[thibautsabot]

Hello!

getStaticProps is called at build time and has no request-specific knowledge.
You cannot have multiple rendered HTML for a same page. Everyone will get the same output.

You'll ever need to have some conditional rendering handled by the client, or use something like getServerSideProps to process the output for each user.

[brkdmn35]

For example I have 2 different navbar for mobile and desktop. I am using Material-ui.

It has mediaquery like const isMobile = useMediaQuery(theme.breakpoints.down('xs'))

But in first load it pretend like it's desktop even device is mobile. After chunk loadded it changes to true status.

I solved with moving it to useEffect, so while chunk loading I show nothing then it loads true navbar. With this I loose my code from source code.

[expert-47]

by doing so your site performance will be slow

[brkdmn35]

with this control my isMobile controls looks empty until page load completed. What is the best way check device type and using in component

[icyJoseph]

Use CSS, if the useEffect solution is not good enough.

Sorry for being simplistic, but the initial server and client HTML has to be the same. Such hooks usually read directly on the window. At build time there's no window, because the build happens on the server, so there's NO WAY to know which device will render the content, by definition, and the hooks are forced to make a decision, often assuming to be on desktop.

[aravindanve]

I wanted to pre-render a page conditionally based on the device type on React/NextJS/SSR. I was able to do it by storing the user-agent in a context and reading it from a hook useIsMobile() which returned true or false based on the parsed user-agent header on the server side.

We create a context to store the parsed user-agent header.

// userAgentContext.ts
import { userAgent } from "next/server";
import { createContext } from "react";

export type UserAgent = ReturnType<typeof userAgent>;
export const UserAgentContext = createContext<UserAgent | undefined>(undefined);

We create a hook to consume the context and check device type.

// useIsMobile.ts
import { useContext } from "react";
import { UserAgentContext } from "./userAgentContext.ts";

export const useIsMobile = () => {
  const userAgent = useContext(UserAgentContext);
  if (!userAgent) {
    throw new Error("useIsMobile must be used within a UserAgentContext.Provider");
  }

  return userAgent.device.type === "mobile";
};

We can use a sever component as the layout (app router) to get the user agent from request headers

// layout.tsx
"use server";

import { headers } from "next/headers";
import { userAgent } from "next/server";
import { LayoutClient } from "./layoutClient.ts";

export default async function Layout({ children }: { children: React.ReactNode }) {
  const reqUserAgent = userAgent({ headers: headers() });
  return <LayoutClient reqUserAgent={reqUserAgent}>{children}</LayoutClient>
}

We can then pass the user agent to a client component that will provide the initial value for the context. Since client components with "use client" directive are still rendered once on the server with initial values then hydrated on the client.

// layoutClient.tsx
"use client";

import { UserAgentContext } from "./userAgentContext.ts";

export default function LayoutClient({ reqUserAgent, children }: { reqUserAgent: UserAgent, children: React.ReactNode }) {
  return <UserAgentContext.Provider value={reqUserAgent}>{children}</UserAgentContext.Provider>;
}

Now when this page is rendered for the first time on the server with initial values, useIsMobile() should accurately return a value based on the user-agent device type.

// page.tsx
"use client";

export default function Page() {
  const isMobile = useIsMobile();

  return isMobile ? <>Mobile</> : <>Desktop</>;
}

[victorpavlenko]

export default function useMobile() {
    const isSizeMobile = useMediaQuery('(max-width: 768px)');
    const isInitialMobile = useIsInitialMobile();

    if(isSizeMobile === undefined) {
        return isInitialMobile
    } else {
        return isSizeMobile;
    }
}

Just so that it works 100%

[aravindanve]

@victorpavlenko I use antd, so I just wrap antd's useBreakpoint hook like this. Breakpoint values are undefined on the server so it falls back to the isMobile value. On the client it works as expected based on screen width.

/**
 * Estimates breakpoints on server side based on user agent
 * to prevent always loading mobile layout on SSR
 **/
export const useServerBreakpoint = () => {
  const breakpoint = Grid.useBreakpoint();
  const userAgent = useContext(ServerBreakpointContext);

  if (!userAgent) {
    throw new Error("useServerBreakpoint must be used within a ServerBreakpointProvider");
  }

  const isMobile = userAgent.device.type === "mobile";

  return useMemo(
    () => ({
      xxl: breakpoint.xxl ?? !isMobile,
      xl: breakpoint.xl ?? !isMobile,
      lg: breakpoint.lg ?? !isMobile,
      md: breakpoint.md ?? !isMobile,
      sm: breakpoint.sm ?? true,
      xs: breakpoint.xs ?? true,
    }),
    [breakpoint.lg, breakpoint.md, breakpoint.sm, breakpoint.xl, breakpoint.xs, breakpoint.xxl, isMobile],
  );
};