📌  相关文章
📜  Next.js-预渲染

📅  最后修改于: 2020-10-22 06:45:50             🧑  作者: Mango

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

  • 静态生成-此方法在生成时生成HTML页面。每次请求时都会发送此预渲染的HTML。此方法对于营销网站，博客，列出wesites，帮助和文档网站的电子商务产品很有用。

  • 服务器端生成-此方法在每个请求上生成HTML页面。当html页面的内容随每个请求而变化时，此方法适用。

每页预渲染

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

没有数据的静态生成

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

静态生成数据

静态生成可以使用数据完成，在这种情况下，HTML页面只有在获取数据后才能准备就绪，因为HTML可能取决于数据。每个组件都有一个特殊的方法getStaticProps ，可用于获取数据并将数据作为页面的props传递，以便页面可以根据传递的props呈现。

getStaticProps（）函数在生产环境中的构建时运行，并在开发人员模式下针对每个请求运行。

让我们创建一个示例来演示相同的内容。

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

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

更新页面目录中的index.js文件以使用getServerSideProps（）方法。将根据每个请求调用此方法。

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

function HomePage(props) {
   return (
      <>
         
            Welcome to Next.js!
         
         
Welcome to Next.js!

         First Post
         

         
Next stars: {props.stars}

         TutorialsPoint 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文件以使用getStaticProps（）方法。此方法将被调用一次。

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

export default function FirstPost(props) {
   return (
      <>
         
            
               My First Post
            
            
My First Post

            

               
                  Home
               
               
Next stars: {props.stars}

            

         
      >      
   )
}

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
> nextjs@1.0.0 dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

验证输出

在浏览器中打开localhost：3000，您将看到以下输出。

资料首页

单击“第一篇文章”链接。

第一页资料