Question

我正在使用带有全部选择[... slug]的动态路线。通常，URL是“ mywebsite.com/ [用户名]”还是“ mywebsite.com/ [用户名] / [postid]”。

然后在getServerSideProps（{query}）中，我收到一个带有[username]或[username]和[postid]的数组。我只使用用户名信息来获取所有用户名数据。

此后，根据{查询}收到的元素数，我将决定是否：

1-我将呈现用户主页组件， 2-或帖子页面组件（以防万一，同时接收到[username]和[postid]

到目前为止，一切正常。但是，在浏览pos页和userhome页时，即使使用组件，NextJS始终会触发getServerSideProps，这不是必需的，因为它应该是SPA。

既然我已经拥有了所有必需的提取数据，如何避免这种情况？

这是我的文件夹结构：

页数 index.js（只是一个欢迎页面） [... slug] .js

组件 UserHomePage.js PostPage.js

这是我在[... slug] .js中的代码

import Router from 'next/router'
import UserHomePage from '../components/UserHomePage'
import PostPage from '../components/PostPage'

const HomePage = ({ data, slug }) => {

  if (slug.length === 1) return <UserHomePage data={data}/>
  
  if (slug.length > 1) return <PostPage data={data} slug={slug}/>
}

export async function getServerSideProps({ query }) {
  const { slug } = query;

  const res = await fetch(`http://localhost:5000/api/account/${slug[0]}`);
  const data = await res.json()

  return {
    props: {
      data,
      slug,
    }
  }
}

export default HomePage

这是UserHomePage中的代码

import Link from 'next/link'

export default function UserHomePage({ data }) {
  const { posts, account } = data;

return (
  <>
  {posts.map(post => (
    <div>
      <Link href={`/${account.username}/[...slug]/`} as={`/${account.username}/${post._id}/`}>
      <a>
      {post._id}
      </a>
      </Link>
    </div>
  ))}
  </>
)
}

这是我在PostPage中的代码

import Router from 'next/router'

export default function PostPage({ data, slug }) {
  const post = data.post.filter(post => post._id.toString() === slug[1])
  return (
  <>
  <h1>Produto - {post[0]._id}</h1>
    <button type='button' onClick={() => Router.back()}>Back</button>
  </>
  )
}

感谢您的帮助

如何避免NextJs一旦已经触发一次就触发getServerSideProps？

0 个答案: