Серверная страница Render Dynami c Page на основе параметра маршрута

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, заявляя:

страницы с getServerSideProps не могут быть экспортированы. См. Дополнительную информацию здесь: https://err.sh/next.js/gssp-export

После дальнейшего исследования этой ошибки я нашел это решение , которое для меня невозможно, поскольку мое приложение размещено на Heroku.

Я пытаюсь выполнить рендеринг html на стороне сервера вместе с данными на основе параметра маршрута code. Но сейчас не могу.

Answer 1

Назначение функции getStaticPaths - создать список путей, для которых stati c HTML будет отображаться во время сборки. Например, для списка из 10 сообщений вы можете заранее сгенерировать 10 posts/[id] маршрутов, если знаете идентификатор сообщений.

Как getStaticPaths работает с маршрутами Dynami c подробнее ..

Предположим, у вас есть динамический c маршрут /posts/[postId], если вы решите использовать генерацию stati c, вам нужно сгенерировать список путей, которые будут включать 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 next js просто отобразит страницу ошибки 404.

Как использовать fallback: true для генерации c страниц для параметров маршрута, заранее неизвестных

Если вы знаете некоторые postId сообщений и данные для posts меняются не очень часто, вы можете выбрать создание страниц со свойством fallback, установленным на true, что будет отображать резервную версию страницы для путей, которые не возвращаются из функции getStaticPaths. И при запросе следующей страницы js вызовет 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

}

Если ваши данные очень динамичны c, допустим, они меняются каждые 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
  }  

}

Имейте в виду, что если вы выберете go с getServerSideProps, функция будет вызываться для каждого запроса, поэтому время до первого байта будет больше.

В зависимости от сценариев использования вы также можете использовать генерацию stati c с получением данных на стороне клиента, используя swr из следующего js team repo link .

Answer 2

Насколько я понимаю, вы хотите статически генерировать динамические c маршруты во время сборки.

Для этого вам нужно дать Next. js знать, какие страницы генерировать, указав все codes.

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 сервер.