Provide normalized asPath to getServerSideProps

docs/basic-features/data-fetching.md

@@ -543,6 +543,7 @@ The `context` parameter is an object containing the following keys:
 - `query`: The query string.
 - `preview`: `preview` is `true` if the page is in the preview mode and `false` otherwise. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
 - `previewData`: The preview data set by `setPreviewData`. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
+- `asPath`: A normalized version of the request URL that strips the `_next/data` prefix for client transitions which matches the `asPath` value provided to the router.
 
 > **Note**: You can import modules in top-level scope for use in `getServerSideProps`.
 > Imports used in `getServerSideProps` will not be bundled for the client-side.

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

@@ -689,6 +689,7 @@ export async function renderToHTML(
           req,
           res,
           query,
+          asPath,
           ...(pageIsDynamic ? { params: params as ParsedUrlQuery } : undefined),
           ...(previewData !== false
             ? { preview: true, previewData: previewData }

packages/next/types/index.d.ts

@@ -120,6 +120,7 @@ export type GetServerSidePropsContext<
   query: ParsedUrlQuery
   preview?: boolean
   previewData?: any
+  asPath: string
 }
 
 export type GetServerSidePropsResult<P> = {

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

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-export async function getServerSideProps({ params }) {
+export async function getServerSideProps({ params, asPath }) {
   if (params.post === 'post-10') {
     await new Promise((resolve) => {
       setTimeout(() => resolve(), 1000)
@@ -16,13 +16,14 @@ export async function getServerSideProps({ params }) {
   return {
     props: {
       params,
+      gsspAsPath: asPath,
       post: params.post,
       time: (await import('perf_hooks')).performance.now(),
     },
   }
 }
 
-export default ({ post, time, params, appProps }) => {
+export default ({ post, time, params, appProps, gsspAsPath }) => {
   return (
     <>
       <p>Post: {post}</p>
@@ -31,6 +32,7 @@ export default ({ post, time, params, appProps }) => {
       <div id="query">{JSON.stringify(useRouter().query)}</div>
       <div id="app-query">{JSON.stringify(appProps.query)}</div>
       <div id="app-url">{appProps.url}</div>
+      <div id="gssp-asPath">{gsspAsPath}</div>
       <Link href="/">
         <a id="home">to home</a>
       </Link>

test/integration/getserversideprops/pages/something.js

@@ -2,9 +2,10 @@ import React from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-export async function getServerSideProps({ params, query }) {
+export async function getServerSideProps({ params, query, asPath }) {
   return {
     props: {
+      gsspAsPath: asPath,
       world: 'world',
       query: query || {},
       params: params || {},
@@ -14,7 +15,15 @@ export async function getServerSideProps({ params, query }) {
   }
 }
 
-export default ({ world, time, params, random, query, appProps }) => {
+export default ({
+  world,
+  time,
+  params,
+  random,
+  query,
+  appProps,
+  gsspAsPath,
+}) => {
   return (
     <>
       <p>hello: {world}</p>
@@ -25,6 +34,7 @@ export default ({ world, time, params, random, query, appProps }) => {
       <div id="query">{JSON.stringify(useRouter().query)}</div>
       <div id="app-query">{JSON.stringify(appProps.query)}</div>
       <div id="app-url">{appProps.url}</div>
+      <div id="gssp-asPath">{gsspAsPath}</div>
       <Link href="/">
         <a id="home">to home</a>
       </Link>

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

@@ -295,7 +295,9 @@ const runTests = (dev = false) => {
   it('should have original req.url for /_next/data request dynamic page', async () => {
     const curUrl = `/_next/data/${buildId}/blog/post-1.json`
     const data = await renderViaHTTP(appPort, curUrl)
-    const { appProps } = JSON.parse(data)
+    const { appProps, pageProps } = JSON.parse(data)
+
+    expect(pageProps.gsspAsPath).toEqual('/blog/post-1')
 
     expect(appProps).toEqual({
       url: curUrl,
@@ -308,7 +310,9 @@ const runTests = (dev = false) => {
   it('should have original req.url for /_next/data request', async () => {
     const curUrl = `/_next/data/${buildId}/something.json`
     const data = await renderViaHTTP(appPort, curUrl)
-    const { appProps } = JSON.parse(data)
+    const { appProps, pageProps } = JSON.parse(data)
+
+    expect(pageProps.gsspAsPath).toEqual('/something')
 
     expect(appProps).toEqual({
       url: curUrl,
@@ -323,13 +327,15 @@ const runTests = (dev = false) => {
     const $ = cheerio.load(html)
     expect($('#app-url').text()).toContain('/blog/post-1')
     expect(JSON.parse($('#app-query').text())).toEqual({ post: 'post-1' })
+    expect($('#gssp-asPath').text()).toBe('/blog/post-1')
   })
 
   it('should have correct req.url and query for direct visit', async () => {
     const html = await renderViaHTTP(appPort, '/something')
     const $ = cheerio.load(html)
     expect($('#app-url').text()).toContain('/something')
     expect(JSON.parse($('#app-query').text())).toEqual({})
+    expect($('#gssp-asPath').text()).toBe('/something')
   })
 
   it('should return data correctly', async () => {