标签: static-site-generation

我刚刚开始使用 SvelteKit 并阅读了文档。我想在我的应用程序中使用 SSG 并预渲染每个页面。我按照文档所述配置了我的应用程序，但似乎没有任何效果如所描述的那样。

我想要实现的目标：

1.SSG （预渲染）

在构建时将静态内容（例如<h1>， ）生成为 HTML。<p>不要用 JS 来滋润客户端页面。我想尽可能避免这种情况，它会增加加载时间，一些用户禁用了 JS 并且对 SEO 不友好。我实在看不出你为什么要这么做有什么好处。只有当数据发生变化时，用 JS 生成数据才有用，对吗？我也看不出“无水合作用”和“预渲染”之间有什么区别。

2. 禁用SSR

不要在服务器上运行代码并呈现页面或请求。那么我可以假设 localStorage 等可用。

3. 不使用node服务器打开app

这并不是那么重要，但如果应用程序只需在本地浏览器中打开 index.html 文件即可运行，那就太好了。那时它可以与 Github Pages 一起使用。在构建了一个用纯 Svelte 编写的应用程序后，你可以怎么做。

4. 仅限 SvelteKit

如果只配置 SvelteKit 就足够了，那就太好了。无需任何外部库或不同 Svelte 框架的帮助。

我尝试过的

这是github上的一个例子。第一个目录中是一个可重现的示例，其中生成了构建版本。第二个大致是我期望构建给我的输出，这是我手动编写的。

我启动了新的 SvelteKit 项目并通过npm i -D @sveltejs/adapter-static@next. 然后我设置svelte.config.js文件：

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: …

我有一个 MERN 应用程序，其中集成了 NextJS。第一次使用 NextJS，请耐心等待。我最初在任何地方都使用过 SSR ( getServerSideProps)。

关键点：

• 我有超过 150,000 个页面，其中包含永远不会更改的静态内容。
• 每周我都会添加大约 100 个新页面。

我想这里的理想情况是使用getStaticPropsand getStaticPathsand ，在初始构建这 150k 页面之后，每周构建新添加的页面并保持我已经构建的内容不变，因为它永远不会改变。

我怎样才能实现这个目标？我应该revalidate在这里使用吗？我一直在文档中阅读有关它的内容，但我并不完全理解它。

Next.js 允许您使用服务器端 (SSR) 或静态客户端 (SSG) 渲染来构建站点，但当您运行时，next build && next export它会删除/api路由。

例如，由于 NextAuth.js 依赖于这些路由/api/auth/signin，因此如何为 SSG 实现 NextAuth.js？

几天前，我遇到了Nextra，它是一个基于Next.js 的静态站点生成器。

该文档解释了如何将站点部署到Vercel，我想知道是否可以将该站点部署到GitHub Pages或托管静态 HTML 站点的任何其他平台。

据我了解，yarn build将创建一个包含 html、css 和 js 文件的文件夹，这些文件可以上传到 GitHub 页面。我走在正确的轨道上吗？Nextra 页面可以分别托管在 GitHub Pages 上吗？

我找不到build包含生成的网站或类似内容的文件夹。

提前感谢您的每条建议。

我正在使用 Next.js 和静态站点生成。我想将增量静态再生添加到我的应用程序中并将其托管在云平台上。

是否可以在 Vercel 之外的其他平台（例如 Azure、AWS 等）上使用 ISR？我一直在尝试在 Azure 上部署我的应用程序，但 ISR 似乎不起作用。

想象一下你有这样的数据结构：

const data = {
  posts: [{
    id: 1,
    title: "Post 1"
    slug: "post-1"
  }, {
    id: 2,
    title: "Post 2"
    slug: "post-2"
  }],

  comments: [{
    id: 1,
    postId: "post-1",
    text: "Comment 1 for Post 1"
  }, {
    id: 2,
    postId: "post-1",
    text: "Comment 2 for Post 1"
  }, {
    id: 3,
    postId: "post-2",
    text: "Comment 1 for Post 2"
  }]
}

