Add initial support for unstable_getServerProps

packages/next/build/babel/plugins/next-ssg-transform.ts

@@ -6,10 +6,12 @@ const prerenderId = '__N_SSG'
 
 export const EXPORT_NAME_GET_STATIC_PROPS = 'unstable_getStaticProps'
 export const EXPORT_NAME_GET_STATIC_PATHS = 'unstable_getStaticPaths'
+export const EXPORT_NAME_GET_SERVER_PROPS = 'unstable_getServerProps'
 
 const ssgExports = new Set([
   EXPORT_NAME_GET_STATIC_PROPS,
   EXPORT_NAME_GET_STATIC_PATHS,
+  EXPORT_NAME_GET_SERVER_PROPS,
 ])
 
 type PluginState = {

packages/next/build/index.ts

@@ -255,22 +255,23 @@ export default async function build(dir: string, conf = null): Promise<void> {
     }
   }
 
+  const routesManifestPath = path.join(distDir, ROUTES_MANIFEST)
+  const routesManifest: any = {
+    version: 1,
+    basePath: config.experimental.basePath,
+    redirects: redirects.map(r => buildCustomRoute(r, 'redirect')),
+    rewrites: rewrites.map(r => buildCustomRoute(r, 'rewrite')),
+    headers: headers.map(r => buildCustomRoute(r, 'header')),
+    dynamicRoutes: getSortedRoutes(dynamicRoutes).map(page => ({
+      page,
+      regex: getRouteRegex(page).re.source,
+    })),
+  }
+
   await mkdirp(distDir)
