在 Next.js 中，您可以选择服务器端渲染 (SSR)或静态站点生成 (SSG)。在整个Next.js 文档和社区中，出于性能原因，建议使用 SSG 而非 SSR。
我有一个 Next.js 构建，它在整个应用程序中使用 SSG，getStaticProps()通过与外部 CMS (Prismic) 集成，在构建时使用等生成内容/页面。我更喜欢这个，因为如前所述，它提供了性能提升，而且大多数代码库然后可以使用相同的数据获取策略（在构建时）。
但是，其中一些页面需要受到保护——这意味着它们只能由经过身份验证的用户访问。我们正在使用 Auth0 生成 JWT 令牌，并在 API 调用中验证令牌后让 React 上下文提供程序保存用户的状态（已登录或未登录）。
但是，令我震惊的是，我似乎没有使用此令牌保护 SSG 页面的好方法。推荐的方式在这里令我奇怪，因为据我可以告诉这是一个客户端重定向，可以通过客户端（被操纵的例子-客户端可以操纵它的局部状态/上下文或其他篡改无论是从返回notloggedincondition) 以显示静态内容或以其他方式使重定向短路。
作为参考，这是该代码的粘贴：
import {useEffect} from 'react'
import {useRouter} from 'next/router'
export async function getStaticProps() {
return {
props: {
hello: 'Hello World'
}
}
}
export default (props) => {
const router = useRouter()
useEffect(() => {
if(notloggedincondition) {
router.push('/login')
}
}, [])
return <h1>Rest of the page</h1>
}
请注意，<h1>Rest of the page</h1>仍然可以通过操纵客户端来访问......所以我想在请求/响应级别保护 SSG 并执行服务器端重定向（如果需要），或类似的东西。
的类似短这样，是有没有办法安全地保护SSG网页，而不必依赖于客户端的路由？我是否需要对内容进行 SSR，即使它与其他内容实际上没有什么不同，除了只有经过身份验证的用户才能看到它的要求之外？
也许我遗漏了一些明显的东西，但在我看来，即使使用静态站点，也应该有一种方法来保护它而不依赖客户端路由。也就是说，每个页面都必须公开的静态生成站点的概念似乎并不是固有的，所以我想知道在 Next.js 中是否有一种安全的方法可以做到这一点。
我能找到实现此目的的最佳方法是通过SWR fetches，使用初始未受保护的静态数据静态生成页面的骨架，然后在刷新返回内容时通过刷新对其进行水化。
这确实需要您将逻辑收集数据转移到 API 或 CMS 后面的受保护页面（任何可以清除您的权限视图的内容），并且将现有路由转换为使用 API 调用并不是一项简单的任务，所以 YMMV。
重要提示：您的重定向仍然需要在客户端进行，但是您可以避免向未经授权的用户显示任何受保护的内容，因为这些内容仍然在服务器级别进行控制。由于您最担心的似乎是用户主动尝试通过操纵代码来破坏内容，因此这似乎符合您的风险补救标准（他们仍然无法访问受保护的内容）。
页面代码示例：
import {useEffect} from 'react'
import {useRouter} from 'next/router'
import useSWR from 'swr'
export async function getStaticProps() {
return {
props: {
hello: 'Hello World'
}
}
}
export default (props) => {
const router = useRouter()
// Access the protected content via an API route,
// provide the initial unprotected static content via the initialData param
const { data } = useSWR('/api/protected-content', fetcher, { initialData: props })
useEffect(() => {
if(notloggedincondition) {
router.push('/login')
}
}, [])
return <h1>{ data.hello }</h1>
}
然后，API 实现示例位于pages/api/protected-content：
export default async function ProtectedContent(req, res) {
// Get a session object based on request cookies
let session = await initUserSession(req, res);
// If a session is available, return the protected content
if (session.props.userSession) {
return res.status(200).json({hello: 'This is protected content'});
} else {
return res.status(401).send("UNAUTHENTICATED");
}
}