标签: ssg

我想从 Next.js 静态站点生成的 URL 获取查询字符串。

我在 SSR 上找到了一个解决方案，但我需要一个用于 SSG 的解决方案。

谢谢

我知道这个话题并不新鲜，我发现（并阅读）了一些讨论。我找不到的是我仍然存在的问题的答案。

其他人如何解决无法在 _app.js 中使用 getStaticProps 的问题？getInitialProps不是我的选择，因为我想使用SSG。即使使用 getInitialProps ，有没有办法强制 SSG？或者我真的必须在每个页面上从我的无头 CMS 中获取我的所有数据吗？例如，因为我想构建一个页眉（包括导航）和一个页脚。目前我看到的唯一选择是重复大量代码。

非常感谢任何提示，感谢您的阅读！

我试图在 Next.JS 中生成一个index.html页面getStaticPaths，但每次我尝试这样做时，它都会抛出错误或创建一个index目录而不是文件。

到目前为止，我已经尝试传递：''和in 。我也尝试添加文件，但这也不起作用。'/''index'params.pagetrailingSlash: true,next.config

[page].js我在页面目录中有一个文件。使用此文件，我生成了许多页面，因为该[page].js文件是模板文件。我使用这种模板方法是因为有很多通用组件，每个页面唯一不同的是“主要内容”。想象一下，生成 10 个页面，每个页面都有相同的导航栏和侧面菜单，但内容（文本）不同。因此，我尝试生成 10 个页面，其中之一是页面，但它index.html不是生成文件，而是生成一个目录。我该如何解决这个问题？.htmlindex

export const getStaticPaths = async () => {
    return {
        paths: [{
            params: { // Imagine the following code for another 9 pages
                page: 'index' // Only the `index` one has a problem (creates a directory instead of file)
            }
        }]
    };
}

index如果我传递除in之外的任何其他字符串，params.page则会创建一个[my_string].html页面。我希望能够 …

"Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'"当我尝试在 NextJS 中创建我的页面时出现此错误。

我不想在构建时生成任何静态页面。那么为什么我需要创建一个'getStaticPaths'函数呢？

我使用 vue cli 创建了一个 vue 项目：

vue create myproject

我认为我这样做时的输出npm run build将是一个单页应用程序（SPA）。使用现有代码生成静态网站（SSG / Jamstack）需要什么？我知道我可以使用 Nuxt 轻松做到这一点，但我想知道如何在没有 Nuxt 的情况下做到这一点。

编辑：我认为我的意思是预先渲染一些页面，以便更好地进行搜索引擎优化。

我正在使用 nuxt 生成完整的静态 Web 应用程序，如下所述https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications

我有一个小博客也可以作为静态站点加载，因此我使用 fetch hook 从 api 加载数据。

async fetch() {
  this.posts = await fetch(`${this.baseApi}/posts`).then(res => res.json())
},

当我生成( npm run generate)时，获取的状态在内部正确生成dist/assets/static，因此当直接访问时/blog，状态被正确加载并且数据显示正确。但是，当我在主页上并使用访问博客时

this.$router.push

或一个

<nuxt-link to="/blog">Blog</nuxt-link>

获取到的状态没有加载，我必须再次调用api，或者在钩子中再调用this.$fetch()一次mounted()

我已经添加了一个

watch: {
  '$route.query': '$fetch'
}

到主页

使用导航时我需要正确加载获取的状态我还缺少什么？

澄清

我没有遇到 fetch hook 本身的任何问题，而是导航没有检索目标路由的状态。即使HTML在那里我也需要页面来获取目标路由的状态，当路由发生变化时，因为vue模板依赖于它，所以如果它没有加载，ui将不会显示任何内容，我被迫手动调用 fetch hook

为了更清晰的视图，这是我的开发工具在直接访问 /blog 时的屏幕截图，请注意如何正确检索 state.js（它包含所有渲染的内容）

以下是我的开发工具在访问 / 时的屏幕截图，然后使用 nuxt-link 或 this.$router.push 访问博客（相同的结果）

静态截图：

Blog.vue

<template>
  <b-container class="container blog">
    <b-row>
      <b-col lg="12" md="12" sm="12" cols="12" class="logo-col">
        <SbLogoSingle /> …

所以我对getStaticProps.

getStaticProps 在构建时运行以生成静态页面。

我的问题是，如果我有一个在发布新帖子时更新的博客，我不应该使用getStaticProps，对吗？因为它只在构建时被调用，然后永远不会被调用来获取新的可用帖子。在这种情况下，我应该在getServerSideProps客户端使用或获取数据useSWR，对吗？