密码的，YOU不能不知道的Next.jsSSR（服务端渲染）

我是前端SSR 彭于晏，我喂自己袋盐，我把页面在服务器渲染好了，请把你分享给我，SEO 杠杠的。

随着网站对 首屏性能、SEO 优化和个性化内容 的要求越来越高，服务端渲染（SSR） 成为了现代前端框架的重要技能。本文将基于 Next.js 13+（最新Next15） 展示一个完整的 SSR 分享页面实战案例，帮助你快速掌握 Next.js SSR 的核心要点。

🧪 SSR 使用场景分析

SSR（Server Side Rendering）是指页面的 HTML 内容在服务器端生成，而不是完全依赖浏览器执行 JavaScript 渲染。

🔹 SSR 的基本流程

客户端请求页面 → 浏览器向服务器发起请求
服务端渲染 HTML → 服务器根据请求参数、Cookie、用户身份等生成完整 HTML
返回 HTML 给浏览器 → 浏览器直接拿到带内容的页面并展示
前端框架接管 → 前端 JS 执行 Hydration（"水合"），页面变得可交互

为什么要用 SSR？

优点	说明
首屏渲染快	用户首次打开页面就能看到完整内容，弱网和低性能设备尤佳
SEO 优化	搜索引擎爬虫能抓取完整 HTML，提升流量
支持动态内容	可根据用户请求返回个性化内容（登录状态、推荐列表）
用户体验佳	页面不会出现"白屏"或闪烁，降低用户流失

SSR缺点？~~缺点没有~~

什么时候需要 SSR？

资讯类、商城、博客、官网等依赖搜索引擎流量的页面
需要更好首屏性能和用户体验
页面内容经常变化，需要个性化展示

什么时候不需要 SSR？

管理后台、内部系统（SEO 不重要）
简单静态展示页，可用 SSG 或 CDN 缓存

⚙️ Next.js 13+ SSR 实战

我当前有一个分享页面，需要渲染接口返回的动态内容，同时搜索引擎要能抓取 标题、描述、图片，所以我们必须用 SSR。

关键点：`generateMetadata`

在 Next.js 13+ App Router 模式下，每个 page.tsx 或 layout.tsx 可以导出一个 generateMetadata 方法，用于生成页面 <head> 元信息，等价于自己写 <Head>：

typescript 复制代码

export async function generateMetadata(
  props: { params: Record<string, string>, searchParams: Record<string, string> }
): Promise<Metadata> {
  // 可以在这里请求接口、处理数据
  return {
    title: "页面标题",
    description: "页面描述",
    openGraph: {
      title: "OG 标题",
      description: "OG 描述",
      images: ["https://example.com/cover.png"],
    },
  };
}

1️⃣ 服务端 SSR 分享页面示例

javascript 复制代码

import ShareClient from "./ShareClient";
import { Metadata } from "next";
import { CDN } from "@/utils/env";
import { getWebContent } from "@/store/share/shareAPI";
import Base64 from "base-64";

interface ShareParams {
  searchParams?: Promise<{ u?: string }>;
}

export async function generateMetadata({ searchParams }: ShareParams): Promise<Metadata> {
  try {
    const u = (await searchParams)?.u;
    const decodedStr = Base64.decode(u || "");
    const obj = JSON.parse(decodedStr);
    const content = await getWebContent(obj);

    return {
      title: content?.data?.title,
      description: content?.data?.descrble,
      icons: {
        icon: `${CDN}images/logo.svg`,
        shortcut: `${CDN}images/logo.svg`,
        apple: `${CDN}images/logo.svg`,
        other: {
          rel: "apple-touch-icon-precomposed",
          url: `${CDN}images/logo.svg`,
        },
      },
      openGraph: {
        title: content?.data?.title,
        description: content?.data?.descrble,
        url: `${CDN}images/logo.svg`,
        siteName: "HAHAHUB",
        images: [
          { url: content?.data?.cover_url },
        ],
      },
    };
  } catch {
    return {};
  }
}

export default function Page() {
  return <ShareClient />;
}

💡 说明：

前端 ShareClient 组件就是正常的 H5 页面，无需关心SSR

从app分享出来的地址，searchParams.u 是 Base64 加密参数，需要先解密app分享参数再请求接口

服务器返回 HTML 就包含了标题、描述、封面等信息，SEO 完美支持

我的分享链接：

我的分享页面：

🔧 生产环境注意事项

SSR 服务依赖 Node.js 运行，但 Node 本身不稳定，生产环境推荐使用 PM2 守护：

ecosystem.config.js

yaml 复制代码

module.exports = {
  apps: [
    {
      name: "nextjs-app",
      script: "node_modules/next/dist/bin/next",
      args: "start -p 3000",
      cwd: "./",
      instances: "max",
      exec_mode: "cluster",
      watch: false,
      autorestart: true,
      max_memory_restart: "1G",
      env: {
        NODE_ENV: "production",
      },
    },
  ],
};

启动：

arduino 复制代码

pm2 start ecosystem.config.js

🔚 总结

关键点	描述
SSR 适用场景	高实时性内容、动态内容、SEO 需求强的页面
SSR 优点	首屏快、SEO 好、支持动态内容、用户体验佳
SSR 不适用场景	后台管理系统、静态展示页
Next.js 提供的功能	`generateMetadata` 生成动态 `<meta>`，自动 SSR Hydration

💡 小贴士：SSR 能让页面首屏秒开，搜索引擎抓取无压力，分享页面、资讯页、商城首页都非常适合。生产环境记得配 PM2 或其他守护工具，稳稳的。