[RFC] 002 - Pref Mobile 移动端 FOUC

[arvinxx]

问题

由于我们在移动端和桌面端采用两套完全不同的布局，因此需要通过 JS 来判断布局组件的渲染。

由于当前判断 mobile 采用了 客户端 JS 判断，会导致移动端的 FOUC。

trim.87F9BA4C-BD70-4445-A14D-9E2CDE7A5BBD.MOV

此前在 SSG 下此问题基本无解。

在 SSR 下可以采用 cookie 或者 ua 的方式做判断优化首屏，但仍然会引入两套路由布局组件，导致 js bundle 相对较大。

在切换到app router后，我们可以尝试 rsc 从根本上解决该问题。

思路

将mobile判断从 const { mobile } = useResponsive(); 的 client 端判断，换成服务端判断。

目前看到比较合适的库是 ua-parser-js ，体验 demo: https://uaparser.js.org/

在服务端中使用的方式：

const result = UAParser(request.headers); // parse only "user-agent" header

改造代码

以 welcome 为例 :

当前的实现为

'use client';

const Welcome = () => {
  const { mobile } = useResponsive();

  return mobile ? (
    <Mobile>
      <Banner />
    </Mobile>
  ) : (
    <Layout>
      <Banner />
      <Footer />
    </Layout>
  );
};

export default Welcome;

改造后：

// layout.tsx
import { PropsWithChildren } from 'react';

import { isMobileDevice } from '@/utils/responsive';

import Desktop from './DesktopLayout';
import Mobile from './MobileLayout';
import Footer from './features/Footer';

const Layout = ({ children }: PropsWithChildren) => {
  const mobile = isMobileDevice();

  return mobile ? (
    <Mobile>{children}</Mobile>
  ) : (
    <Desktop>
      {children}
      <Footer />
    </Desktop>
  );
};

export default Layout;

待明确点

1. page和 layout 怎么区分的最佳实践？
2. 相应的性能和尺寸如何评估？
3. Desktop 下仍然存在响应式，所以desktop 的jsbundle尺寸小不了？且如果 pc 上浏览器是小尺寸的话，可能仍然有 FOUC 的问题。

[arvinxx]

• welcome ⚡️ perf: reduce js bundle size #257
• chat ⚡️ perf: reduce mobile chat js bundle size #264
• settings ♻️ refactor: Use modern-screenshot and refactor layout (#256, #252) #279
• market Refactor/market #278

[arvinxx]

chat 路由改造效果：

https://twitter.com/arvin17x/status/1710860673499177393?s=61&t=ZkWAwVnwODUo0Bew3JG2Kg

[canisminor1990]

Lighthouse Reports #279

TOC

• Welcome Page
• Chat Page
• Market Page
• Settings Page

Welcome Page

Info
https://chat-preview.lobehub.com/welcome

Desktop	Mobile
⚡️ Lighthouse Report	⚡️ Lighthouse Report

Chat Page

Info
https://chat-preview.lobehub.com/chat

Desktop	Mobile
⚡️ Lighthouse Report	⚡️ Lighthouse Report

Market Page

Info
https://chat-preview.lobehub.com/market

Desktop	Mobile
⚡️ Lighthouse Report	⚡️ Lighthouse Report

Settings Page

Info
https://chat-preview.lobehub.com/settings

Desktop	Mobile
⚡️ Lighthouse Report	⚡️ Lighthouse Report