Rename getServerProps to getServerSideProps (#10722)

docs/concepts/_data-fetching.md

@@ -46,7 +46,7 @@ export default HomePage
 
 [Read more about how Server-Side Rendering works]().
 
-To opt-in to Server-Side Rendering, making every request render HTML on-demand you use the `getServerProps` method.
+To opt-in to Server-Side Rendering, making every request render HTML on-demand you use the `getServerSideProps` method.
 
 It allows you to fetch data before rendering starts when a request comes in.
 
@@ -56,7 +56,7 @@ Taking the same example as Static Generation, but opted into rendering the page
 import fetch from 'isomorphic-unfetch'
 
 // Called when a request comes in.
-export async function getServerProps() {
+export async function getServerSideProps() {
   const res = await fetch('https://api.github.com/repos/zeit/next.js')
   const json = await res.json()
 

errors/404-get-initial-props.md

@@ -2,7 +2,7 @@
 
 #### Why This Error Occurred
 
-In your `404.js` page you added `getInitialProps` or `getServerProps` which is not allowed as this prevents the page from being static and `404.js` is meant to provide more flexibility for a static 404 page. Having a static 404 page is the most ideal as this page can be served very often and if not static puts extra strain on your server and more invocations for serverless functions which increase the cost of hosting your site unnecessarily.
+In your `404.js` page you added `getInitialProps` or `getServerSideProps` which is not allowed as this prevents the page from being static and `404.js` is meant to provide more flexibility for a static 404 page. Having a static 404 page is the most ideal as this page can be served very often and if not static puts extra strain on your server and more invocations for serverless functions which increase the cost of hosting your site unnecessarily.
 
 #### Possible Ways to Fix It
 

examples/with-apollo/lib/apollo.js

@@ -11,7 +11,7 @@ let globalApolloClient = null
 /**
  * Installs the Apollo Client on NextPageContext
  * or NextAppContext. Useful if you want to use apolloClient
- * inside getStaticProps, getStaticPaths or getServerProps
+ * inside getStaticProps, getStaticPaths or getServerSideProps
  * @param {NextPageContext | NextAppContext} ctx
  */
 export const initOnContext = ctx => {

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

@@ -10,7 +10,7 @@ const pageComponentVar = '__NEXT_COMP'
 
 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'
+export const EXPORT_NAME_GET_SERVER_PROPS = 'unstable_getServerSideProps'
 
 const ssgExports = new Set([
   EXPORT_NAME_GET_STATIC_PROPS,

packages/next/build/utils.ts

@@ -202,7 +202,7 @@ export async function printTreeView(
           serverless ? '(Lambda)' : '(Server)',
           `server-side renders at runtime (uses ${chalk.cyan(
             'getInitialProps'
-          )} or ${chalk.cyan('getServerProps')})`,
+          )} or ${chalk.cyan('getServerSideProps')})`,
         ],
         [
           '○',
@@ -636,7 +636,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 hasServerProps = !!mod.unstable_getServerSideProps
     const hasLegacyStaticParams = !!mod.unstable_getStaticParams
 
     if (hasLegacyStaticParams) {

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

@@ -220,7 +220,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']
+    export const unstable_getServerSideProps = ComponentInfo['unstable_getServerSideProp' + 's']
 
     ${dynamicRouteMatcher}
     ${handleRewrites}
@@ -242,7 +242,7 @@ const nextServerlessLoader: loader.Loader = function() {
         Document,
         buildManifest,
         unstable_getStaticProps,
-        unstable_getServerProps,
+        unstable_getServerSideProps,
         unstable_getStaticPaths,
         reactLoadableManifest,
         canonicalBase: "${canonicalBase}",
@@ -275,7 +275,7 @@ const nextServerlessLoader: loader.Loader = function() {
         ${page === '/_error' ? `res.statusCode = 404` : ''}
         ${
           pageIsDynamicRoute
-            ? `const params = fromExport && !unstable_getStaticProps && !unstable_getServerProps ? {} : dynamicRouteMatcher(parsedUrl.pathname) || {};`
+            ? `const params = fromExport && !unstable_getStaticProps && !unstable_getServerSideProps ? {} : dynamicRouteMatcher(parsedUrl.pathname) || {};`
             : `const params = {};`
         }
         ${
@@ -331,7 +331,7 @@ const nextServerlessLoader: loader.Loader = function() {
             'Cache-Control',
             isPreviewMode
               ? \`private, no-cache, no-store, max-age=0, must-revalidate\`
-              : unstable_getServerProps
+              : unstable_getServerSideProps
               ? \`no-cache, no-store, must-revalidate\`
               : \`s-maxage=\${renderOpts.revalidate}, stale-while-revalidate\`
           )
@@ -352,7 +352,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,
+            unstable_getServerSideProps: undefined,
             Component: Error
           }))
           return result
@@ -362,7 +362,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,
+            unstable_getServerSideProps: undefined,
             Component: Error,
             err
           }))

packages/next/lib/constants.ts

@@ -26,8 +26,8 @@ export const PUBLIC_DIR_MIDDLEWARE_CONFLICT = `You can not have a '_next' folder
 
 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_GET_INIT_PROPS_CONFLICT = `You can not use getInitialProps with unstable_getServerSideProps. 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`
+export const SERVER_PROPS_SSG_CONFLICT = `You can not use unstable_getStaticProps with unstable_getServerSideProps. To use SSG, please remove your unstable_getServerSideProps`
 
-export const PAGES_404_GET_INITIAL_PROPS_ERROR = `\`pages/404\` can not have getInitialProps/getServerProps, https://err.sh/zeit/next.js/404-get-initial-props`
+export const PAGES_404_GET_INITIAL_PROPS_ERROR = `\`pages/404\` can not have getInitialProps/getServerSideProps, https://err.sh/zeit/next.js/404-get-initial-props`

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

@@ -21,13 +21,13 @@ export function interopDefault(mod: any) {
 function addComponentPropsId(
   Component: any,
   getStaticProps: any,
-  getServerProps: any
+  getServerSideProps: any
 ) {
   // Mark the component with the SSG or SSP id here since we don't run
   // the SSG babel transform for server mode
   if (getStaticProps) {
     Component[STATIC_PROPS_ID] = true
-  } else if (getServerProps) {
+  } else if (getServerSideProps) {
     Component[SERVER_PROPS_ID] = true
   }
 }
@@ -55,7 +55,7 @@ export type Unstable_getStaticPaths = () => Promise<{
   fallback: boolean
 }>
 
-type Unstable_getServerProps = (context: {
+type Unstable_getServerSideProps = (context: {
   params: ParsedUrlQuery | undefined
   req: IncomingMessage
   res: ServerResponse
@@ -72,7 +72,7 @@ export type LoadComponentsReturnType = {
   App: AppType
   unstable_getStaticProps?: Unstable_getStaticProps
   unstable_getStaticPaths?: Unstable_getStaticPaths
-  unstable_getServerProps?: Unstable_getServerProps
+  unstable_getServerSideProps?: Unstable_getServerSideProps
 }
 
 export async function loadComponents(
@@ -86,13 +86,13 @@ export async function loadComponents(
     const {
       unstable_getStaticProps,
       unstable_getStaticPaths,
-      unstable_getServerProps,
+      unstable_getServerSideProps,
     } = Component
 
     addComponentPropsId(
       Component,
       unstable_getStaticProps,
-      unstable_getServerProps
+      unstable_getServerSideProps
     )
 
     return {
@@ -100,7 +100,7 @@ export async function loadComponents(
       pageConfig: Component.config || {},
       unstable_getStaticProps,
       unstable_getStaticPaths,
-      unstable_getServerProps,
+      unstable_getServerSideProps,
     } as LoadComponentsReturnType
   }
   const documentPath = join(
@@ -142,7 +142,7 @@ export async function loadComponents(
   ])
 
   const {
-    unstable_getServerProps,
+    unstable_getServerSideProps,
     unstable_getStaticProps,
     unstable_getStaticPaths,
   } = ComponentMod
@@ -150,7 +150,7 @@ export async function loadComponents(
   addComponentPropsId(
     Component,
     unstable_getStaticProps,
-    unstable_getServerProps
+    unstable_getServerSideProps
   )
 
   return {
@@ -161,7 +161,7 @@ export async function loadComponents(
     DocumentMiddleware,
     reactLoadableManifest,
     pageConfig: ComponentMod.config || {},
-    unstable_getServerProps,
+    unstable_getServerSideProps,
     unstable_getStaticProps,
     unstable_getStaticPaths,
   }

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

@@ -889,7 +889,7 @@ export default class Server {
       typeof components.Component === 'object' &&
       typeof (components.Component as any).renderReqToHTML === 'function'
     const isSSG = !!components.unstable_getStaticProps
-    const isServerProps = !!components.unstable_getServerProps
+    const isServerProps = !!components.unstable_getServerSideProps
     const hasStaticPaths = !!components.unstable_getStaticPaths
 
     // Toggle whether or not this is a Data request

packages/next/next-server/server/render.tsx

@@ -275,7 +275,7 @@ export async function renderToHTML(
     ErrorDebug,
     unstable_getStaticProps,
     unstable_getStaticPaths,
-    unstable_getServerProps,
+    unstable_getServerSideProps,
     isDataReq,
     params,
     previewProps,
@@ -323,7 +323,7 @@ export async function renderToHTML(
     !hasPageGetInitialProps &&
     defaultAppGetInitialProps &&
     !isSpr &&
-    !unstable_getServerProps
+    !unstable_getServerSideProps
 
   if (
     process.env.NODE_ENV !== 'production' &&
@@ -349,11 +349,11 @@ export async function renderToHTML(
     throw new Error(SSG_GET_INITIAL_PROPS_CONFLICT + ` ${pathname}`)
   }
 
-  if (hasPageGetInitialProps && unstable_getServerProps) {
+  if (hasPageGetInitialProps && unstable_getServerSideProps) {
     throw new Error(SERVER_PROPS_GET_INIT_PROPS_CONFLICT + ` ${pathname}`)
   }
 
-  if (unstable_getServerProps && isSpr) {
+  if (unstable_getServerSideProps && isSpr) {
     throw new Error(SERVER_PROPS_SSG_CONFLICT + ` ${pathname}`)
   }
 
@@ -529,8 +529,8 @@ export async function renderToHTML(
     console.error(err)
   }
 
-  if (unstable_getServerProps && !isFallback) {
-    const data = await unstable_getServerProps({
+  if (unstable_getServerSideProps && !isFallback) {
+    const data = await unstable_getServerSideProps({
       params,
       query,
       req,
@@ -540,7 +540,7 @@ export async function renderToHTML(
     const invalidKeys = Object.keys(data).filter(key => key !== 'props')
 
     if (invalidKeys.length) {
-      throw new Error(invalidKeysMsg('getServerProps', invalidKeys))
+      throw new Error(invalidKeysMsg('getServerSideProps', invalidKeys))
     }
 
     props.pageProps = data.props
@@ -549,7 +549,7 @@ export async function renderToHTML(
 
   if (
     !isSpr && // we only show this warning for legacy pages
-    !unstable_getServerProps &&
+    !unstable_getServerSideProps &&
     process.env.NODE_ENV !== 'production' &&
     Object.keys(props?.pageProps || {}).includes('url')
   ) {
@@ -560,10 +560,10 @@ export async function renderToHTML(
   }
 
   // We only need to do this if we want to support calling
-  // _app's getInitialProps for getServerProps if not this can be removed
+  // _app's getInitialProps for getServerSideProps if not this can be removed
   if (isDataReq) return props
 
-  // We don't call getStaticProps or getServerProps while generating
+  // We don't call getStaticProps or getServerSideProps while generating
   // the fallback so make sure to set pageProps to an empty object
   if (isFallback) {
     props.pageProps = {}

packages/next/pages/_app.tsx

@@ -48,7 +48,7 @@ export default class App<P = {}, CP = {}, S = {}> extends React.Component<
         {...pageProps}
         {
           // we don't add the legacy URL prop if it's using non-legacy
-          // methods like getStaticProps and getServerProps
+          // methods like getStaticProps and getServerSideProps
           ...(!((Component as any).__N_SSG || (Component as any).__N_SSP)
             ? { url: createUrl(router) }
             : {})

test/integration/404-page/test/index.test.js

@@ -149,7 +149,7 @@ describe('404 Page Support', () => {
     await fs.move(`${pages404}.bak`, pages404)
 
     expect(stderr).toContain(
-      `\`pages/404\` can not have getInitialProps/getServerProps, https://err.sh/zeit/next.js/404-get-initial-props`
+      `\`pages/404\` can not have getInitialProps/getServerSideProps, https://err.sh/zeit/next.js/404-get-initial-props`
     )
     expect(code).toBe(1)
   })
@@ -180,7 +180,7 @@ describe('404 Page Support', () => {
     await fs.remove(pages404)
     await fs.move(`${pages404}.bak`, pages404)
 
-    const error = `\`pages/404\` can not have getInitialProps/getServerProps, https://err.sh/zeit/next.js/404-get-initial-props`
+    const error = `\`pages/404\` can not have getInitialProps/getServerSideProps, https://err.sh/zeit/next.js/404-get-initial-props`
 
     expect(stderr).toContain(error)
   })

test/integration/getserversideprops/pages/another/index.js

@@ -3,7 +3,7 @@ import fs from 'fs'
 import findUp from 'find-up'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps() {
+export async function unstable_getServerSideProps() {
   const text = fs
     .readFileSync(
       findUp.sync('world.txt', {

test/integration/getserversideprops/pages/blog/[post]/[comment].js

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps({ query }) {
+export async function unstable_getServerSideProps({ query }) {
   return {
     props: {
       post: query.post,

test/integration/getserversideprops/pages/blog/[post]/index.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps({ params }) {
+export async function unstable_getServerSideProps({ params }) {
   if (params.post === 'post-10') {
     await new Promise(resolve => {
       setTimeout(() => resolve(), 1000)

test/integration/getserversideprops/pages/blog/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps() {
+export async function unstable_getServerSideProps() {
   return {
     props: {
       slugs: ['post-1', 'post-2'],

test/integration/getserversideprops/pages/catchall/[...path].js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps({ params }) {
+export async function unstable_getServerSideProps({ params }) {
   return {
     props: {
       world: 'world',

test/integration/getserversideprops/pages/default-revalidate.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps() {
+export async function unstable_getServerSideProps() {
   return {
     props: {
       world: 'world',

test/integration/getserversideprops/pages/index.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps() {
+export async function unstable_getServerSideProps() {
   return {
     props: {
       world: 'world',

test/integration/getserversideprops/pages/invalid-keys.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps({ params, query }) {
+export async function unstable_getServerSideProps({ params, query }) {
   return {
     world: 'world',
     query: query || {},

test/integration/getserversideprops/pages/something.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps({ params, query }) {
+export async function unstable_getServerSideProps({ params, query }) {
   return {
     props: {
       world: 'world',

test/integration/getserversideprops/pages/user/[user]/profile.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 
 // eslint-disable-next-line camelcase
-export async function unstable_getServerProps({ query }) {
+export async function unstable_getServerSideProps({ query }) {
   return {
     props: {
       user: query.user,

test/integration/getserversideprops/test/index.test.js

@@ -186,7 +186,7 @@ const runTests = (dev = false) => {
     expect(html).toMatch(/hello.*?world/)
   })
 
-  it('should SSR getServerProps page correctly', async () => {
+  it('should SSR getServerSideProps page correctly', async () => {
     const html = await renderViaHTTP(appPort, '/blog/post-1')
     expect(html).toMatch(/Post:.*?post-1/)
   })
@@ -298,7 +298,7 @@ const runTests = (dev = false) => {
     expect(await browser.eval('window.beforeClick')).not.toBe('true')
   })
 
-  it('should always call getServerProps without caching', async () => {
+  it('should always call getServerSideProps without caching', async () => {
     const initialRes = await fetchViaHTTP(appPort, '/something')
     const initialHtml = await initialRes.text()
     expect(initialHtml).toMatch(/hello.*?world/)
@@ -314,7 +314,7 @@ const runTests = (dev = false) => {
     expect(newHtml !== newerHtml).toBe(true)
   })
 
-  it('should not re-call getServerProps when updating query', async () => {
+  it('should not re-call getServerSideProps when updating query', async () => {
     const browser = await webdriver(appPort, '/something?hello=world')
     await waitFor(2000)
 
@@ -337,7 +337,7 @@ const runTests = (dev = false) => {
       await fs.writeFile(
         urlPropPage,
         `
-        export async function unstable_getServerProps() {
+        export async function unstable_getServerSideProps() {
           return {
             props: {
               url: 'something'
@@ -357,10 +357,10 @@ const runTests = (dev = false) => {
       expect(html).toMatch(/url:.*?something/)
     })
 
-    it('should show error for extra keys returned from getServerProps', async () => {
+    it('should show error for extra keys returned from getServerSideProps', async () => {
       const html = await renderViaHTTP(appPort, '/invalid-keys')
       expect(html).toContain(
-        `Additional keys were returned from \`getServerProps\`. Properties intended for your component must be nested under the \`props\` key, e.g.:`
+        `Additional keys were returned from \`getServerSideProps\`. Properties intended for your component must be nested under the \`props\` key, e.g.:`
       )
       expect(html).toContain(
         `Keys that need to be moved: world, query, params, time, random`
@@ -396,7 +396,7 @@ const runTests = (dev = false) => {
   }
 }
 
-describe('unstable_getServerProps', () => {
+describe('unstable_getServerSideProps', () => {
   describe('dev mode', () => {
     beforeAll(async () => {
       stderr = ''

test/integration/mixed-ssg-serverprops-error/pages/index.js

@@ -4,7 +4,7 @@ export const unstable_getStaticProps = async () => {
   }
 }
 
-export const unstable_getServerProps = async () => {
+export const unstable_getServerSideProps = async () => {
   return {
     props: { world: 'world' },
   }

test/integration/mixed-ssg-serverprops-error/pages/index.js.alt

@@ -4,7 +4,7 @@ export const unstable_getStaticPaths = async () => {
   }
 }
 
-export const unstable_getServerProps = async () => {
+export const unstable_getServerSideProps = async () => {
   return {
     props: { world: 'world' }
   }

test/integration/mixed-ssg-serverprops-error/test/index.test.js

@@ -11,13 +11,13 @@ const indexPage = join(appDir, 'pages/index.js')
 const indexPageAlt = `${indexPage}.alt`
 const indexPageBak = `${indexPage}.bak`
 
-describe('Mixed getStaticProps and getServerProps error', () => {
-  it('should error when exporting both getStaticProps and getServerProps', async () => {
+describe('Mixed getStaticProps and getServerSideProps error', () => {
+  it('should error when exporting both getStaticProps and getServerSideProps', async () => {
     const { stderr } = await nextBuild(appDir, [], { stderr: true })
     expect(stderr).toContain(SERVER_PROPS_SSG_CONFLICT)
   })
 
-  it('should error when exporting both getStaticPaths and getServerProps', async () => {
+  it('should error when exporting both getStaticPaths and getServerSideProps', async () => {
     await fs.move(indexPage, indexPageBak)
     await fs.move(indexPageAlt, indexPage)