feat: lcp optimize

Signed-off-by: Innei <[email protected]>
Innei · Jul 15, 2023 · 89ee9ad · 89ee9ad
1 parent 23785ce
commit 89ee9ad
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 31 deletions.
diff --git a/src/app/(note-topic)/notes/topics/page.tsx b/src/app/(note-topic)/notes/topics/page.tsx
@@ -30,6 +30,7 @@ export default function Page() {
 
             return (
               <BottomToUpTransitionView
+                lcpOptimization
                 key={item.id}
                 delay={700 + 50 * i}
                 as="li"

diff --git a/src/app/(page-detail)/[slug]/layout.tsx b/src/app/(page-detail)/[slug]/layout.tsx
@@ -89,15 +89,15 @@ export default async (props: NextPageParams<PageParams>) => {
             <HeaderMetaInfoSetting />
             <article className="prose">
               <header className="mb-8">
-                <BottomToUpSoftScaleTransitionView delay={0}>
+                <BottomToUpSoftScaleTransitionView lcpOptimization delay={0}>
                   <PageTitle />
                 </BottomToUpSoftScaleTransitionView>
 
-                <BottomToUpSoftScaleTransitionView delay={200}>
+                <BottomToUpSoftScaleTransitionView lcpOptimization delay={200}>
                   <PageSubTitle />
                 </BottomToUpSoftScaleTransitionView>
               </header>
-              <BottomToUpTransitionView delay={600}>
+              <BottomToUpTransitionView lcpOptimization delay={600}>
                 {props.children}
               </BottomToUpTransitionView>
             </article>

diff --git a/src/app/feed/route.tsx b/src/app/feed/route.tsx
@@ -15,7 +15,7 @@ export const revalidate = 60 * 60 // 1 hour
 
 export async function GET() {
   const ReactDOM = (await import('react-dom/server')).default
-  const queryClient = await getQueryClient()
+  const queryClient = getQueryClient()
 
   const { author, data, url } = await queryClient.fetchQuery({
     queryKey: ['rss'],

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import type { AppThemeConfig } from './config'
 import { ClerkProvider } from '@clerk/nextjs'
 
 import PKG from '~/../package.json'
+import { HydrationEndDetector } from '~/components/common/HydrationEndDetector'
 import { Root } from '~/components/layout/root/Root'
 import { TocAutoScroll } from '~/components/widgets/toc/TocAutoScroll'
 import { attachUA } from '~/lib/attach-ua'
@@ -27,7 +28,7 @@ export const revalidate = 60
 
 let aggregationData: (AggregateRoot & { theme: AppThemeConfig }) | null = null
 export const generateMetadata = async () => {
-  const queryClient = await getQueryClient()
+  const queryClient = getQueryClient()
 
   const fetchedData =
     aggregationData ??
@@ -121,6 +122,7 @@ export default async function RootLayout(props: Props) {
       <html lang="zh-CN" className="noise" suppressHydrationWarning>
         <head>
           <SayHi />
+          <HydrationEndDetector />
         </head>
         <body
           className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}

diff --git a/src/app/notes/[id]/layout.tsx b/src/app/notes/[id]/layout.tsx
@@ -82,8 +82,10 @@ export default async (
       <CurrentNoteDataProvider data={data} />
       <SyncNoteDataAfterLoggedIn />
 
-      <Transition className="min-w-0">
-        <Paper as={NoteMainContainer}>{props.children}</Paper>
+      <Transition className="min-w-0" lcpOptimization>
+        <Paper key={id} as={NoteMainContainer}>
+          {props.children}
+        </Paper>
         <BottomToUpSoftScaleTransitionView delay={500}>
           <CommentAreaRootLazy
             refId={noteObjectId}

diff --git a/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx b/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx
@@ -83,7 +83,7 @@ export default async (props: NextPageParams<PageParams>) => {
     <>
       <CurrentPostDataProvider data={data} />
       <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
-        <BottomToUpTransitionView className="min-w-0">
+        <BottomToUpTransitionView lcpOptimization className="min-w-0">
           {props.children}
 
           <BottomToUpSoftScaleTransitionView delay={500}>

diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
@@ -34,7 +34,12 @@ export default async (props: Props) => {
       <ul>
         {data.map((item, index) => {
           return (
-            <BottomToUpTransitionView key={item.id} as="li" delay={index * 100}>
+            <BottomToUpTransitionView
+              lcpOptimization
+              key={item.id}
+              as="li"
+              delay={index * 100}
+            >
               <PostItem data={item} />
             </BottomToUpTransitionView>
           )

diff --git a/src/app/sitemap/route.tsx b/src/app/sitemap/route.tsx
@@ -5,7 +5,7 @@ export const runtime = 'edge'
 export const revalidate = 60 * 60 // 1 hour
 
 export const GET = async () => {
-  const queryClient = await getQueryClient()
+  const queryClient = getQueryClient()
 
   const { data } = await queryClient.fetchQuery({
     queryKey: ['sitemap'],

diff --git a/src/components/common/ErrorBoundary.tsx b/src/components/common/ErrorBoundary.tsx
@@ -5,11 +5,32 @@ import type { FC, PropsWithChildren } from 'react'
 
 import { captureException } from '@sentry/nextjs'
 
+import { StyledButton } from '../ui/button'
+
 const Noop = () => null
+
+const FallbackComponent = () => {
+  return (
+    <div className="flex w-full flex-col py-6 center">
+      Something went wrong. Please contract to{' '}
+      <a href="mailto:[email protected]" className="shiro-link--underline">
+        [email protected]
+      </a>
+      .
+      <StyledButton
+        onClick={() => {
+          window.location.reload()
+        }}
+      >
+        Reload Page
+      </StyledButton>
+    </div>
+  )
+}
 export const ErrorBoundary: FC<PropsWithChildren> = ({ children }) => {
   return (
     <ErrorBoundaryLib
-      FallbackComponent={Noop}
+      FallbackComponent={FallbackComponent}
       onError={(e) => {
         console.error(e)
 

diff --git a/src/components/common/HydrationEndDetector.tsx b/src/components/common/HydrationEndDetector.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useEffect } from 'react'
+import { atom } from 'jotai'
+
+import { jotaiStore } from '~/lib/store'
+
+const hydrateEndAtom = atom(false)
+
+/**
+ * To skip page transition when first load, improve LCP
+ */
+export const HydrationEndDetector = () => {
+  useEffect(() => {
+    // waiting for hydration end and animation end
+    setTimeout(() => {
+      jotaiStore.set(hydrateEndAtom, true)
+    }, 2000)
+  }, [])
+  return null
+}
+
+export const isHydrationEnded = () => jotaiStore.get(hydrateEndAtom)
diff --git a/src/components/layout/footer/FooterInfo.tsx b/src/components/layout/footer/FooterInfo.tsx
@@ -22,7 +22,7 @@ export const FooterInfo = () => {
 }
 
 const FooterLinkSection = async () => {
-  const queryClient = await getQueryClient()
+  const queryClient = getQueryClient()
   const data = await queryClient.fetchQuery(queries.aggregation.root())
   const { footer } = data.theme
   const footerConfig: FooterConfig = footer || {
@@ -123,7 +123,7 @@ const FooterBottom = async () => {
   //   }
   // }
 
-  const queryClient = await getQueryClient()
+  const queryClient = getQueryClient()
   const data = await queryClient.fetchQuery(queries.aggregation.root())
   const { footer } = data.theme
   const footerConfig = footer || {}

diff --git a/src/components/ui/transition/factor.tsx b/src/components/ui/transition/factor.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { m } from 'framer-motion'
 import type {
   HTMLMotionProps,
@@ -11,6 +11,7 @@ import type {
 import type { FC, PropsWithChildren } from 'react'
 import type { BaseTransitionProps } from './typings'
 
+import { isHydrationEnded } from '~/components/common/HydrationEndDetector'
 import { microReboundPreset } from '~/constants/spring'
 
 interface TransitionViewParams {
@@ -24,28 +25,34 @@ export const createTransitionView = (
   params: TransitionViewParams,
 ): FC<PropsWithChildren<BaseTransitionProps>> => {
   const { from, to, initial, preset } = params
+
   const TransitionView = (props: PropsWithChildren<BaseTransitionProps>) => {
     const {
       timeout = {},
       duration = 0.5,
-      appear = true,
 
       animation = {},
       as = 'div',
       delay = 0,
-
+      lcpOptimization = false,
       ...rest
     } = props
 
     const { enter = delay, exit = delay } = timeout
 
     const MotionComponent = m[as] as FC<HTMLMotionProps<any>>
 
-    if (!appear) return props.children
-
     return (
       <MotionComponent
-        initial={{ ...(initial || from) }}
+        initial={useMemo(
+          () =>
+            lcpOptimization
+              ? isHydrationEnded()
+                ? initial || from
+                : true
+              : initial || from,
+          [],
+        )}
         animate={{
           ...to,
           transition: {
@@ -54,9 +61,6 @@ export const createTransitionView = (
             ...animation.enter,
             delay: enter / 1000,
           },
-          onTransitionEnd() {
-            props.onEntered?.()
-          },
         }}
         exit={{
           ...from,

diff --git a/src/components/ui/transition/typings.ts b/src/components/ui/transition/typings.ts
@@ -2,8 +2,7 @@ import type { HTMLMotionProps, m, TargetAndTransition } from 'framer-motion'
 
 export interface BaseTransitionProps extends HTMLMotionProps<'div'> {
   duration?: number
-  onEntered?: () => void
-  appear?: boolean
+
   timeout?: {
     exit?: number
     enter?: number
@@ -16,5 +15,6 @@ export interface BaseTransitionProps extends HTMLMotionProps<'div'> {
     exit?: TargetAndTransition['transition']
   }
 
+  lcpOptimization?: boolean
   as?: keyof typeof m
 }
diff --git a/src/components/widgets/comment/CommentRootLazy.tsx b/src/components/widgets/comment/CommentRootLazy.tsx
@@ -2,6 +2,7 @@
 
 import dynamic from 'next/dynamic'
 
+import { ErrorBoundary } from '~/components/common/ErrorBoundary'
 import { LazyLoad } from '~/components/common/Lazyload'
 import { Loading } from '~/components/ui/loading'
 
@@ -17,8 +18,10 @@ const CommentAreaRoot = dynamic(
 
 export const CommentAreaRootLazy: typeof CommentAreaRoot = (props) => {
   return (
-    <LazyLoad placeholder={LoadingElement}>
-      <CommentAreaRoot {...props} />
-    </LazyLoad>
+    <ErrorBoundary>
+      <LazyLoad placeholder={LoadingElement}>
+        <CommentAreaRoot {...props} />
+      </LazyLoad>
+    </ErrorBoundary>
   )
 }
diff --git a/src/components/widgets/comment/index.ts b/src/components/widgets/comment/index.ts
@@ -15,8 +15,4 @@ export const CommentBoxRootLazy = dynamic(
   },
 )
 
-// export { CommentAreaRoot } from './CommentRoot'
 export { CommentAreaRootLazy } from './CommentRootLazy'
-
-// export { Comments } from './Comments'
-// export { CommentBoxRoot } from './CommentBox'