您有以下路线/posts/[postId[/[commentId] ，因此 Next.js 结构文件夹为：posts/[postId]/[commented].js

然后您需要为此路由生成静态路径。

我的编码如下：

export async function getStaticPaths() {
  const { posts, comments } …

我刚刚安装了一个新的 Next.js 应用程序。它有以下页面：

// /pages/articles/[slug].js

import React from 'react'
import { useRouter } from 'next/router'
import ErrorPage from 'next/error'

const Article = (props) => {
  const router = useRouter()
  if (router.isFallback) {
    return <div>Loading..</div>
  }
  if (!props['data']) {
    return <ErrorPage statusCode={404} />
  }
  return (
    <div>
      Article content
    </div>
  )
}

export default Article

export const getStaticProps = async(context) => {
  const slug = context.params.slug
  const res = ["a", "b", "c"].includes(slug)
    ? {
      props: {
        data: slug
      }
    }
    : …

在 5 分钟内创建AWS S3 网站 YT 视频和在 Amazon S3 Pulumi 上托管静态网站教程中，详细解释了如何使用 Pulumi 在 S3 上创建托管网站。

示例代码中使用了Pulumi的Bucket和BucketObject 。第一个创建 S3 存储桶，后者创建对象，这些对象主要用于index.html公共访问，如下所示：

const aws = require("@pulumi/aws");
const pulumi = require("@pulumi/pulumi");
const mime = require("mime");

// Create an S3 bucket
let siteBucket = new aws.s3.Bucket("s3-website-bucket");

let siteDir = "www"; // directory for content files

// For each file in the directory, create an S3 object stored in `siteBucket`
for (let item of require("fs").readdirSync(siteDir)) { …

我们在下一个导出模式（静态 HTML 导出）中使用 Next.Js ，并且我们需要高级动态路由。

我们的路线将类似于/[config1]/[config2]/[optionalConfig?]/page，其中一段是可选的，并且页面名称是固定的。例如a/b/c/page1或a1/b1/page2. 页面需要配置段数据才能呈现。

我还没有找到任何方法来使用内置路由来做到这一点。我可以/pages/[config1]/[config2]/page1.tsx，但是那个可选部分似乎是一个问题。请注意，自定义服务器似乎不是一个选项，因为由于其他限制，我们必须使用下一个导出模式。

注意：我们不知道构建时的路径；它们代表我们运行时配置的一部分。这必须使用客户端路由。（我们确实知道页面的有限集 - 例如 page1 ... page10 - 但到这些页面的路由会有所不同。）

我尝试切换到 React Router，设置useFileSystemPublicRoutes: false路由并将其添加到pages/_app.tsx（自定义应用程序）。这几乎可以工作，但我在控制台中看到许多 404on-demand-entries-utils.js以及一些“检测到可能的 EventEmitter 内存泄漏”警告（在开发模式下）。

有效的解决方案（必须 100% 在客户端工作）：

\n
• 使用内置路由来做到这一点的方法
\n
• 将 React Router 与 Next.Js 集成的示例
\n
• 替代库（我看过下一个路线，但已经三年没有更新了）
\n

更新

我们也许能够消除可选部分的要求。但是，看来我们必须实现getStaticPaths并指定所有路由。例如：

页面/[config]/foo.tsx

export …

我正在Ionic React与 Gatsby 一起使用。当我尝试gatsby build失败时HTMLElement is not defined

它正在编译我没有使用的 Ionic 组件（请检查下面的错误信息）。

我不能setWebpackConfig用来忽略该模块，因为它看起来Ionic React非常依赖window

我如何为 构建 SSG Ionic React？

ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  956 | const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
  957 |
> 958 | class IonTabsElement extends HTMLElement {
      | ^
  959 |     constructor() {
  960 |         super();
  961 |     }


  WebpackError: ReferenceError: HTMLElement is not …