教程 > Next.js 中文教程 > Next.js 基本特性 阅读：757

Next.js 预渲染 Pre Rendering

在 Next.js 中，我们知道它会为称为预渲染的页面生成 HTML。 Next.JS 支持两种类型的预渲染。

  • 静态生成 - 此方法在构建时生成 HTML 页面。 这个预渲染的 HTML 在每个请求上发送。 这种方法对于营销网站、博客、电子商务产品列表网站、帮助、文档网站很有用。
  • 服务器端生成 - 此方法在每个请求上生成 HTML 页面。 此方法适用于 html 页面内容可能随每个请求而变化的情况。

每个页面预渲染

Next.JS 允许为每个页面设置预渲染方法，其中大部分页面遵循静态生成，其他页面将使用服务器端渲染。

无数据静态生成

静态生成可以在没有数据的情况下完成，在这种情况下，HTML 页面将准备就绪，无需预取数据然后开始渲染。 可以稍后或根据请求获取数据。 这种技术有助于在没有任何数据的情况下向用户显示用户界面，以防数据需要时间。

使用数据进行静态生成

静态生成可以用数据完成，在这种情况下，HTML 页面在获取数据之前不会准备好，因为 HTML 可能依赖于数据。 每个组件都有一个特殊的方法 getStaticProps 可以用来获取数据并将数据作为页面的 props 传递，以便页面可以根据传递的 props 进行渲染。

getStaticProps() 函数在生产中的构建时运行，并在开发模式下每个请求都会运行。

让我们创建一个示例来看一下。

在此示例中，我们将创建一个更新 index.js 和 first.js 页面，从而使服务器命中来获取数据。

让我们更新 全局 CSS 支持 章节 中使用的 nextjs 项目。

更新 pages 目录中的 index.js 文件以使用 getServerSideProps() 方法。 此方法将根据请求调用。

index.js

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to 迹忆客 - Next.js 教程!</title>
         </Head>
         <div>Welcome to 迹忆客 - Next.js 教程!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/jiyik_logo.png" alt="迹忆客 Logo" />
      </>        
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

first.js

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>      
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

启动 Next.js 服务器

运行以下命令启动服务器

$ npm run dev

在浏览器中打开 localhost:3000 ，我们将看到以下输出。

Next.js 预渲染 Pre Rendering

点击First Post 链接。

Next.js 预渲染 Pre Rendering 第二个页面

查看笔记

扫码一下
查看教程更方便