前端 SSR 技术指南：提升 SEO 与用户体验 | 极客日志

JavaScriptNode.js大前端

前端 SSR 技术指南：提升 SEO 与用户体验

探讨前端服务端渲染（SSR）的重要性，对比纯客户端渲染在 SEO 方面的劣势。介绍了 Next.js、Nuxt.js、Remix 及 React 18 原生 SSR 的实现方案，通过代码示例展示如何在服务端获取数据并渲染 HTML，从而优化搜索引擎收录和首屏加载体验。

林间仙子发布于 2026/4/5更新于 2026/4/130 浏览

前端 SSR 技术指南：提升 SEO 与用户体验

背景与问题

这网站做得跟黑洞似的，搜索引擎根本爬不进去。

各位前端同行，咱们今天聊聊前端 SSR（服务端渲染）。别告诉我你还在使用纯客户端渲染，那感觉就像在没有窗户的房间里生活——能住，但看不见外面的世界。

为什么你需要 SSR

最近看到一个项目，纯客户端渲染，SEO 排名倒数，用户体验差。我就想问：你是在做网站还是在做内部工具？

反面教材

// 反面教材：纯客户端渲染 // 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 (
    <>
      我的网站
      {loading ? (
        加载中...
      ) : (
        
          {data.map(item => (
            
              {item.title}
              {item.content}
            
          ))}
        
      )}
    
  );
}

  ;

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

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

// 正确姿势：Next.js SSR
// 1. 安装依赖：npx create-next-app@latest
// 2. 页面组件：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>
  );
}

<!-- 正确姿势：Nuxt.js SSR -->
<!-- 1. 安装依赖：npx create-nuxt-app@latest -->
<!-- 2. 页面组件：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>

// 正确姿势：Remix SSR
// 1. 安装依赖：npx create-remix@latest
// 2. 路由组件：app/routes/index.jsx
import { json } from '@remix-run/node';

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>
  );
}

// 正确姿势：React 18 SSR
// 1. 安装依赖：npm install react react-dom express
// 2. 服务端代码：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');
});

// 3. 客户端代码：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;

// 4. 客户端入口：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>
);