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

Question

我从 Next.js 开始，在浏览文档后，我无法弄清楚如何获取路由参数 code里面 getStaticPaths方法如下图!？。 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 时它失败了说明:

pages with getServerSideProps can not be exported. See more info here: https://err.sh/next.js/gssp-export

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

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

Answer 1

函数的用途getStaticPaths是生成静态 HTML 将在构建时呈现的路径列表。例如，对于 10 个帖子的列表，您可以生成 10 posts/[id]如果您知道帖子的 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该函数将在每个请求的基础上调用，因此第一个字节的时间会更长。

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