前端 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/5/2264K 浏览

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

  ;

相关免费在线工具

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

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

<!-- 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>

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

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

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

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

为什么需要 SSR

反面教材：纯客户端渲染

更多推荐文章

相关免费在线工具

正确姿势：SSR 方案

1. Next.js SSR

2. Nuxt.js SSR

3. Remix SSR

4. React 18 SSR

更多推荐文章

相关免费在线工具

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

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

为什么需要 SSR

反面教材：纯客户端渲染

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

正确姿势：SSR 方案

1. Next.js SSR

2. Nuxt.js SSR

3. Remix SSR

4. React 18 SSR

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具