跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsNuct大前端

前端 SSR 实践指南：Next.js、Nuxt.js 与 React 18

前端 SSR 实践指南：Next.js、Nuxt.js 与 React 18 为什么需要 SSR 最近看到一个项目，纯客户端渲染，SEO 排名倒数，用户体验差。服务端渲染（SSR）能有效解决搜索引擎抓取问题，提升首屏加载速度。 反面教材：纯客户端渲染 **点评**：纯客户端渲染导致搜索引擎无法直接抓取内容，影响 SEO 排名。 正确姿势：SSR 方案 Next.js SSR Nuxt.js SSR…

莫名其妙发布于 2026/4/6更新于 2026/10/2464K 浏览

前端 SSR 实践指南：Next.js、Nuxt.js 与 React 18

为什么需要 SSR

最近看到一个项目，纯客户端渲染，SEO 排名倒数，用户体验差。服务端渲染（SSR）能有效解决搜索引擎抓取问题，提升首屏加载速度。

反面教材：纯客户端渲染
// App.jsx
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const response = await fetch('/api/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>我的网站</>
      {loading ? 加载中... : (
        
          {data.map(item => (
            
              {item.title}
              {item.content}
            
          ))}
        
      )}
    
  );
}

  ;
h1
<div>
</div>
<div>
<div key={item.id}>
<h2>
</h2>
<p>
</p>
</div>
</div>
</div>
export
default
App

点评：纯客户端渲染导致搜索引擎无法直接抓取内容，影响 SEO 排名。

正确姿势：SSR 方案

1. Next.js SSR
// pages/index.js
import React from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>我的网站</h1>
      <div>
        {data.map(item => (
          <div key={item.id}>
            <h2>{item.title}</h2>
            <p>{item.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
2. Nuxt.js SSR
<!-- pages/index.vue -->
<template>
  <div>
    <h1>我的网站</h1>
    <div>
      <div v-for="item in data" :key="item.id">
        <h2>{{ item.title }}</h2>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const { data } = await $axios.get('https://api.example.com/data');
    return { data };
  }
};
</script>
3. Remix SSR
// app/routes/index.jsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return json({ data });
}

export default function Home() {
  const { data } = useLoaderData();
  return (
    <div>
      <h1>我的网站</h1>
      <div>
        {data.map(item => (
          <div key={item.id}>
            <h2>{item.title}</h2>
            <p>{item.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
4. React 18 SSR
// 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('*', async (req, res) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  const html = renderToString(<App data={data} />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>我的网站</title>
      </head>
      <body>
        <div>${html}</div>
        <script>
          window.__INITIAL_DATA__ = ${JSON.stringify(data)};
        </script>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

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

// App.jsx
import React from 'react';

function App({ data }) {
  return (
    <div>
      <h1>我的网站</h1>
      <div>
        {data.map(item => (
          <div key={item.id}>
            <h2>{item.title}</h2>
            <p>{item.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

// client.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App data={window.__INITIAL_DATA__} />
  </React.StrictMode>
);

点评：服务端渲染内容，搜索引擎友好，用户体验好。

目录

  1. 前端 SSR 实践指南：Next.js、Nuxt.js 与 React 18
  2. 为什么需要 SSR
  3. 反面教材：纯客户端渲染
  4. 正确姿势：SSR 方案
  5. 1. Next.js SSR
  6. 2. Nuxt.js SSR
  7. 3. Remix SSR
  8. 4. React 18 SSR

更多推荐文章

查看全部
  • OpenClaw 是一个开源的、面向具身智能（Embodied AI）与机器人操作研究的多模态大模型框架
  • 数据库迁移 TCO 分析：MySQL 替代隐性成本与工具链实测
  • 端侧全模态大模型 Megrez-3B-Omni 实测与部署指南
  • Visual Studio 中 GitHub Copilot Agent 模式深度解析
  • Linux 命令行趣味工具集锦
  • 虚拟机 VMware 下载安装指南（Windows/Linux）
  • 荣耀 MWC 2026 发布 Robot Phone 与人形机器人，探索 AI 硬件生态
  • 黑客和渗透测试基础知识及书籍推荐
  • Git 多人协作全流程实战：分支协同与冲突解决
  • LeetCode 128：哈希集合求解最长连续序列
  • llama.cpp 多模态 GGUF 模型加载实战
  • Spring Boot 整合 RabbitMQ 实战
  • Claude Code 安装与接入智谱 AI 大模型指南
  • 基于 Qwen3-VL 与 LLaMA-Factory 的 Grounding 任务 LoRA 微调实战
  • C++ 向上取整实现方法与实战应用
  • Jetpack Compose 浮动按钮与进度条组件使用示例
  • 车载测试：基于 Python 与 CAPL 的程控电源协同控制方案
  • System Verilog 教程：从基础到高级验证
  • WebPlotDigitizer 智能图表数据提取工具与科研应用指南
  • 大模型原理、训练流程与应用场景全面解析

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online