使用 Next.js 实现 SSR 和 CSR 的选择-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，页面渲染的方式有两种：服务端渲染（Server-side Rendering，SSR）和客户端渲染（Client-side Rendering，CSR）。 SSR 适合通用型网站、静态页面和 SEO；而 CSR 适合使用较多的动态页面。本文将介绍使用 Next.js 实现 SSR 和 CSR 的选择。

什么是 Next.js？

Next.js 是一个 React 框架，提供了一种简单的方法来实现服务器渲染和服务器生成静态网站。它是一个开源的 React 框架，拥有一个强大的生态系统和广泛的支持。Next.js 所有的 API 都是 React 的扩展，同时提供了一些新特性。

Next.js 实现 SSR

服务端渲染是指在服务端生成 HTML，再将其传输到浏览器，是当今流行技术的一部分。使用 Next.js 实现的 SSR 有以下几个优势：

更好的 SEO

搜索引擎优化(SEO)是通过改进网站的可读性、评级和排名，从而提高品牌知名度的一种方法。因为 Next.js 可以在服务器端生成 HTML，所以使用 Next.js 实现 SSR 可以提高 SEO 优化。

更快的首次渲染

在使用客户端渲染时，浏览器需要先下载 HTML，然后下载 JavaScript 和其他静态资源文件，并且使用 JavaScript 动态加载数据，最后再来渲染页面。这导致首次渲染的速度相对较慢。而使用 Next.js 实现 SSR 可以直接将渲染好的 HTML 传递给客户端，加速浏览器页面渲染。

更好的用户体验

由于首次渲染更快，对于用户体验更好。此外，Next.js 还提供了页面预加载的功能，预加载是指在页面加载时自动在后台加载将要使用的资源，之后当浏览器访问数据需要时，可以快速的加载该资源，从而显著提高了页面的响应速度。

使用 Next.js 实现 SSR 可以将服务集中化，减轻后端服务器的负载，从而提高服务器资源利用率和网站的稳定性。

以下是使用 Next.js 实现 SSR 的示例代码：

// javascriptcn.com 代码示例
//index.js
import Link from 'next/link'
import Layout from '../components/Layout'

const IndexPage = () => (
  <Layout title="Home | Next.js Example">
    <h1>Hello Next.js 👋</h1>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
  </Layout>
)

export default IndexPage


//Layout.js
import Head from 'next/head'

const Layout = props => (
  <div>
    <Head>
      <title>{props.title}</title>
      <meta charSet="utf-8" />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <header>
      <nav>
        <ul>
          <li>
            <Link href="/">
              <a>Home</a>
            </Link>
          </li>
          <li>
            <Link href="/about">
              <a>About</a>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
    <main>{props.children}</main>
  </div>
)

export default Layout


//server.js
const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

上述示例代码中，我们使用 Next.js 生成了基于服务端渲染的页面，并且使用 Express 开启了一个端口为 3000 的服务器，用户可以通过浏览器访问，从而浏览服务端渲染的页面。

Next.js 实现 CSR

客户端渲染是指在浏览器端通过 JavaScript 生成 HTML，之后再将 HTML 渲染到页面上。使用 Next.js 实现的 CSR 有以下几个优势：

更好的互动性

客户端渲染可以提供更好的用户交互体验，因为页面可以通过 JavaScript 动态地更新和渲染。页面的某些部分可以被动态地更新，而无需重新加载整个页面，这可以使应用程序变得更加平滑。

更好的性能

使用客户端渲染可以使后端更少地工作，因为服务器所需渲染的 HTML 量减少了；JavaScript 快速加载和交互的优点也在某些情况下可以使页面渲染速度更快。

更好的离线支持

使用客户端渲染的技术（如 PWA, Service Worker）可以使您的应用程序脱离网络运行，并以某种方式缓存数据。

使用 Next.js 实现 CSR，可以更加灵活，同时具有良好的性能和用户体验。

以下是使用 Next.js 实现 CSR 的示例代码：

// javascriptcn.com 代码示例
//index.js
import Link from 'next/link'
import Layout from '../components/Layout'

const IndexPage = () => (
  <Layout title="Home | Next.js Example">
    <h1>Hello Next.js 👋</h1>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
  </Layout>
)

export default IndexPage


//Layout.js
import Head from 'next/head'

const Layout = props => (
  <div>
    <Head>
      <title>{props.title}</title>
      <meta charSet="utf-8" />
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <header>
      <nav>
        <ul>
          <li>
            <Link href="/">
              <a>Home</a>
            </Link>
          </li>
          <li>
            <Link href="/about">
              <a>About</a>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
    <main>{props.children}</main>
  </div>
)

export default Layout

上述示例代码中，我们使用 Next.js 生成了基于客户端渲染的页面，用户可以在浏览器中运行 JavaScript 代码动态生成 HTML，从而实现页面渲染。

总结

使用 Next.js 实现 SSR 和 CSR 可以根据应用场景和需求选择合适的渲染方式。 SSR 可以提高 SEO、首次渲染速度和用户体验，适用于通用型网站、静态页面和 SEO；而 CSR 可以提供更好的互动性、性能和离线支持，适用于使用较多的动态页面。Next.js 是实现 SSR 和 CSR 的一个好选择，可以帮助我们快速实现 React SSR 和 CSR 的应用程序。

参考资料

What is server-side rendering?, https://developers.google.com/web/updates/2019/02/rendering-on-the-web
What’s the Difference Between Server Side Rendering (SSR) and Client Side Rendering (CSR)?, https://www.kingcode.io/posts/server-side-rendering-vs-client-side-rendering
Next.js Documentation, https://nextjs.org/docs/

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