基于路由参数的服务器端渲染动态页面

Question

我从 Next.js 开始，在浏览文档后，我无法弄清楚如何在 getStaticPaths 方法中获取路由参数 code，如下所示！？。 code 以任何方式事先都不知道，它可以是任何东西。

我不想调用 api 并在组件内部使用 useEffect 获取数据。

文件：pages/post/[code].js

import React from 'react';
import apiCall from 'api/something';

export default ({post}) => {
     return <>
        render components here based on prop `post`
    </>
}

export async function getStaticPaths() {
    // How to get [code] from the route here, which can be used below?
    return { 
        paths: // NEED [code] HERE from current route,
        fallback: false
    }
} 

export async function getStaticProps(ctx) {
    return {
        props: { 
         // [ctx.code] resolved from current route with the help of getStaticPaths,
         post: apiCall(ctx.code) 
        }
    }
}

我试过 getServerSideProps 对我有用：

export const getServerSideProps = async (ctx) => {
    return {
        props: {
            post: await apiCall(ctx.query.code)
        }
    };
};

但是当我做next export 声明时它失败了：

无法导出带有getServerSideProps 的页面。在此处查看更多信息：https://err.sh/next.js/gssp-export

在进一步调查此错误I found this solution 后，这对我来说是不可行的，因为我的应用托管在 Heroku 上。

我正在尝试根据路由参数code 在服务器端渲染 html 以及数据。但现在做不到。

Answer 1

据我了解，您希望在构建时静态生成动态路由。

为此，您需要通过指定所有 codes 来让 Next.js 知道要生成哪些页面。

export async function getStaticPaths() {
    // you don't need here a code from current route
    // but you need to specify all known post codes
    return { 
        paths: [
          { params: { code: '1' } },
          { params: { code: '2' } },
          { params: { code: '3' } },
        ]
        fallback: false
    }
}

每次更改帖子时，您都需要重新构建应用程序。

如果您不想每次都重新构建项目，请使用getServerSideProps。然后将在请求时获取数据。你不能 export 它，因为它需要 Node.js 服务器。

Answer 2

函数getStaticPaths 的目的是生成一个路径列表，在构建时将为其呈现静态HTML。例如，对于 10 个帖子的列表，如果您知道帖子的 id，则可以提前生成 10 个posts/[id] 路由。

getStaticPaths 如何处理动态路由的详细信息..

假设您有一个动态路由/posts/[postId]，如果您选择使用静态生成，则必须生成一个路径列表，其中将包含postId 作为路由参数，并且对于返回的每个路径，函数getStaticProps将在构建时调用以查询数据。例如，

// for /post/[postId]

export const getStaticPaths = async () => {
  // if you know all the postId ahead of time

  const paths = [
     { params: { postId: '1234' } },  // keep in mind postId has to be a string
     { params: { postId: '3792' } },
     { params: { postId: '1749' } },
  ]

  return {
    paths,
    fallback: false // we are disabling fallback because we know all the paths ahead of time
  }
}

// for each path returned getStaticProps will be called at build time
export const getStaticProps = async (context) => {
   // you have access to the postId params that you returns from
   // getStaticPaths here
   const postId = context.params.postId 

   // now you can query the data from postId and return as props

   return {
     props: // queried data
   }
}

如果 fallback 设置为 false any 对于任何未从函数 getStaticPaths 返回的路由路径，nextjs 将仅显示 404 错误页面。

如何使用fallback: true为事先未知的路由参数生成静态页面

如果您知道一些postId 的帖子并且posts 的数据不经常更改，您可以选择生成将fallback 属性设置为true 的页面，这将显示一个回退不是从函数getStaticPaths 返回的路径的页面版本。在请求页面时，nextjs 将调用getStaticProps 并将数据作为 JSON 发送，该数据将用于在浏览器中呈现页面。 例如，

// for /post/[postId]
export const getStaticPaths = async () => {
   // you can get how many ever postIds are know ahead of time 
   // and return as paths with fallback set to true
   const posts = // queried data from db or fetched from remote API

   const paths = posts.map(post => { params:{ postId: post.id.toString() }})

   return {
      paths,
      fallback: true
   }

}

// in your page Component check for fallback and render a loading indicator
import { useRouter } from 'next/router';

const MyPage = (props) => {
  // before you do anything
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading....</div>
  }

  // rest of your page logic

}

如果您的数据非常动态，假设每 30 分钟或一个小时左右更改一次。您可以选择使用服务器端渲染，这将在每个请求的基础上fetch 数据，但 TTFB（到第一个字节的时间）会更高。例如，

// for /post/[postId]
export const getServerSideProps = async (context) => {

  // you also have access to the param postId from the context
  const postId = context.params.postId

  // query the data based on the postId and return as props
  return {
    props: // queried data
  }  

}

请记住，如果您选择使用 getServerSideProps，该函数将在每个请求的基础上被调用，因此第一个字节的时间会更长。

根据用例，您还可以使用来自 nextjs 团队 repo link 的 swr 使用静态生成和客户端数据获取。