运行npm run build之后，我可以在.next/server/pages下找到静态生成的html文件。
然而，每个html文件主要包含脚本标记和JSON数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="/" crossorigin="anonymous" />
<link
rel="preload"
href="/_next/static/css/123.css"
as="style"
/>
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link
rel="stylesheet"
href="/_next/static/css/afe06a54dae95702.css"
data-n-g=""
/>
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="/_next/static/chunks/polyfills-123.js"
></script>
<script
src="/_next/static/chunks/webpack-123.js"
defer=""
></script>
<script
src="/_next/static/chunks/framework-123.js"
defer=""
></script>
<script
src="/_next/static/chunks/main-123.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/_app-123.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/demo-123.js"
defer=""
></script>
<script
src="/_next/static/123/_buildManifest.js"
defer=""
></script>
<script
src="/_next/static/123/_ssgManifest.js"
defer=""
></script>
</head>
<body>
<div id="__next"></div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/demo",
"query": {},
"buildId": "123",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}
</script>
</body>
</html>为什么Nextjs静态生成的html文件看起来像这样而不是只包含纯html？浏览器上是否有其他处理步骤将这些文件转换为html？如果有，是否有方法获得最终的html输出？
1条答案
按热度按时间gcuhipw91#
嗨@贾兰蓝，
当您在Next.js项目中运行
NPM run build命令时，它将为应用程序中的每个页面生成静态呈现的HTML文件。.next/server/pages目录中的文件旨在直接提供给客户端，因为它们被设计为由客户端JavaScript进行水合。当用户访问您的网页时。然后JavaScript代码将使用JSON数据用动态内容填充页面。简单地说，这是因为
its designed to be "hydrated"。换句话说。
HTML文件是在服务器上预先呈现的，但是，当HTML加载到浏览器上时，客户端JavaScript会将动态内容添加到页面中
水合过程允许Next.js通过在服务器上呈现初始HTML并将其发送到客户端，为应用程序中的页面提供快速的初始加载时间，然后，当客户端JavaScript代码运行时，它可以使用动态内容快速更新页面，而不需要额外的服务器端呈现或处理。