起死回生: SPA 项目后端渲染实践总结-JavaScript中文网-JavaScript教程资源分享门户

起死回生：SPA 项目后端渲染实践总结

随着前端技术的不断发展，单页应用（Single Page Application，SPA）渐渐成为了现代 Web 开发的主流模式。SPA 的运行方式可以大大提升用户体验，但也带来了一些问题，其中最显著的就是 SEO 和首屏渲染优化问题。这些问题都可以通过在 SPA 基础上引入后端渲染（Server Side Rendering，SSR）来解决。本文将结合实践经验，介绍 SPA 项目后端渲染的实践总结。

一、SSR 的优缺点

优点

更好的 SEO。由于搜索引擎爬虫无法执行 JavaScript，传统的 SPA 在爬虫网络中的 SEO 表现相对较差，而 SSR 可以直接在服务端将 HTML 返回给爬虫，从而大大提升 SEO。
更快的首屏渲染速度。SPA 在加载页面时需要下载完所有相关的 JavaScript 和 CSS 才能开始渲染，而 SSR 可以在浏览器请求之前，将完整的 HTML 内容返回给用户，从而减少页面白屏时间，提升首屏渲染速度。
更好的可访问性和可维护性。SSR 可以直接与后端服务通信，不需要经过跨域请求，既能解决跨域问题，也能减少代码量，提高代码的可访问性和可维护性。

缺点

SSR 一般需要服务端进行渲染，会带来更大的服务器压力，需要更好的服务器配置和更多的资源。
SSR 可能会影响代码的灵活性，需要开发者在一定程度上牺牲一些控制权。

二、SPA 项目的后端渲染实践

使用 Next.js

一种简单实用的 SSR 解决方案是使用 Next.js，它是基于 React 的服务端渲染框架，提供了一些常见功能的默认实现，例如：

代码拆分和懒加载。
自动处理动态路由、静态资源和页面呈现等。
内置的 pre-fetching 实现提升页面性能。
自动处理 SEO，生成带有 meta 标签和 rel=“canonical”属性的 HTML 页面。
支持热更新和自定义 Server 运行模式。

Next.js 的主要优势是易于使用，对配置和功能的默认实现使得开发者可以快速搭建 SSR 应用，并且与 React 生态系统紧密结合。下面是使用 Next.js 创建一个简单的 SSR 应用的示例代码：

// javascriptcn.com 代码示例
import Link from 'next/link'

const Index = () => (
  <div>
    <Link href="/about">
      <a>About</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

使用 React + Express + Webpack

除了使用 Next.js 之外，还有一种常见的 SSR 实现方案是 React + Express + Webpack。这个方案的基本思路是在服务器上运行一个 Express 服务器，通过 Webpack 打包 React 应用，将打包后的 HTML 返回给客户端。

下面是使用 React + Express + Webpack 创建一个基本的 SSR 应用的示例代码：

// javascriptcn.com 代码示例
// server.js

import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import App from './App'

const app = express()

app.get('/', (req, res) => {
  const appString = renderToString(<App />)
  const html = `
    <html>
      <head>
        <title>SSR Demo</title>
      </head>
      <body>
        <div id="app">${appString}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `
  res.send(html)
})

app.use(express.static('public'))

app.listen(3000, () => {
  console.log('Server is listenning on port 3000.')
})

// App.js

import React from 'react'

const App = () => (
  <div>Hello SSR!</div>
)

export default App

三、SSR 项目的代码优化技巧

代码拆分和懒加载

代码拆分和懒加载是优化 SSR 应用的重要手段。在 SSR 中，代码拆分和懒加载可以将初始下载的 JavaScript 代码量减小，并且根据用户的访问行为去加载更多的 JavaScript 代码。

Next.js 和 Webpack 都对代码拆分和懒加载提供了丰富的支持，开发者可以根据需求利用这些功能对 SSR 应用进行优化。例如：

// 固定的异步加载
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

// javascriptcn.com 代码示例
// 根据用户行为进行懒加载
import { useState, useEffect } from 'react'

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    setIsVisible(true)
  }, [])

  return isVisible ? <div>Hello SSR!</div> : null
}

服务端缓存和客户端缓存

服务端缓存和客户端缓存可以避免每次请求都需要重新渲染，从而提高 SSR 应用的性能。

服务端缓存可以通过在服务器中缓存已处理的 HTML 响应来实现。可以使用类似 Memcached 或 Redis 的内存数据库来实现。客户端缓存可以通过在 HTTP 响应头部设置正确的 cache-control 和 expires 属性来实现。

预取数据和组件

预取数据和组件可以允许 SSR 应用在浏览器请求之前预取数据或组件，从而提高应用性能。Next.js 提供了内置的数据预取逻辑 getInitialProps()，该函数允许开发者提前获取需要的数据，避免浏览器请求时再取数据。React.lazy 和 React.Suspense 也允许开发者进行组件预取，实现方式类似于代码拆分和懒加载。

// javascriptcn.com 代码示例
// 使用 getInitialProps 预取数据
const Page = ({ data }) => (
  <ul>{data.map((d) => <li key={d.id}>{d.title}</li>)}</ul>
)

Page.getInitialProps = async () => {
  const res = await fetch('https://api/data')
  const json = await res.json()
  return { data: json }
}

export default Page

// javascriptcn.com 代码示例
// 使用 React.lazy 和 <React.Suspense> 预取组件
import React, { lazy, Suspense } from 'react'

const LazyComponent = lazy(() => import('./MyComponent'))

const Page = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
)

综上所述，SSR 是解决 SPA 应用中 SEO 和首屏渲染优化问题的常见手段，但也需要开发者在架构和代码方面做出一些优化。借助现有的工具，例如 Next.js、React.lazy 和 React.Suspense，以及常见的优化技巧，例如代码拆分和懒加载、服务端缓存和客户端缓存、预取数据和组件等，我们可以更好地应对 SSR 项目的开发和优化。

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