-  await fsWriteFile(
-    path.join(distDir, ROUTES_MANIFEST),
-    JSON.stringify({
-      version: 1,
-      basePath: config.experimental.basePath,
-      redirects: redirects.map(r => buildCustomRoute(r, 'redirect')),
-      rewrites: rewrites.map(r => buildCustomRoute(r, 'rewrite')),
-      headers: headers.map(r => buildCustomRoute(r, 'header')),
-      dynamicRoutes: getSortedRoutes(dynamicRoutes).map(page => ({
-        page,
-        regex: getRouteRegex(page).re.source,
-      })),
-    }),
-    'utf8'
-  )
+  // We need to write the manifest with rewrites before build
+  // so serverless can import the manifest
+  await fsWriteFile(routesManifestPath, JSON.stringify(routesManifest), 'utf8')
 
   const configs = await Promise.all([
     getBaseWebpackConfig(dir, {
@@ -402,6 +403,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
   const staticPages = new Set<string>()
   const invalidPages = new Set<string>()
   const hybridAmpPages = new Set<string>()
+  const serverPropsPages = new Set<string>()
   const additionalSsgPaths = new Map<string, Array<string>>()
   const pageInfos = new Map<string, PageInfo>()
   const pagesManifest = JSON.parse(await fsReadFile(manifestPath, 'utf8'))
@@ -498,6 +500,8 @@ export default async function build(dir: string, conf = null): Promise<void> {
               additionalSsgPaths.set(page, result.prerenderRoutes)
               ssgPageRoutes = result.prerenderRoutes
             }
+          } else if (result.hasServerProps) {
+            serverPropsPages.add(page)
           } else if (result.static && customAppGetInitialProps === false) {
             staticPages.add(page)
             isStatic = true
@@ -521,6 +525,29 @@ export default async function build(dir: string, conf = null): Promise<void> {
   )
   staticCheckWorkers.end()
 
+  if (serverPropsPages.size > 0) {
+    // We update the routes manifest after the build with the
+    // serverProps routes since we can't determine this until after build
+    routesManifest.serverPropsRoutes = {}
+
+    for (const page of serverPropsPages) {
+      routesManifest.serverPropsRoutes[page] = {
+        page,
+        dataRoute: path.posix.join(
+          '/_next/data',
+          buildId,
+          `${page === '/' ? '/index' : page}.json`
+        ),
+      }
+    }
+
+    await fsWriteFile(
+      routesManifestPath,
+      JSON.stringify(routesManifest),
+      'utf8'
+    )
+  }
+
   if (invalidPages.size > 0) {
     throw new Error(
       `Build optimization failed: found page${

packages/next/build/utils.ts

@@ -9,7 +9,11 @@ import {
   Rewrite,
   getRedirectStatus,
 } from '../lib/check-custom-routes'
-import { SSG_GET_INITIAL_PROPS_CONFLICT } from '../lib/constants'
+import {
+  SSG_GET_INITIAL_PROPS_CONFLICT,
+  SERVER_PROPS_GET_INIT_PROPS_CONFLICT,
+  SERVER_PROPS_SSG_CONFLICT,
+} from '../lib/constants'
 import prettyBytes from '../lib/pretty-bytes'
 import { recursiveReadDir } from '../lib/recursive-readdir'
 import { getRouteMatcher, getRouteRegex } from '../next-server/lib/router/utils'
@@ -482,6 +486,7 @@ export async function isPageStatic(
   static?: boolean
   prerender?: boolean
   isHybridAmp?: boolean
+  hasServerProps?: boolean
   prerenderRoutes?: string[] | undefined
 }> {
   try {
@@ -496,6 +501,7 @@ export async function isPageStatic(
     const hasGetInitialProps = !!(Comp as any).getInitialProps
     const hasStaticProps = !!mod.unstable_getStaticProps
     const hasStaticPaths = !!mod.unstable_getStaticPaths
+    const hasServerProps = !!mod.unstable_getServerProps
     const hasLegacyStaticParams = !!mod.unstable_getStaticParams
 
     if (hasLegacyStaticParams) {
@@ -510,6 +516,14 @@ export async function isPageStatic(
       throw new Error(SSG_GET_INITIAL_PROPS_CONFLICT)
     }
 
+    if (hasGetInitialProps && hasServerProps) {
+      throw new Error(SERVER_PROPS_GET_INIT_PROPS_CONFLICT)
+    }
+
+    if (hasStaticProps && hasServerProps) {
+      throw new Error(SERVER_PROPS_SSG_CONFLICT)
+    }
+
     // A page cannot have static parameters if it is not a dynamic page.
     if (hasStaticProps && hasStaticPaths && !isDynamicRoute(page)) {
       throw new Error(
@@ -579,10 +593,11 @@ export async function isPageStatic(
 
     const config = mod.config || {}
     return {
-      static: !hasStaticProps && !hasGetInitialProps,
+      static: !hasStaticProps && !hasGetInitialProps && !hasServerProps,
       isHybridAmp: config.amp === 'hybrid',
       prerenderRoutes: prerenderPaths,
       prerender: hasStaticProps,
+      hasServerProps,
     }
   } catch (err) {
     if (err.code === 'MODULE_NOT_FOUND') return {}

packages/next/build/webpack/loaders/next-serverless-loader.ts

@@ -185,6 +185,7 @@ const nextServerlessLoader: loader.Loader = function() {
     export const unstable_getStaticProps = ComponentInfo['unstable_getStaticProp' + 's']
     export const unstable_getStaticParams = ComponentInfo['unstable_getStaticParam' + 's']
     export const unstable_getStaticPaths = ComponentInfo['unstable_getStaticPath' + 's']
+    export const unstable_getServerProps = ComponentInfo['unstable_getServerProp' + 's']
 
     ${dynamicRouteMatcher}
     ${handleRewrites}
@@ -206,6 +207,7 @@ const nextServerlessLoader: loader.Loader = function() {
         Document,
         buildManifest,
         unstable_getStaticProps,
+        unstable_getServerProps,
         unstable_getStaticPaths,
         reactLoadableManifest,
         canonicalBase: "${canonicalBase}",
@@ -235,7 +237,7 @@ const nextServerlessLoader: loader.Loader = function() {
         ${page === '/_error' ? `res.statusCode = 404` : ''}
         ${
           pageIsDynamicRoute
-            ? `const params = fromExport && !unstable_getStaticProps ? {} : dynamicRouteMatcher(parsedUrl.pathname) || {};`
+            ? `const params = fromExport && !unstable_getStaticProps && !unstable_getServerProps ? {} : dynamicRouteMatcher(parsedUrl.pathname) || {};`
             : `const params = {};`
         }
         ${
@@ -271,16 +273,21 @@ const nextServerlessLoader: loader.Loader = function() {
           `
             : `const nowParams = null;`
         }
+        renderOpts.params = _params || params
+
         let result = await renderToHTML(req, res, "${page}", Object.assign({}, unstable_getStaticProps ? {} : parsedUrl.query, nowParams ? nowParams : params, _params), renderOpts)
 
         if (_nextData && !fromExport) {
           const payload = JSON.stringify(renderOpts.pageData)
           res.setHeader('Content-Type', 'application/json')
           res.setHeader('Content-Length', Buffer.byteLength(payload))
-          res.setHeader(
-            'Cache-Control',
-            \`s-maxage=\${renderOpts.revalidate}, stale-while-revalidate\`
-          )
+
+          if (renderOpts.revalidate) {
+            res.setHeader(
+              'Cache-Control',
+              \`s-maxage=\${renderOpts.revalidate}, stale-while-revalidate\`
+            )
+          }
           res.end(payload)
           return null
         }
@@ -293,6 +300,7 @@ const nextServerlessLoader: loader.Loader = function() {
           const result = await renderToHTML(req, res, "/_error", parsedUrl.query, Object.assign({}, options, {
             unstable_getStaticProps: undefined,
             unstable_getStaticPaths: undefined,
+            unstable_getServerProps: undefined,
             Component: Error
           }))
           return result
@@ -302,6 +310,7 @@ const nextServerlessLoader: loader.Loader = function() {
           const result = await renderToHTML(req, res, "/_error", parsedUrl.query, Object.assign({}, options, {
             unstable_getStaticProps: undefined,
             unstable_getStaticPaths: undefined,
+            unstable_getServerProps: undefined,
             Component: Error,
             err
           }))

packages/next/export/worker.js

@@ -177,7 +177,7 @@ export default async function({
       if (typeof components.Component === 'string') {
         html = components.Component
       } else {
-        curRenderOpts = { ...components, ...renderOpts, ampPath }
+        curRenderOpts = { ...components, ...renderOpts, ampPath, params }
         html = await renderMethod(req, res, page, query, curRenderOpts)
       }
     }

packages/next/lib/constants.ts

@@ -25,3 +25,7 @@ export const DOT_NEXT_ALIAS = 'private-dot-next'
 export const PUBLIC_DIR_MIDDLEWARE_CONFLICT = `You can not have a '_next' folder inside of your public folder. This conflicts with the internal '/_next' route. https://err.sh/zeit/next.js/public-next-folder-conflict`
 
 export const SSG_GET_INITIAL_PROPS_CONFLICT = `You can not use getInitialProps with unstable_getStaticProps. To use SSG, please remove your getInitialProps`
+
+export const SERVER_PROPS_GET_INIT_PROPS_CONFLICT = `You can not use getInitialProps with unstable_getServerProps. Please remove one or the other`
+
+export const SERVER_PROPS_SSG_CONFLICT = `You can not use unstable_getStaticProps with unstable_getServerProps. To use SSG, please remove your unstable_getServerProps`

packages/next/next-server/server/load-components.ts

@@ -1,3 +1,5 @@
+import { IncomingMessage, ServerResponse } from 'http'
+import { ParsedUrlQuery } from 'querystring'
 import {
   BUILD_MANIFEST,
   CLIENT_STATIC_FILES_PATH,
@@ -22,6 +24,12 @@ export type LoadComponentsReturnType = {
     revalidate?: number | boolean
   }
   unstable_getStaticPaths?: () => void
+  unstable_getServerProps?: (context: {
+    params: { [key: string]: string }
+    req: IncomingMessage
+    res: ServerResponse
+    query: ParsedUrlQuery
+  }) => Promise<{ [key: string]: any }>
   buildManifest?: any
   reactLoadableManifest?: any
   Document?: any
@@ -90,6 +98,7 @@ export async function loadComponents(
     DocumentMiddleware,
     reactLoadableManifest,
     pageConfig: ComponentMod.config || {},
+    unstable_getServerProps: ComponentMod.unstable_getServerProps,
     unstable_getStaticProps: ComponentMod.unstable_getStaticProps,
     unstable_getStaticPaths: ComponentMod.unstable_getStaticPaths,
   }

packages/next/next-server/server/next-server.ts

@@ -830,10 +830,36 @@ export default class Server {
       typeof result.Component.renderReqToHTML === 'function'
     const isSSG = !!result.unstable_getStaticProps
 
+    // Toggle whether or not this is a Data request
+    const isDataReq = query._nextDataReq
+    delete query._nextDataReq
+
+    // Serverless requests need its URL transformed back into the original
+    // request path (to emulate lambda behavior in production)
+    if (isLikeServerless && isDataReq) {
+      let { pathname } = parseUrl(req.url || '', true)
+      pathname = !pathname || pathname === '/' ? '/index' : pathname
+      req.url = `/_next/data/${this.buildId}${pathname}.json`
+    }
+
     // non-spr requests should render like normal
     if (!isSSG) {
       // handle serverless
       if (isLikeServerless) {
+        if (isDataReq) {
+          const renderResult = await result.Component.renderReqToHTML(
+            req,
+            res,
+            true
+          )
+
+          this.__sendPayload(
+            res,
+            JSON.stringify(renderResult?.renderOpts?.pageData),
+            'application/json'
+          )
+          return null
+        }
         const curUrl = parseUrl(req.url!, true)
         req.url = formatUrl({
           ...curUrl,
@@ -846,16 +872,22 @@ export default class Server {
         return result.Component.renderReqToHTML(req, res)
       }
 
+      if (isDataReq && typeof result.unstable_getServerProps === 'function') {
+        const props = await renderToHTML(req, res, pathname, query, {
+          ...result,
+          ...opts,
+          isDataReq,
+        })
+        this.__sendPayload(res, JSON.stringify(props), 'application/json')
+        return null
+      }
+
       return renderToHTML(req, res, pathname, query, {
         ...result,
         ...opts,
       })
     }
 
-    // Toggle whether or not this is an SPR Data request
-    const isDataReq = query._nextDataReq
-    delete query._nextDataReq
-
     // Compute the SPR cache key
     const ssgCacheKey = parseUrl(req.url || '').pathname!
 
@@ -881,14 +913,6 @@ export default class Server {
 
     // If we're here, that means data is missing or it's stale.
 
-    // Serverless requests need its URL transformed back into the original
-    // request path (to emulate lambda behavior in production)
-    if (isLikeServerless && isDataReq) {
-      let { pathname } = parseUrl(req.url || '', true)
-      pathname = !pathname || pathname === '/' ? '/index' : pathname
-      req.url = `/_next/data/${this.buildId}${pathname}.json`
-    }
-
     const doRender = withCoalescedInvoke(async function(): Promise<{
       html: string | null
       pageData: any
@@ -1001,6 +1025,7 @@ export default class Server {
                   result,
                   {
                     ...this.renderOpts,
+                    params,
                     amphtml,
                     hasAmp,
                   }