Improve Build Output for SSG (#9719)

* Improve Build Output for SSG * Swap out symbols and reasons * adjust text more * Add test * Expect more output lines * fix test case
vercel · Dec 12, 2019 · 5b57a75 · 5b57a75
1 parent c4567a1
commit 5b57a75
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 32 deletions.
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
@@ -384,6 +384,8 @@ export default async function build(dir: string, conf = null): Promise<void> {
       )
 
       let isStatic = false
+      let isSsg = false
+      let ssgPageRoutes: string[] | null = null
 
       pagesManifest[page] = bundleRelative.replace(/\\/g, '/')
 
@@ -432,25 +434,29 @@ export default async function build(dir: string, conf = null): Promise<void> {
 
           if (result.prerender) {
             sprPages.add(page)
+            isSsg = true
 
             if (result.prerenderRoutes) {
               additionalSprPaths.set(page, result.prerenderRoutes)
+              ssgPageRoutes = result.prerenderRoutes
             }
-          }
-
-          if (result.static && customAppGetInitialProps === false) {
+          } else if (result.static && customAppGetInitialProps === false) {
             staticPages.add(page)
             isStatic = true
-          } else if (result.prerender) {
-            sprPages.add(page)
           }
         } catch (err) {
           if (err.message !== 'INVALID_DEFAULT_EXPORT') throw err
           invalidPages.add(page)
         }
       }
 
-      pageInfos.set(page, { size, serverBundle, static: isStatic })
+      pageInfos.set(page, {
+        size,
+        serverBundle,
+        static: isStatic,
+        isSsg,
+        ssgPageRoutes,
+      })
     })
   )
   staticCheckWorkers.end()

diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
@@ -37,7 +37,9 @@ export function collectPages(
 export interface PageInfo {
   isAmp?: boolean
   size: number
-  static?: boolean
+  static: boolean
+  isSsg: boolean
+  ssgPageRoutes: string[] | null
   serverBundle: string
 }
 
@@ -56,8 +58,8 @@ export function printTreeView(
     return chalk.red.bold(size)
   }
 
-  const messages: string[][] = [
-    ['Page', 'Size'].map(entry => chalk.underline(entry)),
+  const messages: [string, string][] = [
+    ['Page', 'Size'].map(entry => chalk.underline(entry)) as [string, string],
   ]
 
   list
@@ -79,10 +81,10 @@ export function printTreeView(
           item.startsWith('/_')
             ? ' '
             : pageInfo && pageInfo.static
-            ? '*'
-            : serverless
-            ? 'λ'
-            : 'σ'
+            ? '○'
+            : pageInfo && pageInfo.isSsg
+            ? '●'
+            : 'λ'
         } ${item}`,
         pageInfo
           ? pageInfo.isAmp
@@ -92,11 +94,28 @@ export function printTreeView(
             : ''
           : '',
       ])
+
+      if (pageInfo && pageInfo.ssgPageRoutes && pageInfo.ssgPageRoutes.length) {
+        const totalRoutes = pageInfo.ssgPageRoutes.length
+        const previewPages = totalRoutes === 4 ? 4 : 3
+        const contSymbol = i === list.length - 1 ? ' ' : '├'
+
+        const routes = pageInfo.ssgPageRoutes.slice(0, previewPages)
+        if (totalRoutes > previewPages) {
+          const remaining = totalRoutes - previewPages
+          routes.push(`[+${remaining} more paths]`)
+        }
+
+        routes.forEach((slug, index, { length }) => {
+          const innerSymbol = index === length - 1 ? '└' : '├'
+          messages.push([`${contSymbol}   ${innerSymbol} ${slug}`, ''])
+        })
+      }
     })
 
   console.log(
     textTable(messages, {
-      align: ['l', 'l', 'r', 'r'],
+      align: ['l', 'l'],
       stringLength: str => stripAnsi(str).length,
     })
   )
@@ -105,23 +124,26 @@ export function printTreeView(
   console.log(
     textTable(
       [
-        serverless
-          ? [
-              'λ',
-              '(Lambda)',
-              `page was emitted as a lambda (i.e. ${chalk.cyan(
-                'getInitialProps'
-              )})`,
-            ]
-          : [
-              'σ',
-              '(Server)',
-              `page will be server rendered (i.e. ${chalk.cyan(
-                'getInitialProps'
-              )})`,
-            ],
-        ['*', '(Static File)', 'page was prerendered as static HTML'],
-      ],
+        [
+          'λ',
+          serverless ? '(Lambda)' : '(Server)',
+          `server-side renders at runtime (uses ${chalk.cyan(
+            'getInitialProps'
+          )} or ${chalk.cyan('getServerProps')})`,
+        ],
+        [
+          '○',
+          '(Static)',
+          'automatically rendered as static HTML (uses no initial props)',
+        ],
+        [
+          '●',
+          '(SSG)',
+          `automatically generated as static HTML + JSON (uses ${chalk.cyan(
+            'getStaticProps'
+          )})`,
+        ],
+      ] as [string, string, string][],
       {
         align: ['l', 'l', 'l'],
         stringLength: str => stripAnsi(str).length,

diff --git a/test/integration/prerender/pages/blog/[post]/index.js b/test/integration/prerender/pages/blog/[post]/index.js
@@ -8,6 +8,7 @@ export async function unstable_getStaticPaths() {
     '/blog/post-1',
     { params: { post: 'post-2' } },
     '/blog/[post3]',
+    '/blog/post-4',
     '/blog/post.1',
   ]
 }

diff --git a/test/integration/prerender/test/index.test.js b/test/integration/prerender/test/index.test.js
@@ -66,6 +66,11 @@ const expectedManifestRoutes = () => ({
     initialRevalidateSeconds: 10,
     srcRoute: '/blog/[post]',
   },
+  '/blog/post-4': {
+    dataRoute: `/_next/data/${buildId}/blog/post-4.json`,
+    initialRevalidateSeconds: 10,
+    srcRoute: '/blog/[post]',
+  },
   '/blog/post-1/comment-1': {
     dataRoute: `/_next/data/${buildId}/blog/post-1/comment-1.json`,
     initialRevalidateSeconds: 2,
@@ -478,9 +483,12 @@ describe('SPR Prerender', () => {
   })
 
   describe('production mode', () => {
+    let buildOutput = ''
     beforeAll(async () => {
       await fs.remove(nextConfig)
-      await nextBuild(appDir)
+      const { stdout } = await nextBuild(appDir, [], { stdout: true })
+      buildOutput = stdout
+
       stderr = ''
       appPort = await findPort()
       app = await nextStart(appDir, appPort, {
@@ -493,6 +501,12 @@ describe('SPR Prerender', () => {
     })
     afterAll(() => killApp(app))
 
+    it('should of formatted build output correctly', () => {
+      expect(buildOutput).toMatch(/○ \/normal/)
+      expect(buildOutput).toMatch(/● \/blog\/\[post\]/)
+      expect(buildOutput).toMatch(/\+2 more paths/)
+    })
+
     runTests()
   })