Merge pull request #89 from stack-wuh/feat-performance

Feat performance

pages/post/[id].tsx

@@ -17,10 +17,10 @@ import withLayout from '@/layout/layout'
 
 function useData(id: string | string[] | undefined) {
   const {data, error} = useRequest(params => {
-    return fetcher(`${API_ARTICLE_ITEM}${params.id}`)
+      return fetcher(`${API_ARTICLE_ITEM}${params.id}`)
   }, {
     defaultParams: [{ id }],
-    cacheKey: API_ARTICLE_ITEM
+    cacheKey: API_ARTICLE_ITEM,
   })
 
   return {
@@ -31,16 +31,33 @@ function useData(id: string | string[] | undefined) {
 
 const Detail: React.FC<{}> = () => {
   const router = useRouter()
-  const { data, error } = useData(router.query.id)
+  const [externalUrls, setExternalUrls] = React.useState({
+    hljs: '',
+    hlmjs: '',
+    github: ''
+  })
+  /**
+   * !FIXED 刷新页面 router.query.id 会出现一个空对象
+   */
+  if (!router.query.id) return <Empty.Loading></Empty.Loading>
 
-  useExternal('https://src.wuh.site/scripts/highlight.min.js', { type: 'js' })
-  useExternal('https://src.wuh.site/scripts/highlight.js', { type: 'js' })
-  useExternal('https://src.wuh.site/stylesheet/github.min.css', { type: 'css' })
+  const { data, error } = useData(router.query.id)
 
+  useExternal(externalUrls.hljs, { type: 'js' })
+  useExternal(externalUrls.hlmjs, { type: 'js' })
+  useExternal(externalUrls.github, { type: 'css' })
 
   if (error) return <div className="error">ERROR</div>
   if (!data) return <Empty.Loading />
 
+  React.useEffect(() => {
+    setExternalUrls({
+      hljs: 'https://src.wuh.site/scripts/highlight.min.js',
+      hlmjs: 'https://src.wuh.site/scripts/highlight.js',
+      github: 'https://src.wuh.site/stylesheet/github.min.css'
+    })
+  }, [])
+
 
   return (
     <div className="ww_detail">