Next.js 服务器端渲染的使用方法详解-JavaScript中文网-JavaScript教程资源分享门户

什么是 Next.js？

Next.js 是一个基于 React 的轻量级框架，它提供了服务器端渲染、静态文件生成、路由管理等功能，可以帮助开发者更快速地搭建 React 应用。在 Next.js 中，我们可以使用 React 的语法编写页面，同时还可以享受到服务器端渲染带来的优势，例如更快的首屏加载速度、更好的 SEO 等。

服务器端渲染的优势

服务器端渲染是指在服务端将 React 组件渲染成 HTML 页面，然后将页面返回给客户端。相比于传统的客户端渲染，服务器端渲染具有以下优势：

更快的首屏加载速度：因为服务端已经将页面渲染完成，客户端只需要下载已经渲染好的 HTML、CSS 和 JavaScript 文件，就可以直接展示页面，避免了客户端渲染时需要等待 JavaScript 加载和执行的时间。
更好的 SEO：由于搜索引擎爬虫无法执行 JavaScript，因此客户端渲染的页面对搜索引擎的友好度较低。而服务器端渲染的页面可以直接被搜索引擎爬取，提高了页面的排名和曝光率。
更好的用户体验：服务器端渲染可以在用户网络较差或设备性能较差的情况下，仍然保证页面的展示速度和体验。

Next.js 的服务器端渲染

在 Next.js 中，我们可以通过以下方式进行服务器端渲染：

在页面组件中使用 getInitialProps 方法获取数据，并将数据传递给组件进行渲染。

import axios from 'axios'

function Home(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  )
}

Home.getInitialProps = async () => {
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
  const { title, body } = res.data
  return {
    title,
    content: body
  }
}

export default Home

在上述代码中，我们通过 axios 库从接口中获取数据，并将数据通过 props 传递给组件进行渲染。

在页面组件中使用 getServerSideProps 方法获取数据，并将数据传递给组件进行渲染。

import axios from 'axios'

function Home(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  )
}

export async function getServerSideProps() {
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
  const { title, body } = res.data
  return {
    props: {
      title,
      content: body
    }
  }
}

export default Home

在上述代码中，我们通过 axios 库从接口中获取数据，并将数据通过 props 传递给组件进行渲染。与 getInitialProps 不同的是，getServerSideProps 是在服务端执行的，因此可以获取到服务端的数据。

静态文件生成

除了服务器端渲染，Next.js 还提供了静态文件生成的功能。通过静态文件生成，我们可以在构建时生成静态 HTML 文件，这些文件可以被直接部署到 CDN 上，从而提高页面的加载速度和稳定性。

在 Next.js 中，我们可以通过以下方式进行静态文件生成：

在页面组件中使用 getStaticProps 方法获取数据，并将数据传递给组件进行渲染。

import axios from 'axios'

function Home(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  )
}

export async function getStaticProps() {
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
  const { title, body } = res.data
  return {
    props: {
      title,
      content: body
    }
  }
}

export default Home

在上述代码中，我们通过 axios 库从接口中获取数据，并将数据通过 props 传递给组件进行渲染。与 getServerSideProps 不同的是，getStaticProps 是在构建时执行的，因此可以获取到静态数据。

在 next.config.js 中配置需要生成的静态文件路由。

module.exports = {
  async exportPathMap() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    const posts = res.data
    const paths = {}
    posts.forEach(post => {
      paths[`/posts/${post.id}`] = { page: '/posts/[id]', query: { id: post.id } }
    })
    return paths
  }
}

在上述代码中，我们通过 axios 库从接口中获取数据，并将数据转化为需要生成的静态文件路由。通过返回路由对象，Next.js 会自动生成对应的静态 HTML 文件。

总结

Next.js 是一个非常优秀的 React 框架，它提供了服务器端渲染、静态文件生成、路由管理等功能，可以帮助开发者更快速地搭建 React 应用。在 Next.js 中，我们可以使用 getInitialProps、getServerSideProps 和 getStaticProps 方法进行服务器端渲染和静态文件生成。服务器端渲染可以提高页面的首屏加载速度、SEO 和用户体验，静态文件生成可以提高页面的加载速度和稳定性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c1227cadd4f0e0ffb165d9