next 预渲染
next 预渲染
默认情况下，Next.js 会预渲染每个页面。这意味着 Next.js 会提前为每个页面生成 HTML，而不是由客户端 JavaScript 完成所有工作。
预渲染可以带来更好的性能和搜索引擎优化 。
收到预渲染的 HTML 后需要进行水合（下载 js 文件激活）
两个形式的预渲染：静态生成和服务端渲染。
区别在于他何时为页面生成 HTML。
静态生成是在构建时生成 HTML 的预渲染方法。然后，在每个请求中重复使用预渲染的 HTML。
服务器端渲染是在每个请求上生成 HTML 的预渲染方法。
静态生成
静态生成可以在有数据的情况下进行，也可以在没有数据的情况下完成。
生产构建时创建，可以被 CDN 缓存。
getStaticProps
使用 Data 生成静态 getStaticProps
在 Next.js 中，当您导出页面组件时，您还可以导出一个名为 getStaticProps 的函数。如果您这样做，则:
async getStaticProps 在生产环境中的构建时运行，并且...
在该函数中，你可以获取外部数据并将其作为 props 发送到页面。
export default function Home(props) { ... }export async function getStaticProps() { // Get external data from the file system, API, DB, etc. const data = ... // The value of the props key will be // passed to the Home component return { props: ... }}
**getStaticProps 只在服务器端运行。**它永远不会在客户端上运行。它甚至不会包含在浏览器的 JS 包中。这意味着您可以编写代码，例如直接数据库查询，而无需将它们发送到浏览器。
getStaticProps 函数说明：
- 在开发环境下(yarn dev)，每次请求都会运行一次getStaticProps，因为这是为了方便我们修改代码重新运行 每次刷新页面，发现时间戳都会变化
- 在生产环境(yarn start)，getStaticProps仅在构建时**(next build/yarn build)**运行一次，然后提供一份HTML给所有用户下载
- 代码经yarn build构建之后，通过yarn start启动生产服务器，刷新页面，发现时间戳保持不变。意味着页面刷新不再执行getStaticProps
- getStaticProps 只能在page 组件中使用
- getStaticProps 只运行在服务器端，可以访问文件系统，可以连数据库。写在这个函数中的代码在build阶段就执行过了，所以这些代码永远不会到达客户端 如果我需要在请求时获取数据，该怎么办？ 由于 Static Generation 在构建时发生一次，因此它不适用于频繁更新或根据每个用户请求更改的数据。 在这种情况下，您的数据可能会发生变化，您可以使用 Server-side Rendering。 服务端渲染 要使用服务器端渲染，你需要从页面导出 getServerSideProps 而不是 getStaticProps。 用 getServerSideProps 只有当你需要预渲染一个必须在请求时获取其数据的页面时，你才应该使用 getServerSideProps。 首字节时间 （TTFB） 将比 getStaticProps 慢，因为服务器必须计算每个请求的结果，并且结果不能被CDN。 客户端渲染 当你的页面需要进行交互操作或事件、使用到了浏览器API、DOM/BOM、或者 useEffect 客户端方法时，你的组件将会以客户端渲染的方式下发
来源整理自：vue3js.cn 面试官系列
